linkImage and video processing

linkConversión de la imagen a ascii art

Es un medio artístico que utiliza recursos computarizados fundamentados en los caracteres de definidos por el ASCII es un conjunto de 95 caracteres basado en el alfabeto latino.

linkPlanteamiento del problema

Crear una imagen compuesta únicamente por caracteres ASCII que simule la imagen original.

linkAntecedentes

En 1898 Flora F.F. Stacey se sentó frente a su máquina de escribir. No para escribir una página normal, sino para crear una pequeña obra de arte que es considerado como uno de los primeros ejemplos del ASCII Art.

Aquella práctica renació en los años 1960, y lo hizo más por razones prácticas que artísticas. Las primeras impresoras no eran capaces de imprimir gráficos, así que los usuarios se las ingeniaron para crear imágenes impresas a base de caracteres de texto. Aquello se convirtió en una disciplina por mérito propio, y hoy en día, aunque algo más en segundo plano, el ASCII Art sigue muy vivo.

linkDe la máquina de escribir a las BBSes

Entre los pioneros de este campo estuvo Kenneth C. Knowlton, que trabajó en Bell Labs y creó algunos de los primeros ejemplos "clásicos" de este arte. Lo hizo, eso sí, con una variante algo distinta, el llamado EBCDIC, creado con una codificación de caracteres algo distinta y que se usaba por ejemplo en los mainframes de IBM.

La proliferación a finales de los años 1970 y principios de los 1980 de las BBSes acabó por convertir este tipo de imágenes en una práctica habitual por parte de muchos usuarios. Enviar imágenes era inviable con las limitaciones de los ordenadores y las líneas de conexión de la época, así que convertirlas en ASCII Art se convirtió en la norma no escrita.

Aunque en la década previa al computador personal de escritorio, algunos artistas lo utilizaban de manera experimental y como medio alternativo de arte gráfico, utilizando tarjetas perforadas de 80 y 96 columnas, así como diversos programas compiladores o utilitarios (COBOL, RPG, IBM DITTO), combinado a impresoras de matriciales de alta velocidad para fines de presentación.

Aquella práctica se hizo vital para todos esos escenarios en los que la transmisión de imágenes no era posible, e incluía por ejemplo a las citadas máquinas de escribir, pero también a terminales de ordenador en modo texto o las citadas BBSes.

Su mayor aplicación se concentra en la operación de equipos computarizados y de comunicación para representar caracteres de texto o identificar dispositivos de control computarizado que trabajan exclusivamente con texto y no tienen capacidad de procesamiento de imágenes.

El arte ASCII ha servido como lenguaje fuente para representar logos de compañías y productos, para crear diagramas procedimentales de flujo de operaciones y también en el diseño de los primeros videojuegos. Programas editores de texto especializados tal como IMG2TXT o JPG2TXT, están diseñados para dibujar figuras geométricas y rellenar áreas de luz y sombra con una combinación de caracteres basándose en algoritmos matemáticos.

Desde el punto de vista de evolución de la gráfica computarizada, el Arte ASCII replantea la observación tradicional de una imagen en base al conjunto de elementos pictóricos que la conforman, un efecto óptico similar al del puntillismo.

linkCodigo & resultados

linkConversión de imagen a texto

Un método consiste en muestrear la imagen en escala de grises con una precisión de menos de 8 bits y luego asignar un carácter para cada valor.
Estos generadores de arte ASCII a menudo permiten a los usuarios elegir la intensidad y el contraste de la imagen generada.

Tres factores limitan la fidelidad de la conversión, especialmente de fotografías:

linkLibreria p5.quadrille.js

En geometría, el mosaico cuadrado o la cuadrícula cuadrada es un mosaico regular del plano euclidiano. John Horton Conway lo llamó cuadrilla.

El ángulo interno del cuadrado es π/2, por lo que cuatro cuadrados en un punto forman un ángulo completo de 2π. Es uno de los tres mosaicos regulares del plano. Los otros dos son el Teselado triangular y Teselado hexagonal .

La biblioteca comprende una Quadrille class y proporciona las funciones createQuadrille y drawQuadrille p5. La Quadrille class implementa la transformación geométrica y los operadores lógicos constructivos de geometría sólida. También implementa varios métodos de administración de memoria, como borrar , clonar , llenar , insertar y reemplazar. Se puede utilizar como una interfaz para convertir hacia/desde otras representaciones como matrices , imágenes y bitboards.

createQuadrille()

Crea un quadrille que puede llenarse con cualquier combinación de ceros (para celdas vacías), en este caso integrariamos una imagen de instancia p5.Image

1link

2linkquadrille = createQuadrille(20 * scl, img);

3link

drawQuadrille()

Y la uncion que dibuja a quadrille

1link

2linkdrawQuadrille(quadrille, 0, 0, 40 / scl, 1.6 / scl, color(255));

3link

Por lo tanto obtenemos la siguiente imagen.

linkUso de los distintos caracteres ASCII

Una vez obtenido la division de pixeles procedemos a realizar la caracterizacion de

Se presenta una grafica que representa el equilibrio de los pixeles y la densidad de los mismos

Aunque existe un mapa de caracteres estándares para imágenes en escala de grises, negro -> blanco.

linkFunción que convierte el pixel a un ASCII definido

Por lo tanto, de acuerdo a lo anterior se definio una lista de 67 caracteres que definirar el tono de gris para el ASCII art

1link var chars = ["$", "@", "B", "%", "8", "&", "W", "M", "#", "*", 

2link             "o", "a", "h", "k", "b", "d", "p", "q", "w","m",

3link             "Z", "O", "0", "Q", "L", "C", "J", "U", "Y", "X", 

4link             "z", "c", "v", "u", "n", "x", "r", "j", "f", "t", 

5link             "/", "|", "(", ")", "1", "{", "}", "[", "]", "?",

6link             "-", "_", "+", "~", "<", ">", "i", "!", "l", "I", 

7link             ";", ":", ",", "^", "`", "'", "." ];

La funcion que convierte los pixeles en un caracter se encuentra definida de la sigiente manera

1link  for( let i =0; i < quadrille.height; i++)

2link    {

3link      for( let j =0; j < quadrille.width; j++){

4link        let value = (quadrille.read(i, j)[0] + quadrille.read(i, j)[1] + quadrille.read(i, j)[2]) / 3;

5link        value = Math.floor(value / 4);    

6link        quadrille.fill(i, j, chars[value]);

7link      }

8link    }

En donde se convierte usando la media aritmética la imagen a escala de grises, y luego se divide por 4 para que pueda ser reemplazado por un caracter del arreglo previamente definido.

linkResultados

El codigo completo se ve representado de la siguiente manera

1linkvar quadrille;

2linkvar img;

3linkvar chars = ["$", "@", "B", "%", "8", "&", "W", "M", "#", "*", 

4link             "o", "a", "h", "k", "b", "d", "p", "q", "w","m",

5link             "Z", "O", "0", "Q", "L", "C", "J", "U", "Y", "X", 

6link             "z", "c", "v", "u", "n", "x", "r", "j", "f", "t", 

7link             "/", "|", "(", ")", "1", "{", "}", "[", "]", "?",

8link             "-", "_", "+", "~", "<", ">", "i", "!", "l", "I", 

9link             ";", ":", ",", "^", "`", "'", "." ];

10link

11linkfunction preload() {

12link  img = loadImage('/vc/docs/sketches/assets/cat.jpg');

13link}

14link

15linkfunction setup() {

16link  createCanvas(770, 550);

17link}

18link

19linkfunction draw() {

20link  image(img, 0, height / 2, img.width /2, img.height / 2);

21link

22link  if (frameCount % 200 === 0) {

23link    let scl = 5;

24link    quadrille = createQuadrille(20 * scl, img);

25link

26link    for( let i =0; i < quadrille.height; i++)

27link    {

28link      for( let j =0; j < quadrille.width; j++){

29link        let value = (quadrille.read(i, j)[0] + quadrille.read(i, j)[1] + quadrille.read(i, j)[2]) / 3;

30link        value = Math.floor(value / 4);    

31link        quadrille.fill(i, j, chars[value]);

32link      }

33link    }

34link    drawQuadrille(quadrille, 0, 0, 40 / scl, 1.6 / scl, color(255));

35link  }

36link}

linkConclusiones & trabajo futuro

Bibliografia