Aprende a generar una foto de arte ascii en vivo con tu cámara web.

Cómo generar una foto en arte ASCII desde la cámara web con Javascript

Camera ASCII

Camera ASCII utiliza la API getUserMedia de HTML5 para transformar una transmisión de video de su cámara web en una representación ASCII en tiempo real. Puedes usar la biblioteca sin cámara, puedes generar el mismo efecto dibujando una imagen en un lienzo.

La demostración funciona con 2 complementos, camera.js (un contenedor para acceder a la cámara y mostrarla en un lienzo) y ascii.js , la pieza más importante de la demostración. ascii.js es una pequeña biblioteca que convierte una imagen de lienzo en una cadena de arte.

Cómo funciona

La biblioteca devuelve un objeto global llamado ascii, este objeto tiene solo 1 propiedad "fromCanvas". Esta función espera como primer parámetro el canvas que se va a procesar y como segundo parámetro un objeto con las propiedades.

var canvas = document.getElementById("myCanvasId");
ascii.fromCanvas(canvas, {
     callback: function(asciiString) {
        // Hacer algo con la cadena de texto ASCII
     }
});

La biblioteca utilizará los siguientes caracteres en la cadena ascii " .,:; I1tfLCG08 @ ".

var characters = (" .,:;i1tfLCG08@").split("");
var context = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
		
var asciiCharacters = "";

// calcular factor de contraste
// http://www.dfstudios.co.uk/articles/image-processing-algorithms-part-5/
var contrastFactor = (259 * (options.contrast + 255)) / (255 * (259 - options.contrast));

var imageData = context.getImageData(0, 0, canvasWidth, canvasHeight);

Luego, usará un bucle con los datos de píxeles recuperados utilizando la getImageDatafunción del lienzo y de acuerdo con el brillo de cada píxel (el brillo del color se determina mediante la siguiente fórmula: ( (Rojo X 299) + (Vere X 587) + (Azul X 114)) / 1000) se elegirá un carácter de la variable characters para dibujar (adjunto a la asciiCharactersvariable).

Demo

Puedes probar una versión en vivo del plugin aquí.

Ascii camera demo

Ten en cuenta que puede usar css para personalizar y darle efectos curiosos a la imagen. La imagen anterior se ha renderizado usando css: color:blue; al elemento pre.

Puede personalizar para cambiar los caracteres que se están renderizando, por ejemplo:

Ascii color css

La imagen anterior se ha logrado cambiando la línea de caracteres en el archivo ascii.js:

var characters = {
        0:'<span style="background-color: yellow;"> </span>',
        1:".",
        2:",",
        3:":",
        4:";",
        5:"i",
        6:"1",
        7:"t",
        8:"f",
        9:"L",
        10:"C",
        11:"G",
        12:"0",
        13:"8",
        14:'<span style="color: red;">@</span>'
}

Ten en cuenta que el rendimiento disminuirá notablemente si utilizas la cámara en lugar de una imagen en un canvas.

Requisitos

  • Tu navegador debe proporcionar soporte para la  API getUserMedia
  • La conexión https ya que las conexiones inseguras no permiten el acceso a la API

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores