* Creative Coding Workshop #3 Demo - Grid of Rectangles - Dimensions 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));

      // draw a rectangle at each tile location, dimensions based on noise

      rect(c * tileWidth,

           r * tileHeight,

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

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

    }

  }

}