Animating with noise

Lecture slides

https://slides.com/otso_havanto/programming-for-visual-artists-4/embed

Noise

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);
  background(255);
  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) {
    save(`sketch-${frameCount}.png`);
  }
}

Assignment

Pick a 2D primitive from the https://p5js.org/reference/ 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