ASCII Silhouettify: convierte imágenes en siluetas ASCII

 (meatfighter.com)
3 puntos por GN⁺ 2024-06-08 | 1 comentarios | Compartir por WhatsApp
  • ASCII Silhouettify es una app de navegador y línea de comandos que convierte gráficos planos y de alto contraste, como logos, banners y pixel art, en arte ASCII de silueta relleno únicamente con los 95 caracteres ASCII imprimibles.
  • Acepta como entrada png, svg, jpg, webp, gif, tif, heif, avif y pdf, pero no renderiza sombreados, brillos, sombras ni degradados, por lo que no es adecuada para convertir fotos.
  • La salida admite texto con color ANSI, texto plano, HTML y el formato de arte ASCII personalizado de Neofetch; el formato de Neofetch está limitado a 6 colores de la paleta ANSI extendida de 256 colores.
  • El algoritmo de conversión divide la imagen en planos de color y luego, en cada región de 9×19 píxeles, elige el carácter más grande entre los caracteres ASCII que no invaden el contorno de la silueta.
  • Para mejorar el rendimiento usa un acumulador de 95 bits, 171 bitmasks, cálculo de leading zeros y paralelismo entre procesadores lógicos; para el matching de paleta aplica la fórmula perceptual de diferencia de color CIEDE2000, de alto costo computacional.

App de conversión a siluetas ASCII

  • ASCII Silhouettify es una app que convierte imágenes en siluetas ASCII.
    • Una silueta ASCII es un estilo de arte ASCII donde destacan formas geométricas rellenas de manera uniforme, más que líneas o texturas.
    • Funciona bien con gráficos planos minimalistas, de alto contraste y sin profundidad 3D, como logos, banners y pixel art.
    • No es adecuada para fotos porque no renderiza sombreados, brillos, sombras ni degradados.
  • El conjunto de caracteres se limita a los 95 caracteres ASCII imprimibles, el medio tradicional de los artistas ASCII.
    • No usa caracteres de línea o bloque comunes en el arte ANSI, ni muchos caracteres Unicode de los kaomoji.
  • Los formatos de salida dependen de la configuración:
    • Texto plano monocromático
    • Texto con color mediante secuencias de escape ANSI
    • HTML con o sin color
    • Formato de arte ASCII de Neofetch
  • Es una app de escritorio que puede usarse desde el navegador y desde la línea de comandos.

Logo de Ubuntu y ejemplo con Neofetch

  • El ejemplo muestra el flujo para insertar el resultado de ASCII Silhouettify en la salida de Neofetch en una instancia de Ubuntu.
  • Para obtener el mejor arte ASCII, se toma de la web una imagen de alta resolución del logo de Ubuntu y primero se escala al tamaño en que se verá en la consola.
  • Al convertir la imagen con la versión de línea de comandos, por defecto se genera texto coloreado con secuencias de escape ANSI.
  • Con la bandera -o se puede enviar la salida al archivo que mostrará Neofetch.
  • Como Neofetch inserta un margen amplio entre el arte ANSI y las métricas del sistema operativo, el ejemplo usa el formato de archivo de arte ASCII personalizado de Neofetch.
    • La primera línea del archivo de salida es una lista de índices de color.
    • Las líneas siguientes son la imagen codificada.
    • En un editor de texto, se copia la primera línea al portapapeles y luego se elimina.
    • Al ejecutar Neofetch, se pega y usa el valor guardado en el portapapeles.
    • Para aplicarlo de forma permanente, se reemplaza parte del script bash de Neofetch por ese mismo valor.
  • Al superponer el logo original sobre el resultado generado para compararlos, se ve cómo el algoritmo elige el carácter más grande que cabe dentro del contorno de cada región de color.

Instalación y desinstalación

  • La versión de línea de comandos es una aplicación Node.js.
  • Si no tienes Node.js, primero debes seguir el procedimiento de instalación de Node.js.
  • En macOS y Linux se requiere configurar npm para poder hacer una instalación global sin usar el usuario root.
  • Comando de instalación:
    • npm install -g ascii-silhouettify
  • Comando de desinstalación:
    • npm uninstall -g ascii-silhouettify

Opciones de entrada y salida

  • La versión de navegador y la versión de línea de comandos admiten el mismo conjunto de opciones.
    • La bandera -h de la versión de línea de comandos muestra un resumen de opciones.
  • Se pueden convertir varias imágenes a la vez.
    • Los formatos admitidos son png, svg, jpg, webp, gif, tif, heif, avif y pdf.
    • La bandera -i de la versión de línea de comandos acepta varias reglas de coincidencia de patrones de nombres de archivo.
    • Las imágenes de entrada deben tener fondo negro o transparente.
  • La salida se divide en cuatro familias:
    • Texto plano o texto con color ANSI
    • Texto monoespaciado en formato HTML
    • Formato de arte ASCII personalizado de Neofetch
    • El formato de Neofetch está limitado a 6 colores de la paleta ANSI extendida de 256 colores.
  • El valor predeterminado de la paleta son 240 colores de la paleta ANSI extendida de 256 colores, excluyendo la paleta ANSI estándar de 16 colores.
    • Los 16 colores de la paleta ANSI estándar suelen redefinirse en emuladores de terminal modernos, por eso se excluyen del valor predeterminado.
    • El usuario puede elegir los primeros 8 colores de la paleta ANSI estándar, los 16 colores ANSI estándar completos, la paleta ANSI extendida completa de 256 colores o la paleta predeterminada de 240 colores.
  • Se puede especificar la cantidad máxima de colores que aparecerán en la salida.
    • Los colores considerados como fondo negro no se cuentan.
    • El valor predeterminado es 255.
    • El modo monocromático en la práctica establece este valor en 1.
    • El valor predeterminado para el formato de arte ASCII personalizado de Neofetch es 6, el máximo de ese formato.

Ajuste del tamaño de visualización y de la calidad de conversión

  • La relación de aspecto del arte ASCII generado en un emulador de terminal depende de la fuente, el tamaño de fuente, la altura de línea y las reglas de redondeo del tamaño de los caracteres.
  • Para optimizarlo, se captura una imagen del texto de la terminal y se mide el tamaño en píxeles de cada carácter monoespaciado, incluyendo el espacio entre líneas.
  • Estos son ejemplos de mediciones en el escritorio Windows del desarrollador:
    • IntelliJ Terminal: carácter 8×22, tamaño de fuente 10, altura de línea 1.65
    • Putty: carácter 8×16, tamaño de fuente 10, altura de línea 1.2
    • Notepad: carácter 10×18, tamaño de fuente 13, altura de línea 1.04
    • Notepad++: carácter 9×19, tamaño de fuente 12, altura de línea 1.2
    • Windows Command Prompt: carácter 8×16, tamaño de fuente 10, altura de línea 1.2
    • Windows Console Host: carácter 9×20, tamaño de fuente 12, altura de línea 1.25
    • Windows Terminal: carácter 9×19, tamaño de fuente 12, altura de línea 1.2
  • Lo ideal es escalar previamente la imagen de entrada en un programa de dibujo al tamaño deseado para mostrarla en la terminal.
    • Para ajustes pequeños, ASCII Silhouettify acepta un factor de escalado de imagen.
    • El valor predeterminado es 1.
  • El algoritmo de conversión reemplaza por espacios las regiones con menos de 5% de brillo, dejando totalmente visible el fondo negro.
    • El usuario puede ajustar este umbral de oscuridad.
  • Por defecto distribuye el trabajo entre todos los procesadores lógicos disponibles.
    • El usuario puede reducir la cantidad de procesadores asignados hasta 1.
    • Reducir la cantidad de procesadores aumenta el tiempo de procesamiento.

Algoritmo de conversión

  • En el escritorio Windows donde el desarrollador creó ASCII Silhouettify, Terminal renderiza cada carácter monoespaciado dentro de un rectángulo de 9×19 píxeles con la configuración predeterminada de Cascadia Mono a 12 puntos y 1.2em.
  • El algoritmo captura imágenes de los 95 caracteres ASCII imprimibles y las umbraliza con un criterio de 50% de intensidad para crear imágenes de caracteres con solo píxeles blancos y negros.
  • La imagen fuente se separa en planos de colores únicos.
    • Cada plano es una silueta blanca sobre un fondo negro.
  • Cada plano de color se divide en una matriz de regiones rectangulares de 9×19 píxeles.
    • Cada región se reemplaza por un carácter ASCII.
  • El carácter óptimo se selecciona comparando la región y todas las imágenes de caracteres ASCII píxel por píxel.
    • Si un píxel blanco de la imagen del carácter se superpone con un píxel negro de la región, ese carácter se descarta para no deformar el contorno de la silueta.
    • Entre los caracteres restantes, se elige el que tenga la mayor cantidad de píxeles blancos coincidentes.
  • Al reemplazar una región por un carácter, se registra la cantidad de píxeles blancos coincidentes.
    • Después de convertir todos los planos, se combinan eligiendo el carácter con la mayor cantidad de píxeles blancos coincidentes.
    • El carácter final se colorea con el color del plano del que salió.

Aceleración basada en bitmasks

  • Antes de la conversión, las imágenes de caracteres ASCII se ordenan según su cantidad de píxeles blancos.
    • El carácter de espacio es el que menos tiene, con 0 píxeles blancos.
    • El carácter @ es el que más píxeles blancos tiene.
  • El algoritmo compara cada región con las imágenes de caracteres empezando por @ y bajando en el orden.
    • En cuanto encuentra un carácter que cabe completamente dentro de la silueta, reemplaza esa región por ese carácter.
    • Gracias al ordenamiento, ese carácter es el candidato con mayor cantidad de píxeles blancos.
  • Para aumentar mucho la velocidad, prepara 171 bitmasks para cada píxel de la región de 9×19.
    • Cada bitmask representa el conjunto de imágenes de caracteres ASCII que tienen un píxel negro en esa coordenada.
    • Cada bitmask incluye 95 bits.
    • bit-0 corresponde al carácter de espacio y bit-94 corresponde al carácter @.
  • Durante la conversión de una región, el conjunto de candidatos ASCII disponibles se va reduciendo con un acumulador de 95 bits.
    • Al inicio, todos los bits del acumulador se inicializan en 1.
    • Por cada píxel negro de la región, se aplica un AND bit a bit entre el acumulador actual y el bitmask de ese píxel.
    • Esta operación descarta las imágenes de caracteres que tienen un píxel blanco en la posición de un píxel negro de la región.
  • Después de procesar toda la región, los bits activados del acumulador son los candidatos de caracteres que pueden reemplazarla.
    • Como los caracteres están ordenados, la cantidad de leading zeros del acumulador se convierte en el índice de la imagen del carácter ASCII con más píxeles blancos que queda completamente contenida dentro de la silueta.
    • Con ayuda de una biblioteca, se invoca la instrucción de cálculo de leading zeros del microprocesador para obtener rápidamente el valor necesario.

Optimización del origen y matching de color

  • Al dividir la imagen fuente en una matriz de regiones rectangulares, el origen de la matriz influye en el resultado.
  • Para optimizar el resultado, el algoritmo repite la conversión de toda la imagen para todos los orígenes de coordenadas enteras dentro de una región de 9×19 píxeles alrededor del origen de la imagen.
  • Para manejar mucho volumen de procesamiento, el trabajo se distribuye entre los procesadores lógicos disponibles.
  • La paleta de colores puede limitarse, según la configuración del usuario, desde los primeros 8 colores de la paleta ANSI estándar hasta toda la paleta ANSI extendida de 256 colores.
  • Al separar la imagen fuente en planos de colores únicos, usa la fórmula perceptual de diferencia de color CIEDE2000, de alto costo computacional, para encontrar el color más cercano dentro de la paleta.

Código fuente

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-06-08
Opiniones en Hacker News

  • La página más genial de este sitio parece ser la galería a color: https://meatfighter.com/ascii-silhouettify/color-gallery.htm...

    • El logo de Wendy's da un poco de escalofríos
    • Sin el logo de Mastodon, esta página no vale
    • El logo de Z es realmente ingenioso
      Da la sensación de que te hace ver el diseño gráfico de íconos desde otra perspectiva

  • Hice una herramienta parecida para crear sprites de juego que se puedan meter directo en el código: https://memalign.github.io/m/pceimage/index.html
    Funciona en la web, y también permite editar la salida ASCII con color
    Eso sí, para que el resultado quede bien hay que desactivar Wobble manualmente y ajustar el tamaño del muestreo de píxeles, así que es un poco delicado

    • Está muy divertido y me gusta mucho
      Si tuviera que sugerir algo, estaría bueno un modo que quite la vibración pero conserve esa sensación tierna que sale de hacerlo grueso y redondear las esquinas

  • Si te gusta el arte relacionado con ASCII, probablemente también te guste esta herramienta de ASCII animado que convierte GIF a ASCII: https://www.gifcii.fun
    Por cierto, la hice yo mismo

    • Como alguien a quien le gustan los GIF, está muy divertida
      Estaría bueno poder guardarlo de alguna manera, por ejemplo exportarlo otra vez como GIF o video

  • La versión web no termina de funcionar en navegadores basados en Chromium, pero la versión CLI sí funciona: https://meatfighter.com/ascii-silhouettify/spa/index.html#/
    De paso también hice un gran arte ASCII que se parece al logo de HN

  • Gran trabajo, me recuerda a la Telnet Matrix con colores :)
    Después también descubrí https://ascii.theater/
    Hace unos años hice algo parecido para un conversor de imágenes de computadoras retro, usando la fuente monoespaciada fija de esa computadora, y además aplicaba dithering antes de la conversión de caracteres
    porque así salían gradientes más suaves en las fotos: https://github.com/KodeMunkie/imagetozxspec/blob/master/src/...

  • “Lo que fue, eso será; y lo que se hizo, eso se hará de nuevo. No hay nada nuevo bajo el sol.”
    Está muy bien hecho
    Antes se imprimían de forma muy parecida banners de cumpleaños e imágenes usando la densidad de impresión de los caracteres en EBCDIC y ASCII, primero en impresoras de banda con papel continuo y después en impresoras de matriz de puntos

  • Hoy parece que bastantes personas van a ponerse a modificar /etc/motd o /etc/issue

  • Probé algo parecido con una función oscilante que se mueve en tiempo real: https://piter-genuary2024.netlify.app/genuary9/

    • Me pregunto si se podría hacer algo raro que empezara como la salida estándar de tail de logs, luego fuera mezclando patrones cada vez más visibles y al final apareciera una cara aterradora entre el texto

  • Otra vez npm
    El proyecto es excelente, pero no entiendo por qué necesariamente hay que hacerlo así
    Me pregunto qué pasó con las instalaciones normales

    • Me da curiosidad qué alternativa propones
      NPM funciona igual en todas partes, y no hay otro gestor de paquetes tan usado en tantas plataformas como NPM
    • Si dices qué método es esa “instalación normal”, te puedo decir cuáles son los problemas de ese método
    • Ni siquiera hace falta instalarlo
      Solo ejecútalo con npx
    • Sí, tal cual, no sé qué pasó con las instalaciones normales, o si alguna vez realmente existieron
      Configurarlo de otra manera me toma horas y termina siendo un desastre, así que mis repositorios de CLI los conecto por todos lados con npm/yarn link
      Hasta desarrollo scripts de Python con nodemon main.py, y a veces parece que los únicos que saben qué hace falta son los de Node

  • Aun así, probablemente voy a seguir usando https://asciiflow.com/# en vez de Figma