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

En la implementación realizada basada en el . codigo de shadowrtoy del shader se particiona la imagen en bloques de 8x8 pixeles y se procede a hacer el cálculo del LUMA para cada uno de ellos. Posteriormente, teniendo el cuanta el LUMA obtenido en cada bloque se determina que caracter ASCII se debe usar de acuerdo a la codificación realizada previamente de algunos caracteres ASCII. Posterior mente, el shader hace un barrido bloque a bloque y de acuerdo si es un bloque con brillo 1 es reemplazado por el caracter asignado, si el brillo de este bloque es 0, se deja el espacio.

A medida que el sombreador itera píxel por píxel, enviamos la coordenada (x, y), el bloque y el número que codifica el carácter del bloque a una función que comprueba si la posición del píxel está codificada como 1 en el número de carácter y devuelve el valor correspondiente para que la textura esperada se cree píxel a píxel en el vector gl_FragColor. El resultado del sombreador de fragmentos se usa luego como una textura de un plano 2D, generando así el resultado deseado.

Si bien, esta herramienta de mapeo de los caracteres facilita el proceso de la implementación del Ascii Art, limita el uso de caracteres a los que sean representables en la matriz de 5 x 5, es decir que caracteres de otros lenguajes que utilicen caracteres curvos o figuras abstractas no podrían ser utilizados en esta implementación.

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

linkResultados

Ascii art hardware
1linklet aShader;

2link

3link

4link//Precarga el shader y el video

5linkfunction preload() {

6link  video = createVideo(['/vc/docs/sketches/assets/oso.mp4']);

7link    aShader = loadShader('/vc/docs/sketches/scripts/hardware/textureAscii.vert', '/vc/docs/sketches/scripts/hardware/textureAscii.frag');

8link  asciiShader = loadShader('/vc/docs/sketches/ascii.vert', '/vc/docs/sketches/ascii.frag');

9link  video.hide();

10link}

11link

12linkfunction setup() {

13link  // shaders require WEBGL mode to work

14link  createCanvas(768, 520, WEBGL);

15link  noStroke();

16link  video.loop();

17link

18link}

19link

20linkfunction draw() {

21link  // shader() Activación del Shader con nuestro Shader

22link  shader(aShader);

23link  // Se pasa el video como textura

24link  aShader.setUniform('tex', video);

25link  // rect gives us some geometry on the screen

26link rect(0, 0, width, height);

27link}

28link

ascii.vert
1link#ifdef GL_ES

2linkprecision mediump float;

3link#endif

4link

5linkattribute vec3 aPosition;

6linkattribute vec2 aTexCoord;

7link

8linkvarying vec2 vTexCoord;

9link

10linkvoid main() {

11link  vTexCoord = aTexCoord;

12link

13link  vec4 positionVec4 = vec4(aPosition, 1.0);

14link  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;

15link

16link  gl_Position = positionVec4;

17link}

ascii.frag
1link#ifdef GL_ES

2linkprecision mediump float;

3link#endif

4link

5linkuniform sampler2D tex;

6link

7linkint getBit(int n, int a) {

8link  float value = float(n);

9link  for(float i = 27.0; i >= 0.0; i -= 1.0) {

10link    float val = pow(2.0,i*1.0);

11link

12link    if (val <= value) {

13link      value -= val;

14link      if(i == float(a)) return 1;

15link    }

16link  }

17link  return 0;

18link}

19link

20linkfloat character(int n, vec2 p)

21link{

22link    p = floor(p*vec2(4.0, -4.0) + 2.5);

23link    if (clamp(p.x, 0.0, 4.0) == p.x)

24link    {

25link        if (clamp(p.y, 0.0, 4.0) == p.y)    

26link        {

27link            int a = int(floor(p.x+0.5) + 5.0 * floor(p.y+0.5));

28link            if (getBit(n,a) == 1) return 1.0;

29link        }    

30link    }

31link    return 0.0;

32link}

33link

34linkvoid main() {

35link  vec2 pix = gl_FragCoord.xy;

36link  pix.y = 393.0*2.0 - pix.y;

37link  vec2 resol = vec2(393.0*2.0, 393.0*2.0);

38link    vec3 col = texture2D(tex, floor(pix/8.0)*8.0/resol).rgb;    

39link

40link    float gray = 0.3 * col.r + 0.59 * col.g + 0.11 * col.b;

41link

42link    int n =  4096;                // .

43link    if (gray > 0.2) n = 65600;    // :

44link    if (gray > 0.3) n = 332772;   // *

45link    if (gray > 0.4) n = 15255086; // o 

46link    if (gray > 0.5) n = 23385164; // &

47link    if (gray > 0.6) n = 15252014; // 8

48link    if (gray > 0.7) n = 13199452; // @

49link    if (gray > 0.8) n = 11512810; // #

50link

51link    vec2 p = mod(pix/4.0, 2.0) - vec2(1.0);

52link

53link    col = vec3(character(n, p));

54link

55link    gl_FragColor = vec4(col, 1.0);

56link}

linkConclusiones & trabajo futuro

Bibliografia