//https://www.youtube.com/watch?v=rNqaw8LT2ZU&t=544s

//see the afterimage effect using mousePressed

​

var video;

var vScale = 16;

let h, m, s, d, mo, yR;

let myCorners = [50, 55, 60, 65]

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width/vScale, height/vScale);

  pixelDensity(1);

  video.hide();

}

​

function draw() {

  background(64);

//corner blocks

  fill(0);

  noStroke();

  rect(30, 30, 55, myCorners[0]);

  rect(550, 30, 55, myCorners[1]);

  rect(30, 400, 55, myCorners[2]);

  rect(550, 400, 55, myCorners[3]);

  video.loadPixels();

  loadPixels();

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

    for (var x = 0; x < video.width; x++){

//*mirroring the video

      var index = (video.width - x + 1 + (y * video.width))*4;

​

      var r = video.pixels[index+0];

      var g = video.pixels[index+1];

      var b = video.pixels[index+2];

​

//*adjusting brightness of the b&w video      

      var bright = (r+g+b)/3;

      var w = map(bright, 0, 255, 0, vScale);

      noStroke();

      fill(bright);

//* I could use recMode(CENTER); as center but I prefer the way that rectangles are growing from the corner

      rect(x*vScale, y*vScale, w, w);

//metadata display      

      rect(180, 440, 260, 30);

      metadataDisplay(200, 460);

 }

}

//metadata display

function metadataDisplay(txX, txY) {

  h = hour();

  m = minute();

  s = second();

  mo = month();

  d = day();

  yR = year();

​

  push();

  textFont('Helvetica');

  fill(255);

  textSize(16);

  text('Created: ' + mo + "/" + d + "/" + yR + " at " + h + ":" + m + ":" + s, txX, txY);

  pop();

 }

//showing the afterimage effect using mousePressed  

if (mouseIsPressed) {

    blendMode(DIFFERENCE);

  } else {

    blendMode(BLEND);

  }  

}