Creative Coding#

Recap#

• p5.js’s canvas, setup()/draw(), and a handful of shape functions — the whole starting vocabulary
• variables and simple interactivity: mouse position and time driving what gets drawn
• art-proficient half: this is your on-ramp, go slow and lean on what you already know about composition and colour
• programming-proficient half: today is about scouting what p5.js gives you for free, alongside mentoring your pair

Set up a canvas, draw a shape#

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(220);
  ellipse(300, 200, 80, 80);
}

setup() runs once and builds the canvas. draw() runs every frame — put at least one shape inside it.

Drive it off the mouse or the clock#

function draw() {
  background(220);
  let size = map(mouseX, 0, width, 20, 200);
  fill(millis() % 255, 100, 200);
  ellipse(300, 200, size, size);
}

Position, size, or colour — pick one and drive it off mouseX or millis() instead of a fixed number.

When something breaks#

Ask your pair to point at the problem and explain it, then type the fix yourself. The explaining is the point, not the fixing.

Scouting further: an array, driven by vectors#

let particles = [];

function draw() {
  background(20);
  for (let p of particles) {
    p.pos.add(p.vel);
    circle(p.pos.x, p.pos.y, 10);
  }
}

Push past one shape into an array of objects animated inside the draw loop, each moving under its own p5.Vector rather than separate x/y maths.

Organic motion with noise()#

function draw() {
  background(20);
  let n = noise(frameCount * 0.01);
  let x = map(n, 0, 1, 0, width);
  circle(x, 200, 20);
}

Swap plain randomness for noise() and motion stops jittering — it drifts, the way organic movement does.

A first step into 3D#

function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw() {
  background(20);
  rotateY(frameCount * 0.01);
  box(100);
}

The WEBGL renderer swaps in for the default one — same setup()/draw() loop, now with depth.