* Creative Coding Workshop #5 - Pixelated Squares Based on the Image

 *

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

 */

​

let graphics;

let cols = 20;

let rows = 20;

let tileWidth;

let tileHeight;

​

// everything in preload() will be loaded before setup() is run

function preload() {

  graphics = loadImage('abstract-fluid.png');

}

​

function setup() {

  // create a canvas with a width of 400 px and a height of 400 px

  createCanvas(400, 400);

  // sets pixel density to 1 for simplicity

  pixelDensity(1);

  // calculate dimensions for each tile

  tileWidth = width/cols;

  tileHeight = height/rows;

}

​

function draw() {

  // set background to light gray on a scale of 0 to 255

  background(220);

  // draws the image to fill entire canvas

  image(graphics, 0, 0, width, height);

  // load the pixels of the entire canvas for reading/writing

  loadPixels();

  for (row = 0; row < rows; row++) {

    for (col = 0; col < cols; col++) {

      // calculate coordinate

      let x = floor(tileWidth*col);

      let y = floor(tileHeight*row);

​

      // caculate the index of the pixel at (x, y)

      // each pixel takes up four values, r, g, b, a

      let index = (y * width + x)*4;

      let r = pixels[index];

      let g = pixels[index+1];

      let b = pixels[index+2];

      let a = pixels[index+3];

​

      // converts values to a color

      let c = color(r, g, b, a);

​

      // draw rectangle at (x, y)

      noStroke();

      fill(c);

      rect(x, y, tileWidth, tileHeight);

    }

  }

}