​

const density = " .:-=+*#%@",

  res = 4;

​

function setup() {

  noCanvas();

  // frameRate(30 / res);

​

  video = createCapture(VIDEO);

  renderDiv = createDiv();

  video.size(64 * res, 48 * res);

​

  renderDiv.elt.style.fontSize = 12 / res + "pt";

  renderDiv.elt.style.lineHeight = 10 / res + "pt";

}

​

let i = 0;

​

function draw() {

  if (res > 4 && i++ > 2) {

    noLoop();

    i = 0;

  }

​

  video.loadPixels();

  let draw = "";

​

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

    for (let x = video.width - 1; x >= 0; x--) {

      const i = (y * video.width + x) * 4,

        r = video.pixels[i],

        g = video.pixels[i + 1],

        b = video.pixels[i + 2],

        light = brightness(color(r, g, b)),

        charIndex = floor(map(light, 0, 255, 0, density.length));

​

      draw += density[charIndex];

    }

    draw += "<br>";

  }

​

  renderDiv.html(draw.replace(/\s/g, " "));

}

​

function mousePressed() {

  loop();

}

​