​

function preload() {

  portrait = loadImage("https://user-images.githubusercontent.com/11095038/70134267-bdf00b00-16ad-11ea-89e1-87fef8d84adc.jpeg");

}

​

function setup() {

  createCanvas(portrait.width, portrait.height);

  pixelDensity(1);

  noLoop();

}

​

function draw() {

  portrait.loadPixels();

  for (var x = 0; x < portrait.width; x += 4) {

    for (var y = 0; y < portrait.height; y += 4) {

      var index = getIndex(x, y, portrait.width);

      var colorValue = getColor(index, portrait.pixels);

      var grayValue = (colorValue.r + colorValue.g + colorValue.b)/3;

      fill(grayValue);

      noStroke();

      ellipse(x, y, grayValue/255 * 4);

    }

  }

  portrait.updatePixels();

}

​

function getIndex(x, y, width) {

  return (y * width + x) * 4;

}

​

function getColor(index, pixelsArray) {

  return { r: pixelsArray[index + 0],

           g: pixelsArray[index + 1],

           b: pixelsArray[index + 2],

           a: pixelsArray[index + 3]

         };

}