let rectHeight = 100;

let yLoc0, yLoc1;

​

function setup() {

  createCanvas(640, 640);

  yLoc0 = height * 0.25;

  yLoc1 = height * 0.75;

  rectMode(CENTER);

}

​

function draw() {

  background(255);

​

  for (let i = rectWidth / 2; i < width; i += rectWidth) {

    // two parameters into noise to get two dimensional

    // noise takes sequential values

    // use frame count for the first parameter and scale it down

    // use i for the second parameter, since it is individual for each rectangle

    // also scale it down

    let noiseValue = noise(frameCount * 0.01, i * 0.001);

​

    // then change the range from 0 to 1 into -0.5 to 0.5

    // then multiply that by 100 to get values that are between -50 and 50

    let scaledNoise = (noiseValue - 0.5) * 100;

​

    // add that to our rect's y location

    rect(i, yLoc0 + scaledNoise, rectWidth, rectHeight);

  }

​

  for (let i = rectWidth / 2; i < width; i += rectWidth) {

    // using the exact same noise value

    let noiseValue = noise(frameCount * 0.01, i * 0.001);

​

    // this time scaling it to be between 0 & TWO_PI

    let angle = noiseValue * TWO_PI;

​

    // rotate needs to happen around 0,0

    // so use push to save our original coord system

    push();

    // then set 0,0 to now be at the center of each rect

    translate(i, yLoc1);

    // use the angle to rotate

    rotate(angle);

    // draw the rect at 0,0

    rect(0, 0, rectWidth, rectHeight);

    // go back to the original coord system before doing it all again

    // (translate and rotate are cumlative)

    pop();

  }

}

​