Processing: Creative Coding and Computational Art

void setup(){
size(400, 400);
}
void draw(){
background(0);
rotate(frameCount*PI/60);
rect(50, 50, 150, 150);
}
If you run the sketch, you may be surprised to see the rectangle rotating off the screen,
around the origin, instead of around its own center point. This is a common error new
coders make. Intuitively, it seems that rotate() should spin the shape around its center
point. However, rotate() doesn’t actually spin the shape; it spins the entire contents of
the display window. If you’re used to graphics applications like Illustrator, FreeHand, or
Flash, which internally handle translations when you draw highly encapsulated shape
objects, it can seem frustrating to have to think about the translation process in
Processing. A basic rule of thumb is to draw your objects initially around the origin (0, 0,
0) and then translate them. Here’s a new version of the last sketch, correctly implemented
for centered rotation:
void setup(){
size(400, 400);
}
void draw(){
background(0);
translate(width/2, height/2);
rotate(frameCount*PI/60);
rect(-75, -75, 150, 150);
}
The order of transformations also has an effect on how and where in the display window
things are drawn.
The next sketch (see Figure 13-3) uses Processing’s sphere() function. I call translate()
after rotateY(), which doesn’t get the sphere rotating around the center of the window.
However, if I switch the order of the rotateY(frameCount*PI/60); and translate(width/2,
height/2); commands, the rotation happens as expected, around the center of the
window.
void setup(){
size(400, 400, P3D);
}
void draw(){
background(0);
// the next 2 lines should be switched in order
rotate(frameCount*PI/60);
translate(width/2, height/2);
sphere(100);
}
3D
619
13