<?xml version='1.0' encoding='UTF-8'?>

<?xml-stylesheet href="./_c74_tut.xsl" type="text/xsl"?>
<chapter name="Tutorial 10: Chromakeying">
<setdocpatch name="10jChromakey" patch="10jChromakey.maxpat"/>

<previous name="jitterchapter09">More Mixing</previous>
<next name="jitterchapter11">Lists and Matrices</next>
<parent name="jitindex">Jitter Tutorials</parent>



<h1>Tutorial 10: Chromakeying</h1>
<p>This tutorial explains how to perform chromakeying with two source movies using the <o>jit.chromakey</o> object. We will also learn how to find out the color of any pixel on the screen with the <o>suckah</o> object.</p>

<p>When you open the tutorial patch, Max will automatically read two movies (<i>oh.mov</i> and <i>traffic.mov</i>) into two <o>jit.movie</o> objects by sending appropriate <m>read</m> messages to those objects with a <o>loadbang</o>:</p>

<illustration><img src="images/jitterchapter10a.png"/>Initializing the patch via <o>loadbang</o>.</illustration>
<p>Additional parameters we need for this patch are also initialized by the <o>loadbang</o>, which is connected to the <o>message</o> box on the right of the patch. The <o>message</o> box initializes the rest of the patch by sending messages to named <o>receive</o> objects elsewhere in the patch. (See Tutorial 16: <link type="tutorial" module="max" name="basicchapter16">Remote Messaging</link> — Sending messages without patchcords).</p>

<bullet>Click the <o>toggle</o> box to start the <o>metro</o>. You should see images appear in the three <o>jit.pwindow</o> objects in the patch. Note that the <o>toggle</o> box not only starts and stops the <o>metro</o>, but also starts and stops the movie transport of the two <o>jit.movie</o> objects.</bullet>
<p>The lower half of the tutorial patch (with two of the three <o>jit.pwindow</o> objects) looks something like this:</p>

<illustration><img src="images/jitterchapter10b.png"/>The <o>jit.chromakey</o> object</illustration>
<bullet>Click with the mouse on the blue region of the left-hand <o>jit.pwindow</o> object (i.e. the area behind the man's head in the movie). </bullet>
<p>The third <o>jit.pwindow</o> object (in the lower-right hand of the patch) will look like this:</p>

<illustration><img src="images/jitterchapter10c.png"/>How the heck did he get in front of that fence?</illustration>
<div>
<techdetail><i><b>Historical note:</b></i><i/> Bluescreen compositing, or the process of shooting live footage against a blue matte background only to replace the blue with a separate image later, has been around since the late 1930s. Originally a very expensive film process involving lithographic color separation, bluescreen (and its now more common sibling, greenscreen) has evolved into the most commonplace special effect in film, television, and video. The ability to perform chromakeying (the technical term for the process) using digital superimposition has only made it more ubiquitous. Video chromakeying is often referred to in the television industry as CSO (Colour Separation Overlay), the name given to the process by the BBC team that developed it in the 1960s. Petro Vlahos, a bluescreen innovator in the 1960s, was awarded a Lifetime Achievement Award by the Academy of Motion Picture Arts and Sciences in 1994, an acknowledgment of how indispensible the technology had become. </techdetail>
</div>
<h2>The jit.chromakey object</h2>
<p><i>Chromakeying</i>&#x2014;the process of superimposing one image on top of another by selective replacement of color&#x2014;is accomplished in Jitter by the <o>jit.chromakey</o> object. By specifying a color and a few other parameters, <o>jit.chromakey</o> detects cells containing that color in the first (left-hand) matrix and replaces them with the equivalent cells in the second (right-hand) matrix when it constructs the output matrix. The result is that cells from the first matrix are superimposed onto the second. </p>

<bullet>Since any color is fair game for the chromakey, try clicking elsewhere in the lefthand <o>jit.pwindow</o>. Different colors will be knocked out of the man's face to reveal the traffic.</bullet>
<illustration><img src="images/jitterchapter10d.png"/>The disappearing face trick (part one)</illustration>

<p>The <o>jit.chromakey</o> object uses the <m>color</m> attribute to define the center color to in the chromakey (called the reference color). This attribute is set as a list of values for as many planes as exist in the matrices that are being keyed. The <m>tol</m> attribute specifies a range of values around the key color. Colors within this range will be keyed as well. When using <o>jit.chromakey</o> with <i>char</i> matrices (e.g. video), the attributes are specified in a floating point range <m>0</m> to <m>1</m>, which is then mapped to the 0-255 range necessary for <i>char</i> data. To set the <m>color</m> attribute for a solid green chromakey, therefore, you would set the attribute as <m>color 0 0 1.0 0</m>, not <m>0 0 255 0</m>. A <m>tol</m> range of <m>0.5</m> will key all values within half  of the chromatic distance from the reference color (computed as the sum of the absolute differences between the reference color and the actual cell value in each plane). A <m>tol</m> range of <m>0</m> will treat only the exact reference color as part of the chromakey. </p>

<bullet>Try clicking on the blue region in the lefthand movie again, and play with the <m>tol</m> attribute to see how the chromakey output changes. At low tolerance, some of the bluescreen in the left image will remain in the keyed output. At a very high tolerance, parts of the man's face may disappear.</bullet>
<p>In the tutorial patch, the <m>color</m> attribute to <o>jit.chromakey</o> is set by clicking on an invisible object. If you unlock the patch, you will see a region of concentric red squares that sit on top of the left-hand <o>jit.pwindow</o> object:</p>

<illustration><img src="images/jitterchapter10e.png"/>The <o>suckah</o> object</illustration>
<p>The region is a Max user interface object called <o>suckah</o>, which appears on the add object:interface palette like this:</p>

<illustration><img src="images/jitterchapter10f.png"/>The <o>suckah</o> object in the object palette</illustration>
<p>The <o>suckah</o> object will report the RGB values of any pixel on the screen that the <o>suckah</o> object overlays. It reports these values as a list of floats in the range <m>0.0</m> to <m>1.0</m> when you click in the object in a locked patch. For example, clicking on a region of solid blue that has a <o>suckah</o> on top of it will cause the <o>suckah</o> to send out the list <m>0 0 1.0</m>. (The first version of <o>suckah</o> used the range 0 to 255 for output. There is a checkbox in the inspector if this behavior is desired.)</p>

<p>To set the <m>color</m> attribute for our <o>jit.chromakey</o> object, we take the RGB list that comes out of the <o>suckah</o> object and send it through a <o>prepend</o> <m>0</m>, which adds an alpha value of <m>0</m> to the front of the list. The message is then completed by the <o>prepend</o> <m>color</m> and sent to <o>jit.chromakey</o>.</p>

<h2>Keying options</h2>
<p>The <o>jit.chromakey</o> object has additional attributes: <m>minkey</m>, <m>maxkey</m>, and <m>fade</m>. When a matrix arrives in the left inlet, <o>jit.chromakey</o> creates a greyscale (1-plane) mask internally, based on that matrix. Cells in the incoming matrix that have color values within the tolerance (<m>tol</m>) range are set to the <m>maxkey</m> attribute's value (the default is <m>1</m>) in the mask. Regions outside the tolerance range are multiplied by the <m>minkey</m> attribute (default is <m>0</m>). If the <m>minkey</m> and <m>maxkey</m> are set to <m>0</m> and <m>1</m>, the resulting image should look white where the keying should take place, and black where the original image is to be retained.</p>

<p>The resulting mask and its inverse are then multiplied by the right and left matrices, respectively. The results of the multiplication are then added to form the composite image. The following diagram shows you a pictorial overview of the process:</p>

<illustration><img src="images/jitterchapter10g.png"/>The two sources, their masks (with <m>minkey</m> at <m>0</m> and <m>maxkey</m> at <m>1</m>) and the composite chromakey.</illustration>
<p>As you can see, the <m>maxkey</m> attribute sets the strength of the righthand matrix in the output, while the <m>minkey</m> attribute sets the strength of the lefthand matrix. If we were to reverse the <m>minkey</m> and <m>maxkey</m> attributes, the chromakey would be reversed, and the following would happen:</p>

<illustration><img src="images/jitterchapter10h.png"/>The composite effect with the <m>minkey</m> at <m>1</m> and the <m>maxkey</m> at <m>0</m> (reverse chromakey).</illustration>
<p>The <m>fade</m> attribute allows for an amount of interpolation between the area being keyed and the area not being keyed. This lets you create a soft edge to the chromakey effect. Colors in the left matrix that are slightly out of bounds of the key tolerance range, yet that are within the range of <m>tol</m> + <m>fade</m> from the reference color, are interpolated between their original (unkeyed) color and the color in the same cell of the right matrix. The amount of interpolation is based on how great the <m>fade</m> value is, and how far the color in question lies outside the tolerance range.</p>

<bullet>Try experimenting with different <m>tol</m>, <m>fade</m>, <m>minkey</m>, <m>maxkey</m> and  <m>color</m> values. Watch how the five attributes interact for different keying effects, and how the <m>minkey</m> and <m>maxkey</m> values complement one another.</bullet><br/>
<p>Accurate chromakeying can be a challenging process. Correct values for the <m>tol</m> and <m>fade</m> attributes are essential to make sure that the correct regions in the first image are keyed to the second image. In general, very detailed key images will show slight speckling in spots where the colors rapidly move between keyed and non-keyed regions. In addition, a single key color (e.g. blue) almost never suffices for a complete key, so a range of values must always be used. You will often find, however, that the color you want keyed out of part of the image is somewhat present in the region you want to retain! Balancing all of these factors to get the most convincing effect is the hardest part of using the <o>jit.chromakey</o> object.</p>

<h2>Summary</h2>
<p>The <o>jit.chromakey</o> object lets you do two-source chromakeying in Jitter. You can set a color range for the key using the <m>color</m> and <m>tol</m> attributes, and use the <m>fade</m>, <m>minkey</m>, and <m>maxkey</m> values to define how the two matrices work in a composite. The <o>suckah</o> user interface object allows you to easily select colors as they appear on the screen by setting the object over a <o>jit.pwindow</o>. Clicking the <o>suckah</o> object will give you the color of the pixel just clicked on the screen.</p>
	<seealsolist>
		<seealso display="Video and Graphics Tutorial 10: Composing the Screen" module="Video and Graphics" name="jitterchapter00l_Composing the screen" type="tutorial" />
		<seealso name="jit.chromakey">Keying based on chromatic distance</seealso>
		<seealso name="jit.pwindow">In-Patcher Window</seealso>
		<seealso name="jit.movie">Play or edit a movie</seealso>
		<seealso name="loadbang">Send a bang automatically when patcher is loaded</seealso>
		<seealso name="metro">send bangs at regular intervals</seealso>
		<seealso name="prepend">Place one message at the beginning of another</seealso>
		<seealso name="suckah">Get pixel color at display coordinates</seealso>
		<seealso name="vexpr">Evaluate a mathematical expression on lists</seealso>
</seealsolist>
</chapter>
