Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
112
(if you really want to). Above the hardware level is where you’ll do most of your graphics
coding in Processing.
No matter how high level the process of drawing to the screen is made for you, either
through a programming language like Processing, or even more simply, a pencil tool in a
graphics application, the same underlying stuff still needs to happen. These underlying
processes can be quite complex in a language like Java, and involve low-level processing,
pretty close to the hardware. For example, there’s a class in Java called BufferedImage that
provides access to much of the procedural and structural anatomy of an image. Happily,
you don’t need to understand the BufferedImage class to work with images in Processing;
but it can be helpful, or at least interesting, to see a little of what goes into creating an
image behind the scenes. I really want to stress that you don’t need to understand anything
about the BufferedImage class to work in Processing, but learning a little about it
will give you more insight into how images work in Java and in computer graphics in general.
The BufferedImage class is composed of a bunch of other classes. Figure 4-3 shows a
simplified diagram of its structure.
Figure 4-3. Simplified BufferedImage class structure
The BufferedImage class diagram looks pretty scary. I’ve had advanced computer science
students brought to their knees trying to unravel it. What makes it so complicated is the
abstraction involved in its design and ultimately the processing required to generate and
manipulate images on a computer screen. If you begin to feel sick to your stomach reading
about this stuff, just skip ahead to the “Graphic formats” section.
fill(0, 0, 255);
rect(0, 0, 10, 10);
These two lines of processing code draw a blue rectangle with a black stroke (border) to
the screen. Let’s look a little below the surface at what’s happening. The rect() function
in Processing, which relates to the Rectangle() method call in Java, is a drawing method
built into the Processing language. You simply pass four arguments to the rect() function:
x, y, width, and height, and the function draws a rectangle to those specifications. Drawing
methods usually work by plotting points, called vertices (singular is vertex), and then connecting
the vertices with some type of line. In Processing, as in numerous other programming
languages with graphics capabilities, there are drawing methods to draw points, lines,
and basic shapes (simple polygons). In the preceding rectangle example, four vertices are