let pixel = [];

let index;

let vScale = 16;

​

function preload() {

  // img = loadImage("https://cdn.glitch.com/fbc7d3d9-8b4f-485b-9887-61d4fd60d487%2Fboston.JPG?v=1605636387586");

}

​

function setup() {

  createCanvas(640, 480);

  pixelDensity(1);

  cam = createCapture(VIDEO);

  cam.size(width / vScale, height / vScale);

}

​

function draw() {

  background(0);

  cam.loadPixels();

  loadPixels();

  for (let x = 0; x < width; x++) {

    for (let y = 0; y < height; y++) {

      index = ((width - x  + 1) + (y * cam.width)) * 4;

      let r = cam.pixels[index];

      let g = cam.pixels[index + 1];

      let b = cam.pixels[index + 2];

      let bright = (r + g + b) / 3;

      fill(r, g, b);

      let w  = map(bright, 0, 255, 0, vScale);

      noStroke();

      rect(x * vScale, y * vScale, w, w);

    }

  }

  // img.updatePixels();

}

​

​