Make a pixelated 2-tone mirror with createCapture(VIDEO)and 15x15 pixels.

​

Pixels that are > 50% bright are white.

Pixels that are < 50% bright are black.

*/

​

let myVid;

let myscale= 15;

​

let grid=[];

​

let first = true;

​

​

function setup() {

  // createCanvas(windowWidth, windowHeight);

  pixelDensity(1);

  myVid=createCapture(VIDEO);

  myVid.size(635/myscale,485/myscale);

  myVid.hide();

  // set up checkbox grid and fill with zeros

​

  for (let y=0;y<myVid.height;y++)

  {

    const row = document.createElement("div");

   for (let x=0; x<myVid.width; x++)

   {

       const temp = document.createElement("input");

       temp.type="text";

       temp.style.border = "0px";

       temp.style.width = myscale+"px"

       row.appendChild(temp);

       // temp.

       grid.push(temp);

    }

  document.body.appendChild(row);

  }

  // console.log(grid.length);

}

​

function draw() {

  myVid.loadPixels();

  let counter = 0;

  for (let y=0;y<myVid.height;y++)

  {

   for (let x=0; x<myVid.width; x++)

   {

​

    let ri = ((myVid.width-x-1)+(y*myVid.width))*4

    //flipped RGB values

    let r = myVid.pixels[ri+0];

    let g = myVid.pixels[ri+1];

    let b = myVid.pixels[ri+2];

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

     if (bright<63.75)

     {

       grid[counter].value = "@";

     }

     else if (bright < 127.5){

       grid[counter].value = "#";

     }

     else if (bright < 191.25){

       grid[counter].value = "+";

     }

     else{

       grid[counter].value = "";

     }

     counter +=1;

     // fill(tonec);

     // rect(x*myscale,y*myscale,myscale,myscale);

   }

  }

}