Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
732
Pixels
The Pixels section includes functions that operate at the pixel level. In addition to functions
that provide access to the entire pixel array of the display, there are two simple yet
powerful functions for blending and filtering image data that provide programmatically
controlled Photoshop-like capabilities. If you don’t want to use these cool included functions
for doing things like blurs, posterization, image masking, and compositing, you can
easily spin your own, as well; just grab the image pixels using the loadPixels() function,
do some bit shifting, and then just call updatePixels() to rewrite the pixel data to the
screen. In addition to using the get() function or the PImage get() method to access the
color of a pixel, it is also possible (and faster) to access the pixels[] array directly. Similar
to the two get() commands just discussed, there are two pixels[] arrays in Processing—
one represents the contents of the display window and the other is a property within the
PImage class. Similar to the get() method, this pixels[] array property requires a PImage
object to be accessed (e.g., myImage.pixels), and the array data only relates to the PImage
object, independent of the display window. Here’s an example that uses both get() commands
and pixels[] arrays. This example also uses the portrait.jpg image, which should
be in the sketch’s data directory.
size(400, 400);
//create a Pimage and load an external image
PImage img = loadImage("portrait.jpg");
//PImage method get() works even without drawing image to the screen
println("PImage get() method = " + img.get(50, 50));
//PImage pixels[] array may also be accessed without drawing ➥
the image to the screen
println("PImage pixel array = " + img.pixels[50*width+50]);
//draw the image to the screen
image(img, 0, 0);
// display window get() function works without calling loadPixels();
println("get() function = " + get(50, 50));
loadPixels();
// loadPixels() must be called prior to accessing display window ➥
pixels[] array directly
println("pixel array = " + pixels[50*width+50]);
It is confusing that these two arrays have the same name but function differently. As I
mentioned, you can access the pixel values of a PImage object directly, even prior to drawing
the image to the screen, using object-oriented dot syntax, as in myImage.pixels.
However, to access the pixel values of the display window, you must first call
loadPixels(), as I did in the preceding example. With regard to the two get() commands,
neither command requires loadPixels() to be called prior to being used. Once
loadImage() has been called, the PImage get() method can access pixel values within the
image. However, to access the image pixel value using the display window get() function,
you need to draw the image to the screen using the image() command.