ASCII Art from the Webcam

255 200 200

And that value, `218.33333333`, we could use to represent the brightness of that pixel.  Since it's very close to 255, it's a pretty bright color, in fact it looks <span style="background-color: rgba(255, 200, 200, 1)">like the background of this text</span>.

#### Contrasts, brightness and references to a character

Good.  We already know how we can extract the brightness of a pixel, therefore we can extract the brightness of each element of the image (remember an image = many pixels).  Now, how do we turn it into text?

Now the following concept is important.  We could represent any element with two basic colors: white and black, where black is no brightness and white is a lot of brightness.

Thanks to this we can play with contrasts, specifically luminosity contrasts, which is the relative difference between two points (or pixels) in an image using the brightness value as a reference.

If we talk in black and white, everything can be in two tones (either it is white or it is black).  If we now talk about gray scales, contrast can go from none (0% contrast, as when two elements are the same color) to full (100% contrast, as when one element is totally white and the other totally black).

In this way, if we have two characters:

- Character #1: █ (a completely black block)
- Character #2: _ (a blank space)

One could represent a totally black (or no brightness/brightness) pixel and the other could represent a totally white (or full brightness/brightness) pixel.  And if we put them next to each other, we would have complete contrast between the two.

Therefore, what we should try to do is assign a character to each possible numerical value of that brightness value, in order to generate the contrast between the characters and thus represent the contrast of the image.

In fact, [here](https://play.ertdfgcvb.xyz/) I came across a character string that did it quite well and it looks like this:

The first value, `Ñ`, being the one that would represent no brightness and the last value, a blank space, would represent the total or complete brightness.

In that code I also noticed that the author called it "density", which is an interesting name, since we could say that the mission of each character is to use as much space as possible to represent that area.  That is, more density = less shine.

In simpler words and combining the previous section with this one:

> If the average brightness value is 0, we would use the Ñ.
>
> If the average brightness value is 255, we would use the white space.  Any value between 0 and 255 would use a value between the two.

### Ok, ok, lots of talking. How do you eat this?I already said that we are going to use JavaScript, because we can use the [p5.js](https://p5js.org/) library.  This library is:

> a library for creative programming, with a focus on making programming accessible and inclusive for artists, designers, educators, learners and anyone else (...)
>
> (...) you can use HTML5 elements such as text, _input_, **video, webcam** and sound.

The important part is that we have access to use the available video and sound features simply and easily.

We're going to start with a basic HTML page and we're going to include `p5.js`.

#### Step 1: Setting up the project and deploying an image

First, let's configure the project.  For that, we are going to create a folder and go to the `p5.js` page and [download the complete library](https://github.com/processing/p5.js/releases/download/v1.4.1/p5.zip).  Then we pass the files `index.html`, `sketch.js` and `p5.min.js` (the minified version) to our folder:

```bash
mkdir video-to-ascii
cd video-to-ascii
cp ~/Downloads/p5/index.html .
cp ~/Downloads/p5/sketch.js .
cp ~/Downloads/p5/p5.min.js .

let img;
function preload() {
  img = loadImage("./dog.jpg");
}

function setup() {
  createCanvas(800, 533);
}

function draw() {
  background(220);
  image(img, 0, 0, width, height);
}

const density = "Ñ@#W$9876543210?!abc;:+=-,._ ";
let img;

function preload() {
  img = loadImage("./dog copy.jpg");
}

function setup() {
  noCanvas();
  img.loadPixels();

  // Analizamos cada columna
  for (let j = 0; j < img.height; j++) {
    let line = "";

    // Analizamos cada fila de esa columna
    for (let i = 0; i < img.width; i++) {
      // Es importante recalcar que, img.pixels va a regresar un array, mejor
      // descrito en la siguiente dirección:
      // https://p5js.org/reference/#/p5/pixels
      //
      // Donde:
      // 1. La densidad será x4, por eso debemos multiplicar *4
      // 2. Va a regresarse los valores de RGB (en la posición 0, 1 y 2)
      const index = (i + j * img.width) * 4;

      // Valores RGB y A (promedio / brillo / luminosidad)
      const r = img.pixels[index];
      const g = img.pixels[index+ 1];
      const b = img.pixels[index + 2];
      const a = (r + g + b) / 3;

      // Floor: Devuelve el máximo entero menor o igual a un número.
      // El `map` aquí va a hacer:
      // Tomar el valor del brillo (`a`), el cual debe tener un valor entre
      // 0 y 255 (atributo 1 y 2) y lo va a mapear esto a un valor entre la cantidad
      // de valores entre mi densidad y 0.
      const charIndex = floor(map(a, 0, 255, density.length, 0));
      const charToShow = density.split("")[charIndex];

      // no breaking space (espacio vacio)
      // esto es para que quede un cuadrado perfecto, ya que en HTML el espacio
      // vacío se representará como un eso, un espacio vacío.
      line += (charToShow === " " || charToShow === undefined) ? "&nbsp;" : charToShow;
    }

    createDiv(line);
  }
}

html, body {
  background-color: #000;
  color: #fff;
  font-family: 'Fira Code';
  font-size: 1em;
  line-height: 0.8em;
}

canvas {
  display: block;
}

const density = "Ñ@#W$9876543210?!abc;:+=-,._ ";
let video;
let container;

function setup() {
  noCanvas();
  video = createCapture(VIDEO);
  video.size(80, 80);
  container = createDiv();
}

function draw() {
  video.loadPixels();

  // Ahora vamos a tener que desplegar todo como un único contenido
  let art = "";

  // Analizamos cada columna
  for (let j = 0; j < video.height; j++) {

    // Analizamos cada fila de esa columna
    for (let i = 0; i < video.width; i++) {
      // Es importante recalcar que, video.pixels va a regresar un array, mejor
      // descrito en la siguiente dirección:
      // https://p5js.org/reference/#/p5/pixels
      //
      // Donde:
      // 1. La densidad será x4, por eso debemos multiplicar *4
      // 2. Va a regresarse los valores de RGB (en la posición 0, 1 y 2)
      const index = (i + j * video.width) * 4;

      // Valores RGB y A (promedio / brillo / luminosidad)
      const r = video.pixels[index];
      const g = video.pixels[index+ 1];
      const b = video.pixels[index + 2];
      const a = (r + g + b) / 3;

      // Floor: Devuelve el máximo entero menor o igual a un número.
      // El `map` aquí va a hacer:
      // Tomar el valor del brillo (`a`), el cual debe tener un valor entre
      // 0 y 255 (atributo 1 y 2) y lo va a mapear esto a un valor entre la cantidad
      // de valores entre mi densidad y 0.
      const charIndex = floor(map(a, 0, 255, density.length, 0));
      const charToShow = density.split("")[charIndex];

      // no breaking space (espacio vacio)
      // esto es para que quede un cuadrado perfecto, ya que en HTML el espacio
      // vacío se representará como un eso, un espacio vacío.
      art += (charToShow === " " || charToShow === undefined) ? "&nbsp;" : charToShow;
    }

    // Y despues de cada línea, simplemente agregamos un salto de linea
    art += "<br />";
  }

  container.html(art);
}