* Creative Coding Workshop #5 Demo - Pixelated Image - Circular Pixels - High Pixel Density

 *

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

 */

​

let graphics;

let rows = 50;

let cols = 50;

let tileWidth;

let tileHeight;

let pd;

​

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

function preload() {

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

}

​

function setup() {

  createCanvas(400, 400);

  tileWidth = width/cols;

  tileHeight = height/rows;

  pd = pixelDensity();

}

​

function draw() {

  // draw graphics to fit entire canvas

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

  // load all canvas pixels into pixels array

  loadPixels();

  // draw background after loading pixels to cover image

  background(0);

  // for each row

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

    // for each col within the row

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

      // calculate center coordinate for each tile

      let x = floor(tileWidth*(col+0.5));

      let y = floor(tileHeight*(row+0.5));

      // calculate these values by incorporating pixel density

      let calculatedWidth = width * pd;

      let calculatedY = y * pd;

      let calculatedX = x * pd;

      // calculate pixel starting index for tile center pixel

      let index = (calculatedY * calculatedWidth + calculatedX) * 4;

      let r = pixels[index];

      let g = pixels[index+1];

      let b = pixels[index+2];

      let a = pixels[index+3];

​

      // define a color based on retrieved color values

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

      noStroke();

      // set fill color to picked color

      fill(c);

      // draw each tile with center pixel color

      rectMode(CENTER);

      rect(x,y,tileWidth,tileHeight);

    }

  }  

​

}