Learning Processing: A Beginner's Guide to Programming Images ...

Example 14-3: A rectangle moving along the z-axis
float z = 0; // a variable for the Z (depth) coordinate
void setup() {
size(200,200,P3D);
}
void draw() {
background(0);
stroke(255);
fill(100);
// Translate to a point before displaying a shape there
translate(width/2,height/2,z);
rectMode(CENTER);
rect(0,0,8,8);
z + + ; // Increment Z (i.e. move the shape toward the viewer)
}
Translation and Rotation (in 3D!) 231
Although the result does not look diff erent from Example 14-1, it is quite diff erent conceptually as we have
opened the door to creating a variety of three-dimensional eff ects on the screen with Processing’s 3D engine.
Exercise 14-1: Fill in the appropriate translate( ) functions to create this pattern. Once you are
fi nished, try adding a third argument to translate( ) to move the pattern into three dimensions.
size(200,200);
background(0);
stroke(255);
fill(255,100);
translate(_______,_______);
rect(0,0,100,100);
translate(_______,_______);
rect(0,0,100,100);
translate(_______,_______);
line(0,0,-50,50);
When using (x,y,z) coordinates, we must tell
Processing we want a 3D sketch. This is done
by adding a third argument “P3D” to the size()
function. See Section 14.2 for more details.
Th e translate( ) function is particularly useful when you are drawing a collection of shapes relative to a
given centerpoint. Harking back to a Zoog from the fi rst 10 chapters of this book, we saw code like this:
void display() {
// Draw Zoog's body
fill(150);
rect( x,y ,w/6,h*2);
}
// Draw Zoog's head
fill(255);
ellipse( x,y-h/2 ,w,h);