- Explica el principio de reproducir visualmente varios niveles de brillo con una matriz de píxeles en blanco y negro
- Dithering es una técnica para representar mediante una ilusión óptica más colores o niveles de brillo de los que realmente hay
- En el método de ordered dithering, se utiliza un threshold map para decidir si cada píxel será negro o blanco según su brillo
- En este proceso, los cambios en la densidad de píxeles generan la sensación de escala de grises mientras se conserva la forma de la imagen original
- Este artículo es la primera parte de una serie de tres sobre los conceptos básicos del dithering; después abordará el algoritmo de generación de threshold maps y la difusión de error (error diffusion)
El concepto y el principio del dithering
- El dithering es una técnica visual para expresar más tonos con una cantidad limitada de colores
- Organiza píxeles blancos y negros en patrones específicos para generar la ilusión de varios niveles de escala de grises
- Permite obtener diversidad visual sin aumentar la cantidad real de colores
- El artículo usa como ejemplo una imagen en escala de grises
- En una pantalla que solo puede mostrar blanco y negro, cada píxel se convierte al color más cercano (negro o blanco)
- Si la conversión se hace de forma simple, los bordes de brillo se vuelven toscos y se pierde información sutil de sombras
- El dithering logra transiciones de brillo más suaves cambiando intencionalmente algunos píxeles al color opuesto
- En las zonas oscuras aumenta la densidad de píxeles negros, y en las zonas claras aumenta la densidad de píxeles blancos
- Como resultado, la diferencia en la densidad de píxeles forma la ilusión de escala de grises
Ordered dithering y threshold map
- Ordered dithering es un método simple de dithering que usa un threshold map
- Un threshold map está compuesto por una cuadrícula de valores de brillo que van de 0 (el más oscuro) a 1 (el más claro)
- El brillo de cada píxel de entrada se compara con el umbral de su posición correspondiente
- Si el brillo es mayor que el umbral, se establece en blanco; si es menor, en negro
- Al repetir este proceso en todos los píxeles, se genera una imagen con un patrón en blanco y negro
- El threshold map está diseñado para producir un patrón adecuado de densidad de blancos y negros según la distribución de brillo de la imagen de entrada
- En las zonas claras la proporción de blanco es mayor, y en las oscuras la de negro es mayor
- Esta diferencia de densidad crea un efecto que, visto desde lejos, parece una escala de grises
Procesamiento de imágenes grandes y efecto visual
- Al aplicar dithering a imágenes grandes, el threshold map se amplía para ajustarse al tamaño completo de la imagen
- Se aplica el mismo principio: comparar el brillo de cada píxel con el umbral para convertirlo en blanco o negro
- Como resultado, la imagen usa solo dos colores, pero conserva la estructura de brillo del original
- Aunque se reduce la cantidad de colores, se mantiene el detalle visual gracias a los cambios en la densidad de píxeles
El significado del dithering y la estructura de la serie
- El dithering es una técnica que no añade colores, sino que los elimina para crear diversidad visual
- El autor lo describe como “un proceso para sacar el máximo provecho de lo que se tiene”
- Este texto es la primera parte de una trilogía y se enfoca en los principios básicos y la comprensión visual
- El siguiente artículo tratará el algoritmo de generación de threshold maps, y el último abordará la difusión de error (error diffusion)
- La serie planea explorar los distintos enfoques algorítmicos del dithering y las diferencias en sus resultados visuales
Presentación del autor y del proyecto
- visualrambling.space es un proyecto personal dirigido por Damar
- Produce contenido interactivo que explora y explica visualmente diversos temas
- Entre los temas que trata están Three.js, WebGL, dithering, visualización y aprendizaje interactivo
- Damar seguirá compartiendo nuevos artículos visuales a través de su cuenta de X/Twitter (@damarberlari)
2 comentarios
Comentarios de Hacker News
Esto es una técnica de halftone. O sea, una forma de hacer que parezca que hay más colores que los que realmente tiene la paleta, pero yo no lo veo como dithering
yo pienso que el dithering es una técnica para eliminar el banding que aparece cuando la paleta no es lo bastante grande
el halftone que muestran aquí expande una paleta de 2 colores a algo así como 20 colores, pero el banding sigue siendo muy evidente
ese banding se puede eliminar usando muchos más colores (por ejemplo, escala de grises de 256 niveles, o 256³ en RGB) o con dithering
probablemente la técnica de error diffusion que adelantan al final sea justo a lo que me refiero
la esencia del dithering es el ruido, y en este demo no hay nada de ruido. Todo es determinista
aun así, la presentación en sí estuvo realmente increíble
normalmente el ruido surge en el proceso de cuantización, y el dithering es una técnica para darle forma a ese ruido
el Bayer-matrix ordered dithering que se usó aquí concentra el ruido en las frecuencias altas para que se note menos, pero en las frecuencias bajas todavía deja banding
como dijo Dave Long, el algoritmo de línea de Bresenham también puede verse como una especie de dithering. La señal no es el brillo, sino la posición de la pluma
ya hubo una discusión relacionada hace unos días — ver este hilo
Artículo de Wikipedia
antes, las máquinas a color de NeXT tenían pantallas de 12 bits (4 bits por canal), pero con un buen dithering podían verse como true color de 24 bits
Recomiendo dos videos de Coding Train de Daniel Shiffman
Turning Images into Dots: The Magic of Dithering
Coding Challenge 181: Weighted Voronoi Stippling
Fue un tema interesante. La animación también estuvo buena y se notaba el esfuerzo
pero este tipo de presentación interactiva es más difícil de leer que una entrada de blog tradicional
no se capta la estructura del texto de un vistazo, y como hay que leer oración por oración, es difícil hojearlo rápido
se siente como un video interactivo donde el usuario puede controlar la velocidad
yo también suelo preferir texto, pero me parece una variación interesante
He usado ordered y error diffusion dithering como lenguaje visual en varios proyectos de diseño
sobre todo en trabajos relacionados con tech/computación/blockchain, tanto en formato estático como animado
estas técnicas antiguas tienen una especie de calidez y nostalgia que combina muy bien con ideas nuevas
Hay ejemplos de mi trabajo en Instagram:
D.Y.O.R. / Printed / Titles / Experimento de dithering
ve mi sitio olsz.me
Hace tiempo hice una transición entre dos tipos de dithering
Proyecto en GitHub
De verdad quería que me encantara esto, pero me costó muchísimo leer el texto sobre patrones en movimiento
La visualización estuvo genial, pero no entendí la parte del threshold map
faltó explicar cómo se construye el mapa y cómo se decide el umbral
no sé si para el autor era tan obvio que simplemente lo omitió
la clave es recordar el concepto de “threshold”. Un píxel gris se convierte en blanco o negro según el umbral
por ejemplo,
dithered_color = (raw_color > threshold_color) ? white : blackincluso podrías usar un threshold aleatorio. Si el promedio es 0.5, aproxima bastante bien el gris original
lo importante es que, a medida que van aumentando los píxeles blancos, no queden pegados entre sí.
un gris del 50% puede diseñarse como un patrón de tablero de ajedrez, y uno del 25% como un solo píxel blanco dentro de un bloque 2x2
este tipo de experimento es divertido de probar directamente en ShaderToy
al principio pensé que usaban una “imagen binaria” como entrada, pero después resultó que usaban áreas en escala de grises
El dithering puede hacer que incluso un monitor sin soporte para color de 10 bits se vea bastante parecido a 10 bits
el banding desaparece y el ruido oculta la falta de profundidad de color
o sea, sigue siendo una técnica útil hoy en día. No es solo para arte retro
la gente todavía piensa solo en palette dithering
8 bits por canal no son suficientes. Por la corrección gamma, en la práctica son como unas 220 etapas
mantengo el crate de Rust dithereens justamente para resolver este tipo de problemas
si ves el gradiente al inicio del README, entiendes de inmediato por qué importa
al reducir imágenes de alta profundidad de bits a 10 o 8 bits, el random dithering funciona bastante bien
Photoshop aplica dithering por defecto al convertir de 16 bits a 8 bits
otro software no lo hace, y cuando imprimes un póster grande y aparece banding, te das cuenta enseguida
así hacían que paneles TN de 6 bits parecieran de 8 bits, y ahora también se usa en HDR-10
este método es un algoritmo simple que mezcla colores haciendo parpadear rápidamente los píxeles
Artículo de Wikipedia sobre Frame rate control
El formato de la presentación estuvo excelente y ya tengo ganas de ver la siguiente parte
hace tiempo probé ordered dithering en un ZX Spectrum Raytracer, y era fácil de implementar y daba buenos resultados
Link del proyecto
parece que en los 80 no se usaba mucho por temas de rendimiento. Sí recuerdo haberlo visto en fondos de Windows 3.1 o Monkey Island VGA en los 90
El demo estuvo genial, pero no creo que sea exacto llamar al dithering una “ilusión de más tonos”
si aplicas un filtro de paso bajo a una imagen con dithering, esos tonos intermedios realmente existen
es como un amplificador clase D que emite una señal por pulsos, pero después del filtro termina siendo sonido analógico real
al final, nuestra visión y la distancia cumplen ese papel de filtro
si miras con atención, te das cuenta de que ese color en realidad no está ahí
percibimos gris usando solo píxeles blancos y negros, pero al mismo tiempo entendemos que es una ilusión óptica
por eso me parece acertada la palabra “illusion”
Dejando de lado el texto y apostando por un video interactivo que da la clase en el auditorio solo con imagen, es un ítem con una facha brutal, como para romper el escenario. La escena que muestra la escala de grises de una imagen convertida en capas 3D me parece una explicación sumamente clara y amable.