Based on an example in Gene Kogan's p5.js Perlin Noise tutorial:

https://genekogan.com/code/p5js-perlin-noise/

*/

​

​

let x1, x2, x3, x4;

let y1, y2, y3, y4;

let t = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0)

  stroke(255, 18);

  noFill();

}

​

function draw() {

  x1 = width * noise(t + 15);

  x2 = width * noise(t + 25);

  x3 = width * noise(t + 35);

  x4 = width * noise(t + 45);

  y1 = height * noise(t + 55);

  y2 = height * noise(t + 65);

  y3 = height * noise(t + 75);

  y4 = height * noise(t + 85);

  // How is this version different?

  // x1 = map(random(), 0, 1, 0, width);

  // x2 = map(random(), 0, 1, 0, width);

  // x3 = map(random(), 0, 1, 0, width);

  // x4 = map(random(), 0, 1, 0, width);

  // y1 = map(random(), 0, 1, 0, height);

  // y2 = map(random(), 0, 1, 0, height);

  // y3 = map(random(), 0, 1, 0, height);

  // y4 = map(random(), 0, 1, 0, height);

  bezier(x1, y1, x2, y2, x3, y3, x4, y4);

​

  t += 0.005;

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  background(0);

}