State machine

A state machine is a computational model that transitions between different states based on certain rules. In p5.js, you can think of styles (such as colors, strokes, and transformations) as states.

p5.js provides two essential functions—push() and pop()—to save and restore drawing styles and transformations, allowing you to manage complex visuals efficiently.

Stack of Styles

The push() function saves the current drawing style and transformations onto a stack.
The pop() function restores the most recently saved state.

This is useful when applying different styles to separate elements without affecting others.

In the following example, three circles are drawn with different styles:

• The first circle is filled with green.
• The second circle is filled with blue and has a red stroke.
• The third circle returns to the original style after pop().

function setup() {  
  createCanvas(300, 300);  
  // Circle 1  
  fill(0, 255, 0);  
  circle(100, 200, 80);  
  // Save the current state  
  push();  
  // Modify drawing style (fill, stroke, and strokeWeight) and draw Circle 2  
  fill(0, 0, 255);  
  stroke(255, 0, 0);  
  strokeWeight(5);  
  circle(200, 200, 80);  
  // Restore the previous state and draw Circle 3  
  pop();  
  circle(200, 100, 80);  
}  

Further Reading

📌 p5.js Reference: push() & pop() – Learn more about how these functions help manage styles and transformations.