translate() and rotate() transform the drawing origin; pushMatrix/popMatrix save and restore it
In Processing’s coordinate system, translate(x, y) moves the origin point (0,0) to a new location — subsequent drawing commands are relative to the new origin. rotate(angle) rotates the coordinate system around the current origin. pushMatrix() saves the current transformation state to a stack; popMatrix() restores it. The pattern pushMatrix() → translate/rotate → draw → popMatrix() draws something at a transformed location without affecting subsequent drawings. This is essential for drawing objects relative to their own center (rotating a shape around its midpoint rather than the canvas corner) and for fractal structures where each branch inherits its parent’s coordinate system.
Examples
Rotating a rectangle around its center: pushMatrix(); translate(100, 150); rotate(PI/4); rect(-25, -25, 50, 50); popMatrix(); Without pushMatrix/popMatrix, subsequent shapes would also be rotated.
Assessment
Write Processing pseudocode that draws 8 lines radiating from a center point at (250, 150), each rotated 45 degrees further than the previous, using translate and rotate with pushMatrix/popMatrix.