* Creative Coding Workshop #2 Demo - Grid of Rectangles with Diagonal Colorful Gradient

 *

 * 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 number of rows and cols

  let rows = 20;

  let cols = 20;

  // calculate width and height of each tile

  let tileWidth = width/cols;

  let tileHeight = height/rows;

  // for each row

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

    // for each column

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

      // calculate fill color based on both row and column number

      fill(map(cos(r/rows*TWO_PI+c/cols*TWO_PI/3),-1,1,0,255),

           map(cos(r/rows*TWO_PI/2),-1,1,0,255),

           map(cos(r/rows*TWO_PI/3),-1,1,0,255));

      // this allows rectangles to be drawn by specifying center coordinate

      rectMode(CENTER);

      rect(tileWidth*c+tileWidth/2,

            tileHeight*r+tileHeight/2,

            tileWidth,

            tileHeight);

    }

  }

}