Multiple transformations

Now that you’ve seen the basics of translation, rotation, and scaling, let’s talk about using all of them together, and some of the complexities we brushed over at the beginning.

Order matters

When you do multiple transformations, the order makes a difference. A rotation followed by a translate followed by a scale will not give the same results as a translate followed by a rotate by a scale. Here is an example program that demonstrates that:

// yellow square
fill(255, 255, 0);
rect(70, 70, 20, 20);  

// red square
pushMatrix();
fill(255, 0, 0); 
rotate(30);
translate(70, 70);
scale(2.0);
rect(0, 0, 20, 20);
popMatrix();

// green square
pushMatrix();
fill(218, 232, 193); 
translate(70, 70);
rotate(30);
scale(2.0);
rect(0, 0, 20, 20);
popMatrix();

Which order you use depends on what your desired effect is. Just keep in mind that you’re moving the graph paper, not the object itself, and you should find an order that works for you.