Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
618
If you compare the code in the preceding two sketches carefully, you’ll notice all I had to
do to get the second rotation was add a single line of code: rotateX(frameCount*PI/60);.
The sketch is very simple, but it does introduce a few new concepts. First, I included an
extra argument in the size(400, 400, P3D) function call. In reality, the size() function
always includes a third argument that tells Processing what renderer to use. If you don’t
specify a renderer, then the default renderer (JAVA2D) is used. P3D is a 3D renderer, also
referred to as a 3D engine, built within in Processing. A 3D engine is just software that calculates
the math of 3D coordinate space (x, y, and z), and then remaps the 3D space back
to a 2D projection so that you can view it on a monitor. Since our monitors still rely on a
flat, illuminated 2D surface, they can’t really plot 3D information. In a sense, what you see
on your monitor is sort of a photograph of 3D that has been flattened to 2D coordinate
space. 3D engines typically allow you to work with 3D geometry, light sources, textures,
and even virtual cameras. Besides that, 3D works very similarly to 2D, allowing you to set
properties like fills, strokes, position, and scale, and animate these properties as well.
3D transformation
In the last two examples, Processing’s box() function took three arguments (width, height,
and depth), and placed the box, centered, at (0, 0, 0). Since you’re using three dimensions
now, you use three values (x, y, and z) to identify a point in space. To move the box to the
center of the display window, you can use Processing’s translate() function. Try running
the last sketch again, but commenting out the translate(width/2, height/2); call. You
should see the box spinning around the top-left corner of the display window, centered at
(0, 0, 0).
You can also translate along the z-axis. In the last sketch, change translate(width/2,
height/2); to translate(width/2, height/2, -400); and run the sketch. You should
now see a smaller cube spinning in the display window. You can also try using a larger positive
value for the third argument; for example, translate(width/2, height/2, 130);
will generate a cube that fills the entire display window.
I referred to the cube getting smaller and larger when translated along the z-axis. More
accurately, the cube remains the same size (with regard to its internal width/height/depth
properties), but its translation along the z-axis moves it within a virtual space modeled
after space in the physical world, in which objects appear to decrease and increase in size
as they move away from or toward a viewer, according to the rules of perspective. 3D
engines attempt to simulate this phenomenon by coding perspective projection, usually
through a virtual camera that can be moved, rotated, and even zoomed. I’ll discuss virtual
cameras in Processing in Chapter 14.
The process of translating the contents of the display window is a little confusing and takes
some time to get used to. This shouldn’t be a completely new concept, though, as it was
covered earlier in the book in the discussion of 2D space, and the same principles apply.
The benefit of translation becomes apparent when you try to rotate a shape drawn in the
middle of the display window. The next sketch draws a 2D rectangle in the center of the
screen and then rotates it. I used the rect() command, since it takes x- and y-coordinate
and dimension arguments (as opposed to box() and sphere(), which only take dimension
arguments).