There seems to be a bug involving masking and the JavaScript implementation of Processing that runs in the browser. Therefore, we're unable to embed the interactive versions of the software in this webpage.

Instead, you may download a single zipfile with the entire collection, and place it within your Processing sketchbook.

Mask Demo

Basic demonstration of creating a mask as a PGraphics object, using it to mask an image, and then composing the masked image with another image. The mask shape was hand-tweaked for this specific image. The sourcecode is available as clocktower.pde.

Vignette

Slight variant on the previous case, where we use loops to make a mask that provides a grayscale gradient (which becomes an alpha gradient on the masked image). The sourcecode is available as vignette.pde.

Creating a Mask with Automation

The following is a variant of an example given in our textbook. My modified source code is available as ch10imageMask.pde.

Chroma Key Masking (a.k.a. Green-Screening)

We explore the topic of chromakey masking (i.e., green-screening, not that the key color need be green). the following is a saved image from our interactive script:

The interactive version is available as chromaKey.pde. It allows the user to control several aspects of the masking process as follows:

/*
 * We allow the user to separately control:
 * -- The chroma key color. This is done by clicking on a pixel of either reference image
 * -- The function used for computing relative difference between two colors:
 *      pressing 'M' (the default) gets you Manhatten distance in RGB space
 *      pressing 'E' gets you Euclidean distance in RGB space
 *      pressing 'L' gets you Euclidean distance in L*a*b space 
 * -- The threshold value used for masking can be changed as follows
 *    For the left image, UP increases and DOWN decreases threshold
 *    For the right image, RIGHT increases and LEFT decreases threshold
 *
 * Finally, if you like what you see, 'S' saves the current screen to file.
 */