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

Our fi rst instinct might be to add another argument to the rect( ) function.
rect(x,y, z ,w,h);
Translation and Rotation (in 3D!) 229
Th e Processing reference page for rect( ) , however, does not allow for this possibility. In order to specify 3D
coordinates for shapes in the Processing world, we must learn to use a new function, called translate( ) .
Th e translate( ) function is not exclusive to 3D sketches, so let’s return to two dimensions to see how it
works.
Th e function translate( ) moves the origin point—(0,0)—relative to its previous state. We know that when
a sketch fi rst starts, the origin point lives on the top left of the window. If we were to call the function
translate( ) with the arguments (50,50), the result would be as shown in Figure 14.3 .
Where is the origin?
(100,100)
fi g. 14.3
Incorrect! We cannot use an (x,y,z) coordinate in Processing’s
shape functions such as rect(), ellipse(), line(), and so on.
Other functions in Processing can take three arguments for
x,y,z and we will see this later in the chapter.
Th e “ origin ” in a Processing sketch is the point (0,0) in two dimensions or (0,0,0) in three
dimensions. It is always at the top left corner of the window unless you move it using translate( ) .
(0,0)
Before
(50,50)
⇒ translate (50,50)⇒
(-50,-50) (0,0)
After
(50,50)
You can think of it as moving a pen around the screen, where the pen indicates the origin point.
In addition, the origin always resets itself back to the top left corner at the beginning of draw( ) . Any calls
to translate( ) only apply to the current cycle through the draw( ) loop. See Example 14-2.