Transforms in p5.js draw() must be enclosed in push()/pop() or they accumulate across every frame

p5.js maintains a persistent global transformation matrix and style state. Calls to translate(), rotate(), or scale() inside draw() modify this shared state. Without push()/pop() to save and restore it, each frame compounds the previous transform — a rotation of 0.02 radians becomes a continuously accelerating spin after a few seconds. fill() and stroke() similarly bleed into subsequent draw calls. The fix is to wrap each transformed element: call push() before and pop() after, so the transform applies only within that block.

Examples

push(); translate(width/2, height/2); rotate(frameCount*0.02); rect(-30,-30,60,60); pop(); — rotation resets per frame. Without push/pop, the rect rapidly spins out of control.

Assessment

Describe the symptom of a rotate() call inside draw() without push/pop after 5 seconds of running. Write the correct push/pop structure that contains the rotation.