Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
620
Figure 13-3. Order of Transformations example
The problem becomes a little trickier when using multiple objects. For example, the next
sketch tries to rotate four cubes as one larger block. Each cube will be 100 ✕ 100 ✕ 100,
so I need to offset each block by 50. For example, I want the top-left block to be at –50 on
the x-axis and –50 on the y-axis; the top-right block at 50 on the x-axis and –50 on the
y-axis; the bottom-left block at –50, 50; and the bottom-right one at 50, 50. In addition, I
want the entire group of four blocks to be centered in the display window. The intuitive
thing to try is to initially translate everything to the center of the display window, as I did
in the previous example, and then call a series of translations for each block, using the offset
values I just mentioned. Unfortunately, this won’t work as expected. But don’t take my
word for it; give it a try (see Figure 13-4):
// Multiple Translations
void setup(){
size(400, 400, P3D);
}
void draw(){
background(0);
translate(width/2, height/2);
rotateY(frameCount*PI/60);
translate(-50, -50);
fill(255, 0, 0);
box(100, 100, 100);
translate(50, -50);
fill(255, 255, 0);
box(100, 100, 100);
translate(-50, 50);
fill(0, 0, 255);
box(100, 100, 100);