const rowsNum = 20;

let colWidth;

let rowHeight;

let cam;

​

function preload() {

}

​

function setup() {

  createCanvas(400, 400);

  cam = createCapture(VIDEO, {flipped: true});

  cam.hide();

  pixelDensity(1);

  rowHeight = height / rowsNum;

  colWidth = width / colsNum;

  noStroke();

}

​

function draw() {

  image(cam, 0, 0, width, height, 0, 0, cam.width, cam.height, COVER);

  loadPixels();

  background('white');

  for (let c = 0; c < colsNum; c++) {

    for (let r = 0; r < rowsNum; r++) {

      const x = floor(map(c, 0, colsNum, 0, width) + colWidth/2);

      const y = floor(map(r, 0, rowsNum, 0, height) + rowHeight/2);

      const index = 4 * (height * y + x);

      const rV = pixels[index];

      const gV = pixels[index + 1];

      const bV = pixels[index + 2];

      const aV = pixels[index + 3];

      fill(rV,gV,bV,aV);

      ellipse(x, y, colWidth, rowHeight);

    }

  }

}