​

function preload() {

  mImage = loadImage("./abaporu_M.jpg");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  pixelDensity(1);

  print("Original size: ", mImage.width, " x ", mImage.height);

​

  if (mImage.width > width) {

    mImage.resize(width, 0);

  }

  if (mImage.height > height) {

    mImage.resize(0, height);

  }

  print("Scaled size: ", mImage.width, " x ", mImage.height);

​

  mImage.loadPixels();

  print("pixel array size: ", mImage.pixels.length);

}

​

function draw() {

  background(0);

  noStroke();

​

  // circle radius and diameter

  let mRadius = floor(map(mouseY, 0, height, 2, 32, true));

  let mDim = 2 * mRadius;

​

  for (let y = mRadius; y < mImage.height - mRadius; y += mDim) {

    for (let x = mRadius; x < mImage.width - mRadius; x += mDim) {

      // 😱 this is how to go from x,y to pixel array index 😱

      let pIndex = 4 * (y * mImage.width + x);

​

      let redValue = mImage.pixels[pIndex + 0];

      let greenValue = mImage.pixels[pIndex + 1];

      let blueValue = mImage.pixels[pIndex + 2];

​

      fill(redValue, greenValue, blueValue);

      ellipse(x, y, 1.75 * mRadius, 1.75 * mRadius);

    }

  }

}

​