Sketch structure

A p5.js sketch is structured around three primary functions:

• preload() – Loads external assets like images, fonts, and sounds before the sketch starts.
• setup() – Runs once at the beginning to initialize the canvas and variables.
• draw() – Continuously runs in a loop to update the visuals.

Here’s a basic sketch structure in p5.js:

function preload() {
  // async load resources
}

function setup() {
  // instantiate objects
}

function draw() {
  // main event loop
}

// interactive functions mouse / keyboard / touch

// custom functions

Preload

When working with assets (images, sounds, fonts), they must be loaded in the preload() function. This ensures they are fully available before rendering starts.

Here’s an example that loads an image and uses it as the background:

let pola;

function preload() {
  // Load the image asset
  pola = loadImage('pola.jpg');
}

function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(pola);
  // Draw Circle 1
  fill(0, 255, 0);
  circle(100, 200, 80);
  // Draw Circle 2
  fill(0, 0, 255);
  circle(200, 200, 80);
  // Circle 3, dynamically placed
  fill(255, 0, 0, 125); // Alpha channel sets transparency
  circle(mouseX, mouseY, 80);
}

Setup

The setup() function runs once at the start of the program. It is used to:

• Define the canvas size with createCanvas(width, height).
• Initialize variables and objects for the sketch.

Example:

function setup() {
  createCanvas(400, 400);
  background(220); // Light gray background
}

This creates a 400x400 canvas with a light gray background.

Draw

The draw() function is the core of animation and interaction in p5.js. Unlike setup(), which runs once, draw() runs continuously, executing frame by frame. By default, this happens 60 times per second unless modified with frameRate().

Continuous Drawing

By default, visuals in draw() accumulate, meaning previous frames are not erased. This creates a layering effect, where each frame builds on the last. The example below shows this behavior, where a red circle follows the mouse, leaving a trailing effect.

function setup() {  
  createCanvas(300, 300);  
}  

function draw() {  
  fill(0, 255, 0);  
  circle(100, 200, 80);  
  fill(0, 0, 255);  
  circle(200, 200, 80);  
  fill(255, 0, 0, 25);  
  circle(mouseX, mouseY, 80);  
}  

Smooth Refresh

To avoid visuals stacking up, the background() function clears the canvas at the start of each frame, ensuring only the latest frame is displayed.

function setup() {  
  createCanvas(300, 300);  
}  

function draw() {  
  background(70);  
  fill(0, 255, 0);  
  circle(100, 200, 80);  
  fill(0, 0, 255);  
  circle(200, 200, 80);  
  fill(255, 0, 0, 125);  
  circle(mouseX, mouseY, 80);  
}  

Custom Functions

To keep code organized, you can define custom functions:

function drawCircle(x, y, size, color) {
  push();
  fill(color);
  circle(x, y, size);
  pop();
}

This helps structure the sketch better, making it modular and reusable.

Further Reading

📌 p5.js Reference: Sketch Structure – Learn more about preload(), setup(), and draw().