push() and pop() isolate transformations so they do not accumulate globally in p5.js

In p5.js, translate(), rotate(), and scale() modify a global transformation matrix that persists and is cumulative. Without push()/pop(), each call stacks onto the previous, so later objects drift unexpectedly. push() saves the current transformations and style settings; pop() restores them. This lets you draw one transformed object without affecting anything drawn afterward. The recommended order is translate, then rotate, then scale — reversing it changes the result, because transformation order is not commutative.

Examples

function draw() { background(220); push(); translate(200, 200); rotate(frameCount * 0.02); rect(-25, -25, 50, 50); pop(); circle(50, 50, 30); // unaffected by the transforms above }

Assessment

Predict what happens if you remove push/pop from the example. Then explain why translate-then-rotate places the object differently than rotate-then-translate.