​

function setup() {

  createCanvas(windowWidth, windowHeight);

  pixelDensity(1);

  mCamera = createCapture(VIDEO);

  mCamera.hide();

  rectMode(CENTER);

}

​

function draw() {

  background(0);

  stroke(0);

  randomSeed(1010);

​

  // get a copy of the camera image

  let mImage = mCamera.get();

  mImage.loadPixels();

​

  // circle radius and diameter

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

  let mDim = 2 * mRadius;

​

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

    for (let x = mRadius; x < 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);

    }

  }

}

​