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

​

// An array of characters representing different densities of pixels (10 in total)

const density = "%^&$#765432*,.";

​

// Variables for video and ASCII Output (Div)

let video;

let asciiDiv;

// Variable to store the current index

let densityIndex = 0;

​

function setup() {

  noCanvas();

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

  video = createVideo("DINNING.mov");

  // Size of the video

  video.size(80, 40);

  //html div element to display ASCII art

  asciiDiv = createDiv();

  video.loop();

  video.hide();

  frameRate(7);

}

​

function draw() {

  // 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

​

      // Map the average brightness to the density array

      const len = density.length;

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

      // Adjust the density index based on key pressed

      const c = density.charAt((charIndex + densityIndex) % len);

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

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

      else asciiImage += c;

    }

    asciiImage += "<br/>";

  }

  // Update the HTML content of the ASCII div

  asciiDiv.html(asciiImage);

}

​

function keyPressed() {

  // Increase density index when the 'numbers 0-9' key is pressed

  if (keyCode === 57) {

    densityIndex = 9;

  } else if (keyCode === 56) {

    densityIndex = 0;

  } else if (keyCode === 55) {

    densityIndex = 8;

  } else if (keyCode === 54) {

    densityIndex = 1;

  } else if (keyCode === 53) {

    densityIndex = 7;

  } else if (keyCode === 52) {

    densityIndex = 2;

  } else if (keyCode === 51) {

    densityIndex = 6;

  } else if (keyCode === 50) {

    densityIndex = 3;

  } else if (keyCode === 49) {

    densityIndex = 4;

  } else if (keyCode === 48) {

    densityIndex = 5;

  }

}

​