Animating with noise

Lecture slides


Note that the video is from previous year and the structure is a bit outdated for this years course

Noise ribbon example

let noiseX = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  stroke(0, 10);

function draw() {
  let x1 = noise(noiseX) * width;
  let y1 = noise(noiseX + 100) * height;
  let x2 = noise(noiseX + 200) * width;
  let y2 = noise(noiseX + 300) * height;
  line(x1, y1, x2, y2);
  noiseX += 0.001;

Save frame

You can add the following snippet to your sketch to save the current frame by pressing the letter 'p'.

function keyPressed() {
  // Save frame if letter 'p' is pressed
  if (keyCode === 80) {


Pick a 2D primitive from the or use a bezier curve. Animate the shape by generating coordinates with the noise function.

If you want, use a slightly transparent color for stroke and study the visual traits of the trails left by the moving elements.

More resources