FSOSS 2010/processing.js/transforms

Transformations

• Order is important!
• Let's try to rotate a square

rotate(radians(45));
translate(width/2, height/2);
rect(0, 0, 20, 20); // rectangle moves off the canvas

• When we translate, scale or rotate we change the coordinate system

translate(width/2, height/2);
rotate(radians(45));
rect(-10, -10, 20, 20);