​

let video;

​

//video for menger sponge was created by saving output

//of a Menger Sponge project I did by following the Coding Train

//the individual frames were composed together

//to form a single video clip

let videoName = "Menger";

​

let w;

let h;

function setup() {

  createCanvas(600, 600);

  frameRate(60);

​

  video = createVideo(videoName + ".mp4");

  video.size(60, 80);

  video.hide();

  video.autoplay(true);

  video.loop();

​

  w = width / video.width;

  h = height / video.height;

}

​

a = 0;

function draw() {

  background(0);

​

  //code for converting a video source

  //to ascii art was learned and adapted

  //from Coding Train's video on Ascii Art

  video.loadPixels();

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

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

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

      let r = video.pixels[pixelIndex + 0];

      let g = video.pixels[pixelIndex + 1];

      let b = video.pixels[pixelIndex + 2];

​

      //using the formula for luminosity

      //or apparent brightness obtained from wikipedia

      let apparentBrightness = 0.2126 * r + 0.7152 * g + 0.0722 * b;

      //since the max value of apparent brightness

      //depends on source image

      //i use the map function to extend its range

      //to make the image brighter

      stroke(0, map(apparentBrightness, 0, 130, 0, 255) , 0);

      fill(0, map(apparentBrightness, 0, 130, 0, 255) , 0);

      //finding the right character based on brightness of pixel

      let len = charArray.length;

      let charIndex;

​

      //playing with map values for the building up effect

      charIndex = floor(map(apparentBrightness, 0, 100, len, 0));

​

      textSize(w);

      textAlign(CENTER, CENTER);

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

    }

  }

}

​

​

​

function mousePressed() {

  //some browsers do not allow autoplay

  //so mousebutton can be pressed to manually play

    video.play();

​

}

​