This code to generate an ASCII representation of a video feed. 

*/

​

// reference - https://www.youtube.com/watch?v=55iwMYv8tGI

​

// An array of characters representing different densities of pixels

const density = "#987654321.";

// const density = "$#321i,..";

​

// perlin testing

// let perlin;

​

// Variables for video and ASCII Output (Div)

let video;

let asciiDiv;

​

function setup() {

  noCanvas();

  // Create a video element with ".mp4" / ".mov" as the source

  video = createVideo("eye.mp4");

​

  // video capture

  // video = createCapture(VIDEO);

  // Size of the video

  video.size(80, 40);

  //html div element to display ASCII art

  asciiDiv = createDiv();

  video.loop();

  //hide dom element

  video.hide();

  frameRate(7);

}

function draw() {

  // perlin testing

  // background(0);

  // image(perlin,0,0,width,height)

​

  // let w = width / perlin.width;

  // let h = height / perlin.height;

  //new* question

​

  // perlin.loadPixels();

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

  //   let row = "";

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

  //     //question

  //     const pixelIndex = (i + j * perlin.width) * 4;

  //     const r = perlin.pixels[pixelIndex + 0];

  //     const g = perlin.pixels[pixelIndex + 1];

  //     const b = perlin.pixels[pixelIndex + 2];

​

  // Load the pixels of the video frame.

  video.loadPixels();

  let asciiImage = "";

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

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

      // Calculate the pixel index in the video pixels array

      const pixelIndex = (i + j * video.width) * 4;

      const r = video.pixels[pixelIndex + 0]; // Red value of the pixel

      const g = video.pixels[pixelIndex + 1]; // Green value of the pixel

      const b = video.pixels[pixelIndex + 2]; // Blue value of the pixel

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

​

      // perlin testing

      // noStroke();

      // fill(255);

      // square(i*w, j*h, w)

      // make the font the size of the square

​

      // Map the average brightness to the density array

      const len = density.length;

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

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

      const c = density.charAt(charIndex);

      // If character is empty, add a non-breaking space "&nbsp"

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

      else asciiImage += c;

​

      // perlin testing

      // row += density.charAt(charIndex);

      // textSize(w);

      // textAlign(CENTER, CENTER);

      // text(density.charAt(charIndex), i * w + w * 0.5, j * h + h * 0.5);

    }

    asciiImage += "<br/>";

​

    // perlin testing

    // createDiv(row)

    // console.log(row);

  }

​

  // Update the HTML content of the ASCII div

  asciiDiv.html(asciiImage);

}

​