Processing: Creative Coding and Computational Art

Loading & Displaying
The Loading & Displaying section includes two functions that make working with images in
Processing a joy: loadImage() and image(). loadImage("imageName") expects a single
String argument, which should be the name of the file you want to load, residing in the
sketch’s data directory. It is critical that you first load your image files into Processing by
selecting Add File from the Sketch menu. When you select Add File, your loaded image will
be placed in a data subdirectory, within the current sketch main directory. If you don’t
already have a data directory, it will be created for you. If you’ve successfully run the last
few examples, you already know how to do this.
It is recommended that you do all your image loading in the setup() structure, not in
draw(). After you load an image using loadImage(), you won’t see it until you render it to
the screen. This is another one of those things that’s not so simple to do in Java, but
incredibly simple to achieve in Processing—just call image(). This function can take a
bunch of arguments, including a PImage object reference and the x, y, width, and height
properties of the image.
This subsection also includes basic tinting functions and a simple utility function called
imageMode() that gives you two options for specifying image measurements in the display
window when you call the image() function. The default CORNER argument option allows
you to specify x, y, width, and height properties, while the CORNERS argument makes the
third and fourth measurement arguments (that were width and height) specify the position
of the bottom-right point of the image. In both cases, when passing arguments that
control width and height, you can scale and load the images simultaneously. Be aware that
you can scale the images both proportionally and non-proportionally based on the ratio of
your arguments.
As an example, I created a simple progressive tiling sketch that loads an image, and then
continuously shrinks the image as it tiles it through the display window (see Figure A-17).
Be aware that there is the possibility of generating an infinite loop with this example—one
of Zeno’s paradoxes, in which a float value keeps approaching a discrete value, but never
reaches it. You can read about Zeno’s paradoxes at http://en.wikipedia.org/wiki/
Zeno%27s_paradox. If you test this, please remember to first add your image file into the
data directory using the Add File command. (This sketch uses the image vail.jpg.)
/*
Progressive Tile
Ira Greenberg, November 12, 2005
*/
size(480, 480);
background(255);
PImage img = loadImage("vail.jpg");
float x = 0, y =0;
float w = 240*.5;
float h = w;
for (int i=0; i