* Creative Coding Workshop #3 Demo - Grid of Rectangles - Rotations Animated with Noise

 *

 * Jack B. Du (github@jackbdu.com)

 */

​

function setup() {

  // create a 400px by 400px canvas

  createCanvas(400, 400);

}

​

function draw() {

  // specify a background for each frame

  background(220);

  // specify the number of cols and rows

  let cols = 20;

  let rows = 20;

  // calculate the width and height of each tile

  let tileWidth = width / cols;

  let tileHeight = height / rows;

  // loop through each row

  for (let r = 0; r < rows; r++) {

    // loop through each column

    for (let c = 0; c < cols; c++) {

      // set fill color based on noise, animated through noise space

      fill(map(noise(c/10,r/10,frameCount/50),0,1,0,255));

      // let rectangles to be specified with center position

      rectMode(CENTER);

      // save current settings (to be reloaded later)

      push();

      // translate origin to current tile center

      translate((c+0.5) * tileWidth,

                (r+0.5) * tileHeight);

      // use DEGREES to represent angles

      angleMode(DEGREES);

      // set rotation based on noise

      rotate(360*noise(c/10,r/10,frameCount/50));

      // draw a rectangle at each translated origin, dimensions based on noise

      rect(0,

           0,

           tileWidth*noise(c/10,r/10,frameCount/50),

           tileHeight*noise(c/10,r/10,frameCount/50));

      // reload settings

      pop();

    }

  }

}