Processing: Creative Coding and Computational Art

ect(random(width), random(height), 5+random(15), 5+random(15));
}
// build pixel array of the screen
loadPixels();
// set mask
img.mask(pixels);
//draw image
image(img, 0, 0, 600, 400);
Figure 10-35. Pixel Array Mask sketch
Since you can collect the pixels in the display window using loadPixels(), you can generate
a mask with any of Processing’s drawing functions, which is exactly what I did in this
example. Using the rect() command, I created 600 rectangles with a fill of 255, and then
I called loadPixels(), which created a pixel array of the image. If you specify an RGB fill
value, the mask utilizes the value of the blue color component of the pixels. You can also
specify a grayscale value with a single argument when calling the fill or background function.
0 (black) will be opaque, while 255 (white) will be totally transparent. Values between
0 and 255 will have varying translucency. In the example, I set the blue component in the
background color to 50, giving the pixel mask some overall slight translucency, allowing
the image to show through the background color a little. I gave the rectangles a fill of 255,
fully revealing parts of the image through the little rectangle windows. If you’re still not
getting this, try changing some of the values and playing with the code—it’s the best way
to really understand what’s happening.
COLOR AND IMAGING
451
10