p5.js · 1 / 6

Dashboard
Creative coding · p5.js

Setup, draw & resize

A p5.js sketch usually defines setup() once (create the canvas) and draw() every frame. Pair that with windowResized() so fullscreen demos behave when the phone rotates or the iframe grows.

Demos fill the iframe — interact inside Demo B after switching tabs.

// Minimal sketch (global mode)
function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(26, 21, 18);
  circle(width * 0.5, height * 0.5, 48);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
Why global mode?

Academy lessons use global mode for readability. Larger apps often switch to instance mode to host multiple sketches.

Next

Primitives — explicit coordinates vs transforms.