Module 19 : Masking

• Topics
• Resources
• In-Class Activities
• Sample Quiz Question

Topics

• Image Masks

New processing syntax:

• The mask() function of the PImage class.
• PGraphics class, and its beginDraw() and endDraw() functions
• createGraphics() function.

Resources

tbd...

In-Class Activities

Oval Mask
In this version, we create an oval mask. In the following four-panel image, we show the stages of our creation, with the original image at top-left, our custom mask at top-right, and then two applications of the masked image, one over a black background (bottom-left) and one over a white background (bottom-right).

Spoiler: my code

Vignette
In this version, we create an oval vignette, having the picture gently fade to either black or white at the boundaries. To create this effect, we create a custom mask image as a gradient of ovals. Specifically, we have created 255 cocentric ovals that vary in color ranging from black to white as the dimensions of the ovals also range from bigger to smaller.

In the following four-panel image, we show the stages of our creation, with the original image at top-left, our custom mask at top-right, and then two applications of the masked image, one over a black background (bottom-left) and one over a white background (bottom-right).

Spoiler: my code

Text Shapes
In this example, we use rendered text as a shape for a mask, allowing us to clip an image so that it only appears within the shape defined by the text. In this particular case, we rely on font AbadiMT-CondensedExtraBold with size 275. Our standard four-panel view shows the original image, the PGraphics image that defines the mask, and then two versions of the masked image (one with black background, one with blue).

Spoiler: my code

Text Shapes (part 2)
If we replace the black portion of the mask from the previous version with a shade of gray, then that "background" portion of the masked image will now show with some transparency (whereas it was invisible when masked with black).

Spoiler: my code

Cut-and-Paste Demo
In this example, we demonstrate how to clip one portion of a photo into its own image, and then place that image into the context of a different photo. (The second photo is taken from http://a.abcnews.go.com/images/Politics/gty_washington_monument_kb_1405012_16x9_992.jpg.) Our result is a bit cheesy, and all of the geometry in our code was defined by trial-and-error, but this demonstrates the basic principles.

Spoiler: my code