let video;

let asciiDiv;

​

function setup() {

  noCanvas();

  video = createCapture(VIDEO);

  video.size(48,48)

  asciiDiv=createDiv();

}

​

function draw() {

  background(0);

  video.loadPixels();

  let asciiImage= '';

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

    let row = "";

    for (let i = 0; i < video.width; i++) {

      const pixelIndex = (i + j * video.width) * 4; //create variable for the index of the pixel.

      const r = video.pixels[pixelIndex + 0]; //represents the 1st index of a pixel box. ie(red)

      const g = video.pixels[pixelIndex + 1];//represents the 2nd index of a pixel box. ie(green)

      const b = video.pixels[pixelIndex + 2];//represents the 3rd index of a pixel box. ie(blue)  

      //you can add the fourth pixel index which represents the transparency of that specific pixel but in my case, I am ignoring it

​

      const avg = (r + g + b) / 3;

      const len = density.length;

      const charIndex= floor(map(avg,0,255,len,0))

      const c =density.charAt(charIndex)

      if (c==" ") asciiImage+=" ";

      else asciiImage+=c

    }

    asciiImage+='<br/>';

  }

  asciiDiv.html(asciiImage)

}

​