- Este proyecto implementa en la web Atkinson Dithering, el clásico filtro Macintosh de 1 bit
- Convierte la imagen de entrada a blanco y negro comparándola con un gris del 50%, y distribuye la diferencia entre los píxeles vecinos
- Aprovecha tecnologías modernas del navegador como Canvas, Drag & Drop, WebWorkers y FileReader
- La imagen convertida se puede guardar con clic derecho
- Guardarla arrastrando la imagen no está disponible debido a limitaciones del navegador
Importancia y diferenciadores del proyecto de código abierto
- Atkinson Dithering es un efecto gráfico clásico de Macintosh usado en Hyperdither y HyperScan
- Convierte información compleja de color en la imagen a una forma simple a nivel de píxel, lo que resulta útil para generar imágenes livianas en blanco y negro
- Al ser una implementación web, se puede usar solo con un navegador moderno, sin software adicional
- Mediante WebWorkers, permite ejecución asíncrona y optimización de rendimiento al procesar imágenes grandes
- Al ser código abierto, facilita la ampliación de funciones y la personalización
Resumen del algoritmo Atkinson Dithering
- Cada píxel se convierte a blanco y negro comparándolo con un valor de gris del 50%
- El valor de diferencia generado por la conversión se distribuye entre los 6 píxeles cercanos de la siguiente manera
(X: píxel actual, se distribuye 1/8 a cada uno)
- X 1/8 1/8
- 1/8 1/8 1/8
- 1/8
- De este modo, se aplica el efecto de tramado a toda la imagen
Implementación y forma de uso
- Se ingresa un archivo de imagen arrastrándolo al navegador con drag and drop o mediante la función de selección de archivos
- Usa la API de Canvas para convertir y renderizar la imagen en tiempo real
- Usa FileReader para leer los datos de la imagen,
- y WebWorkers para ejecutar el procesamiento de tramado en segundo plano
- La imagen convertida se puede guardar con clic derecho
(por limitaciones del navegador, no se puede guardar arrastrando la imagen directamente al escritorio)
Stack tecnológico y entorno compatible
- Hace uso intensivo de las API modernas de HTML5 y JavaScript
- Requiere un navegador moderno; en navegadores antiguos algunas funciones pueden estar limitadas
Conclusión
- Ofrece una implementación web simple e intuitiva del filtro Atkinson Dithering
- Tiene alto potencial de uso en áreas como desarrollo gráfico, arte visual y optimización de imágenes
1 comentarios
Comentarios en Hacker News
Sigue siendo mi algoritmo favorito de tramado en blanco y negro.
En la universidad tuve la experiencia de conectar un escáner plano B&W a una Mac y escanear imágenes con un programa tipo HyperCard stack para crear imágenes en blanco y negro.
Escaneé de forma sencilla imágenes de un libro de clipart que compré en la librería universitaria y las usé como el "logo" de un juego shareware para Mac que empecé a escribir alrededor de 1988.
En ese momento no sabía lo genial que era el algoritmo de Atkinson, pero más adelante, después de probar otros algoritmos de tramado, me di cuenta de que la forma en que el código de Bill difunde el error es realmente excelente.
Hace poco quise convertir varias imágenes de las fases de la Luna al estilo Atkinson para un proyecto de calendario eInk, así que busqué un sitio relacionado y convertí imágenes de la Luna.
Es mejor no hacer clic en el enlace "as follows" del cuadro de información.
Como no se ha actualizado en mucho tiempo, ahora apunta a un enlace NSFW (no apto para el trabajo o lugares públicos).
Esta implementación está realmente excelente.
Al descargar, si le pones un valor al atributo
downloaddel anchor, puedes dar al archivo un nombre predeterminado y la extensión.png, mejorando un poco la experiencia de descarga.Referencia: documentación de HTMLAnchorElement.download
download, como indica el enlace que compartiste, empezó a ser compatible con los navegadores a partir de marzo de 2017.En cambio, el último commit del repositorio de la herramienta de tramado parece ser de marzo de 2016.
La persona autora sigue activa en GitHub con otros repositorios, así que quizá todavía aceptaría un pull request.
Enlace: repositorio de GitHub de canvas-atkinson-dither
Yo también tengo un proyecto en desarrollo que permite convertir varias imágenes a MacPaint y crear una imagen de disco en formato MFS de 400k.
Enlace: proyecto mfsjs
Estuvo algo abandonado en mi directorio home durante varios meses, pero hace poco complementé la librería usando Gemini Deep Research.
También incluye markdown generado por un LLM para quien quiera recrearlo o mejorarlo en otro lenguaje.
Si quieres probar tramado Atkinson en Python,
recomiendo el proyecto hyperdither.
La implementación está buena y la interfaz también transmite nostalgia.
Últimamente han aumentado las visitas a mi componente web de tramado Atkinson[0], y me parecía raro; resulta que había esta triste noticia.
Personalmente siento que el tramado Atkinson produce las imágenes más bonitas en monitores realmente nítidos, como las Mac originales.
Tiene algo cool y muy ochentero, así que también lo usé en un juego que hice el año pasado.
[0]: componente web de tramado Atkinson con precisión por píxel
Una herramienta parecida que hice hace algunos años:
herramienta de tramado de Beyondloom
Es interesante que una de las opciones de tamaño sea 512x384, cuando la resolución original de la Mac era 512x342.
De hecho, las primeras Mac tenían una resolución de pantalla de 512x342.
Más información: resolución del Macintosh original
Corrección: volví a leerlo y, en realidad, tú tenías razón.
Siento que eso no parece una coincidencia.
La UI es linda, y también vale la pena revisar el enlace de GitHub del demo.
repositorio de GitHub de canvas-atkinson-dither
¿Es la misma persona Atkinson que falleció hoy? ¿Y este es un proyecto en homenaje a él?
En cierta medida sí.
Pero el primer commit del repositorio es de hace 15 años, así que no es algo armado apresuradamente a raíz de las noticias recientes.
Sí, este algoritmo fue "inventado" por el propio Atkinson.
Había escrito "descubierto", pero "inventado" es más preciso.