Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
432
Image manipulation
Figure 10-22. Color Static sketch
As you might suspect, the pixels[] array has better uses than creating static.
loadPixels() collects all the pixels in the window, regardless of whether the pixels make
up a single color background fill or a photographic image. The more interesting latter case
opens the door to all kinds of imaging possibilities. However, before looking at the next
sketch, let’s review how to load an image.
To work with images in Processing, you need to load them into a data directory that
resides within the current sketch directory. It’s a very simple process. Under Sketch in the
top menu bar, select the Add File command. This command opens a file browser, allowing
you to select an image to copy into the data directory. If there isn’t a data directory,
Processing will automatically create one for you. If you eventually make additional changes
to the image using a program like Photoshop, you’ll need to remember to add the altered
image to your data directory again (it’s not updated automatically). One cautionary note:
when you add an image into the data directory with the same name as an existing image,
the original image will be replaced by the image you add, without any warning. Processing
can work with GIF, JPG, TGA, and PNG images.
The following sketch (shown in Figure 10-23) loads an image (my dog Heidi) into the display
window (obviously, you’ll need to change the name heidi.jpg to the image you’re
using):
// Load an Image
size(600, 400);
PImage img1;
img1 = loadImage("heidi.jpg");
image(img1, 0, 0);