let sizeX = 30;

let sizeY = 60;

let capture;

let sizeSlider;

let shotButton;

let reverseButton;

let facing = "environment"

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  sizeSlider = createSlider(10, 60, 10);

  sizeSlider.id("size-slider");

​

  shotButton = createButton("S");

  shotButton.id("shot-button");

​

  reverseButton = createButton("C", "0");

  reverseButton.id("reverse-button");

​

  updateGrid();

  updateCapture();

}

​

function draw() {

  background(200);

  capture.loadPixels();

  frameRate(15);

​

  sizeSlider.mouseClicked(updateGrid);

  sizeSlider.touchMoved(updateGrid);

  shotButton.mouseClicked(savePhoto);

  reverseButton.mouseClicked(changeCapture);

​

  for (let cell of grid) {

    cell.getColor(capture.pixels);

    cell.show();

  }

}

​

function updateGrid() {

  grid = [];

  sizeX = sizeSlider.value();

  sizeY = Math.round(sizeSlider.value() * 1.9);

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

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

      grid.push(new Cell(i, j, sizeX, sizeY));

    }

  }

}

​

function savePhoto() {

  saveCanvas("hypotetical-camera", "png");

}

​

function updateCapture() {

  capture = createCapture(VIDEO, {

    audio: false,

    video: {

      facingMode: facing,

    },

    flipped: false,

  });

  capture.size(width, height);

  capture.hide();

}

​

function changeCapture() {

  if (reverseButton.value() == "0") {

    facing = "user";

    reverseButton.value("1");

  } else {

    facing = "environment";

    reverseButton.value("0");

  }

​

  updateCapture();

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  capture.size(width, height);

  updateGrid();

}

class Cell {

  constructor(x, y, sizeX, sizeY) {

    this.x = x;

    this.y = y;

    this.sizeX = sizeX;

    this.sizeY = sizeY;

    this.col = color(0, 0, 0);

    this.newCol = color(0, 0, 0);

  }

​

  show() {

    noStroke();

    let b = brightness(this.col);

    let r = map(b, 10, 100, 0, 100);

    let s = map(b, 30, 90, this.sizeX, 0, true);

    let startingRange = 0;

    let endingRange = 100;

    let interval = endingRange / 5;

    let stringArray = ["█","▓","▒","░"," "]

    let string = " ";

​

    if (r >= startingRange && r < interval) {

      string = stringArray[4];

    } else if (r >= interval && r < interval * 2) {

      string = stringArray[3];

    } else if (r >= interval * 2 && r < interval * 3) {

      string = stringArray[2];

    } else if (r >= interval * 3 && r <= endingRange*4) {

      string = stringArray[1];

    } else if (r >= interval * 4 && r <= endingRange) {

      string = stringArray[0];

    }

​

    fill(255,255,0);

    textSize(this.sizeY/1.13);

    textAlign(CENTER,CENTER)

    textFont("Courier New");

    text(string,this.x,this.y)

  }

​

  getColor(array) {

    let r = 0;

    let g = 0;

    let b = 0;

    let a = 0;

    let counter = 0;

​

    for (let i = 0; i < this.sizeX; i++) {

      for (let j = 0; j < this.sizeY; j++) {

        let index = 4 * ((this.y + j) * capture.width + (this.x + i));

​

        r += array[index];

        g += array[index + 1];

        b += array[index + 2];

        a += array[index + 3];

        counter++;

      }

    }

    if(r && g && b && a){

       this.col = color(r / counter, g / counter, b / counter, a / counter);

    } else {

      this.col = color(0,0,0,0)

    }

  }

}

​