zzg/processingjs-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
processingjs-docs/reference/blend_.1
T
Zack Zatkin-Gold 6d072107fe Initial commit
2015-09-01 19:05:48 -04:00

240 lines
11 KiB
Groff
Raw Permalink Blame History

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>blend() | reference | Processing.js</title>
<link rel="stylesheet" href="../css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="../css/syntax.css" type="text/css" />
<link rel="stylesheet" href="../css/processing-js.css" type="text/css" />
<script src="../js/processing.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.tweet.min.js" type="text/javascript"></script>
<script src="../js/tabselector.js" type="text/javascript"></script>
<script src="http://cdn.webglstats.com/stat.js" defer="defer" async="async"></script>
<script type="text/javascript">
// Only do tracking on the actual site
if (document.location.host === "processingjs.org") {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8565070-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
}());
}
</script>
</head>
<body>
<div class="container">
<div class="header">
<a href="http://processingjs.org/"><img src="../images/header.png" width="177" height="42"></a>
</div>
<span class="tagline">a port of the Processing Visualization Language</span>
<div class="navbar">
<canvas width="940px" height="78px" data-processing-sources="/sketches/bannerSketch.pde"></canvas>
<ul>
<li><a href="http://processingjs.org/"><span>home</span></a></li>
<li><a href="http://processingjs.org/download/"><span>download</span></a></li>
<li><a href="index.html"><span>reference</span></a></li>
<li><a href="http://processingjs.org/exhibition/"><span>exhibition</span></a></li>
<li><a href="http://processingjs.org/learning/"><span>learning</span></a></li>
<li><a href="http://processingjs.org/articles/"><span>articles</span></a></li>
<li><a href="http://processingjs.org/community/"><span>community</span></a></li>
<li><a href="http://processingjs.org/blog/"><span>blog</span></a></li>
</ul>
<a class="viewsource" href="http://processingjs.org/sketches/bannerSketch.pde">view source</a>
</div>
<div class="page row">
<div class="span11">
<table cellpadding="0" cellspacing="0" border="0" class="ref-item">
<tr class="name-row">
<th scope="row">Name</th>
<td><h3>blend()</h3></td>
</tr>
<tr class="">
<th scope="row">Examples</th>
<td><div class="example"><img src="blend_add.jpg" alt="example pic" /><pre class="margin">// @pjs preload must be used to preload the image
/* @pjs preload="rockies.jpg, degaul.jpg"; */
PImage img = loadImage("rockies.jpg");
PImage img2 = loadImage("degaul.jpg");
img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
image(img, 0, 0);
image(img2, 0, 0);</pre></div>
<div class="example"><img src="blend_subtract.jpg" alt="example pic" /><pre class="margin">// @pjs preload must be used to preload the image
/* @pjs preload="rockies.jpg, degaul.jpg"; */
PImage img = loadImage("rockies.jpg");
PImage img2 = loadImage("degaul.jpg");
img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, SUBTRACT);
image(img, 0, 0);
image(img2, 0, 0);</pre></div>
<div class="example"><img src="blend_darkest.jpg" alt="example pic" /><pre class="margin">// @pjs preload must be used to preload the image
/* @pjs preload="rockies.jpg, degaul.jpg"; */
PImage img = loadImage("rockies.jpg");
PImage img2 = loadImage("degaul.jpg");
img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
image(img, 0, 0);
image(img2, 0, 0);</pre></div>
<div class="example"><img src="blend_lightest.jpg" alt="example pic" /><pre class="margin">// @pjs preload must be used to preload the image
/* @pjs preload="rockies.jpg, degaul.jpg"; */
PImage img = loadImage("rockies.jpg");
PImage img2 = loadImage("degaul.jpg");
img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
image(img, 0, 0);
image(img2, 0, 0);</pre></div></td>
</tr>
<tr class="">
<th scope="row">Description</th>
<td><p>Blends a region of pixels into the image specified by the <b>img</b> parameter.
These copies utilize full alpha channel support and a choice of the following modes to blend the colors of source pixels (A)
with the ones of pixels in the destination image (B):</p>
<p>BLEND - linear interpolation of colours: C = A*factor + B</p>
<p>ADD - additive blending with white clip: C = min(A*factor + B, 255)</p>
<p>SUBTRACT - subtractive blending with black clip: C = max(B - A*factor, 0)</p>
<p>DARKEST - only the darkest colour succeeds: C = min(A*factor, B)</p>
<p>LIGHTEST - only the lightest colour succeeds: C = max(A*factor, B)</p>
<p>DIFFERENCE - subtract colors from underlying image.</p>
<p>EXCLUSION - similar to DIFFERENCE, but less extreme.</p>
<p>MULTIPLY - Multiply the colors, result will always be darker.</p>
<p>SCREEN - Opposite multiply, uses inverse values of the colors.</p>
<p>OVERLAY - A mix of MULTIPLY and SCREEN. Multiplies dark values, and screens light values.</p>
<p>HARD_LIGHT - SCREEN when greater than 50% gray, MULTIPLY when lower.</p>
<p>SOFT_LIGHT - Mix of DARKEST and LIGHTEST. Works like OVERLAY, but not as harsh.</p>
<p>DODGE - Lightens light tones and increases contrast, ignores darks. Called "Color Dodge" in Illustrator and Photoshop.</p>
<p>BURN - Darker areas are applied, increasing contrast, ignores lights. Called "Color Burn" in Illustrator and Photoshop.</p>
<p>All modes use the alpha information (highest byte) of source image pixels as the blending factor.
If the source and destination regions are different sizes, the image will be automatically resized to match the destination size.
If the <b>srcImg</b> parameter is not used, the display window is used as the source image.</p>
<p>This function ignores <b>imageMode()</b>.</p></td>
</tr>
<tr class="">
<th scope="row">Syntax</th>
<td><pre>blend(<kbd>x</kbd>,<kbd>y</kbd>,<kbd>width</kbd>,<kbd>height</kbd>,<kbd>dx</kbd>,<kbd>dy</kbd>,<kbd>dwidth</kbd>,<kbd>dheight</kbd>,<kbd>MODE</kbd>)</pre><br />
<pre>blend(<kbd>srcImg</kbd>,<kbd>x</kbd>,<kbd>y</kbd>,<kbd>width</kbd>,<kbd>height</kbd>,<kbd>dx</kbd>,<kbd>dy</kbd>,<kbd>dwidth</kbd>,<kbd>dheight</kbd>,<kbd>MODE</kbd>)</pre></td>
</tr>
<tr class="">
<th scope="row">Parameters</th>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr class="">
<th scope="row">x</th>
<td>int: X coordinate of the source's upper left corner</td>
</tr>
<tr class="">
<th scope="row">y</th>
<td>int: Y coordinate of the source's upper left corner</td>
</tr>
<tr class="">
<th scope="row">width</th>
<td>int: source image width</td>
</tr>
<tr class="">
<th scope="row">height</th>
<td>int: source image height</td>
</tr>
<tr class="">
<th scope="row">dx</th>
<td>int: X coordinate of the destination's upper left corner</td>
</tr>
<tr class="">
<th scope="row">dy</th>
<td>int: Y coordinate of the destination's upper left corner</td>
</tr>
<tr class="">
<th scope="row">dwidth</th>
<td>int: destination image width</td>
</tr>
<tr class="">
<th scope="row">dheight</th>
<td>int: destination image height</td>
</tr>
<tr class="">
<th scope="row">srcImg</th>
<td>PImage:a image variable referring to the source image.</td>
</tr>
<tr class="">
<th scope="row">MODE</th>
<td>Either BLEND, ADD, SUBTRACT, LIGHTEST, DARKEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN</td>
</tr>
</table>
</td>
</tr>
<tr class="">
<th scope="row">Returns</th>
<td>None</td>
</tr>
<tr class="">
<th scope="row">Usage</th>
<td>Web & Application</td>
</tr>
<tr class="">
<th scope="row">Related</th>
<td><a href="alpha_.1">alpha()</a><br />
<a href="filter_.1">filter()</a><br /></td>
</tr>
</table>
<div class="cclicense">
<p>This reference is licensed under the CC BY-NC-SA 2.0 license:</p>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">
<img alt="Creative Commons License" border="0" src="../images/somerights20.gif" />
</a>
</div>
</div>
<div class="sidebar span4">
<h3><a href="http://processingjs.org/download/">Downloads</a></h3>
<ul>
<li><a href="http://processingjs.org/download/">Download the latest version of Processing.js!</a></li>
</ul>
<h3><a href="http://processingjs.org/articles/">Articles</a></h3>
<ul>
<li><a href="http://processingjs.org/articles/jsQuickStart.html">Quick Start - JavaScript Developer</a></li>
<li><a href="http://processingjs.org/articles/p5QuickStart.html">Quick Start - Processing Developer</a></li>
<li><a href="http://processingjs.org/articles/RenderingModes.html">Rendering Modes</a></li>
<li><a href="http://processingjs.org/articles/PomaxGuide.html">Pomax's Guide to processing-js</a></li>
</ul>
<h3><a>Web IDEs</a></h3>
<ul>
<li><a href="http://sketchpad.cc">Sketchpad.cc</a></li>
<li><a href="http://processingjs.org/tools/processing-helper.html">Processing.js Helper</a></li>
<li><a href="http://www.openprocessing.org">OpenProcessing.org</a></li>
</ul>
<h3><a href="http://processingjs.org/community/">Community</a></h3>
<ul>
<li><a href="irc://irc.mozilla.org/processing.js">IRC Channel</a></li>
<li><a href="http://processing-js.lighthouseapp.com/">Bug Tracker</a></li>
<li><a href="http://github.com/processing-js/processing-js/">Github Repository</a></li>
<li><a href="http://groups.google.com/group/processingjs">Google Group</a></li>
<li><a href="http://zenit.senecac.on.ca/wiki/index.php/">Open Source @ Seneca</a></li>
</ul>
<h3><a href="http://twitter.com/processingjs">Twitter Feed</a></h3>
<div class="twitter"></div>
</div>
</div>
<div class="footer">
Processing is an open visualization language developed by
<a href="http://benfry.com/">Ben Fry</a> &amp; <a href="http://reas.com/">Casey Reas</a>,
and originally ported to Javascript by
<a href="http://ejohn.org/blog/processingjs/">John Resig</a>.
Processing.js is maintained by the Processing.js team.
</div>
</div>
<a href="http://github.com/processing-js/processing-js/">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="../images/forkme-right-orange.png" alt="Fork me on GitHub">
</a>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink