Masks in Processing

A mask is an overlay that can be placed on top of an image, and partially blocks or blends with the background. For our purposes, think of the mask as an overlay on your screen, black in some areas, clear in others. Below is a simple example, and doesn't require more than drawing the mask as the last task in your draw() method.

But what if you need something like this:

You can't just draw the text. Rather, you effectively need to remove the text. This is more complex to implement. Processing provides PImage:mask(), but I decided we should implement our own version to get an idea what might go on under the hood. The general idea is to create a drawing, get its pixels, then selectively copy those pixels onto the screen at the end of our draw() method. We only copy the pixels that are black.

I wrote two implementations, one with createImage() and one with createGraphics(), and settled on the latter.

Comments are closed.