Start: Intro

Learn p5 basics with simple shapes and frame-based animation.

Example 1: Shapes + Motion

Code

let t = 0;

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

function draw() {
  background(250, 244, 248);
  fill(255, 50, 140);
  ellipse(200 + sin(t) * 120, 200, 70, 70);

  fill(25, 25, 35);
  rect(120, 290 + sin(t * 2) * 18, 160, 24, 12);

  fill(20);
  textAlign(CENTER);
  text('p5.js workshops', 200, 40);
  t += 0.03;
}

Try this: Change speed and color values to create your own rhythm.

Open sketch in new tab

Example 2: Animated Grid

Code

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

function draw() {
  background(255);
  for (let y = 40; y <= 360; y += 40) {
    for (let x = 40; x <= 360; x += 40) {
      let d = dist(x, y, mouseX, mouseY);
      let s = map(d, 0, 260, 34, 8, true);
      fill(255, 40 + s * 3, 140);
      circle(x, y, s);
    }
  }
}

Try this: Swap sin() with noise() for softer movement.

Open sketch in new tab

Resources