- Explica o princípio de reproduzir visualmente vários níveis de brilho com uma matriz de pixels em preto e branco
- Dithering é uma técnica que representa por ilusão de ótica mais cores ou níveis de brilho do que os realmente disponíveis
- No método de ordered dithering, usa-se um mapa de limiar (threshold map) para decidir entre preto e branco com base no brilho de cada pixel
- Nesse processo, a variação na densidade de pixels cria a sensação de tons de cinza, mantendo a forma da imagem original
- O texto é o primeiro de uma trilogia sobre os conceitos básicos de dithering e, depois, tratará de algoritmos de geração de mapas de limiar e difusão de erro (error diffusion)
Conceito e princípio do dithering
- Dithering é uma técnica visual para expressar mais tonalidades com uma paleta limitada
- Organiza pixels em preto e branco em padrões específicos para criar a ilusão de vários níveis de cinza
- Garante diversidade visual sem aumentar o número real de cores
- O texto usa uma imagem em escala de cinza como exemplo
- Em uma tela capaz de exibir apenas preto e branco, cada pixel é convertido para a cor mais próxima (preto ou branco)
- Em uma conversão simples, as bordas de contraste ficam ásperas e detalhes sutis de sombra se perdem
- O dithering implementa transições de brilho mais suaves ao trocar intencionalmente alguns pixels pela cor oposta
- Em áreas escuras, aumenta a densidade de pixels pretos; em áreas claras, aumenta a densidade de pixels brancos
- Como resultado, a diferença na densidade de pixels forma a ilusão de tons de cinza
Ordered Dithering e mapa de limiar
- Ordered dithering é um método simples de dithering que usa um mapa de limiar (threshold map)
- O mapa de limiar é composto por uma grade de valores de brilho que vai de 0 (mais escuro) a 1 (mais claro)
- O brilho de cada pixel de entrada é comparado com o limiar da posição correspondente
- Se o brilho for maior que o limiar, o pixel vira branco; se for menor, vira preto
- Repetindo esse processo para todos os pixels, gera-se uma imagem padronizada em preto e branco
- O mapa de limiar é projetado para produzir um padrão adequado de densidade entre preto e branco de acordo com a distribuição de brilho da imagem de entrada
- Em áreas claras, a proporção de branco é maior; em áreas escuras, a proporção de preto é maior
- Essa diferença de densidade cria o efeito de parecer tons de cinza quando visto à distância
Processamento de imagens grandes e efeito visual
- Ao aplicar dithering em imagens grandes, o mapa de limiar é expandido para se ajustar ao tamanho total da imagem
- Aplica-se o mesmo princípio de comparar o brilho de cada pixel com o limiar para convertê-lo em preto e branco
- Como resultado, a imagem usa apenas duas cores, mas mantém a estrutura de contraste da original
- Embora o número de cores seja reduzido, a variação na densidade de pixels preserva os detalhes visuais
Significado do dithering e estrutura da série
- Dithering é uma técnica que cria diversidade visual não adicionando cores, mas removendo-as
- O autor a descreve como “um processo de tirar o máximo proveito do que se tem”
- Este texto é o primeiro de uma trilogia e se concentra nos princípios básicos e na compreensão visual
- O próximo texto abordará algoritmos de geração de mapas de limiar, e o último tratará de difusão de erro (error diffusion)
- A série pretende explorar diferentes abordagens algorítmicas do dithering e as diferenças em seus resultados visuais
Apresentação do autor e do projeto
- visualrambling.space é um projeto pessoal mantido por Damar
- Produz conteúdo interativo que explora e explica temas de forma visual
- Entre os temas abordados estão Three.js, WebGL, dithering, visualização e aprendizado interativo
- Damar pretende continuar compartilhando novos artigos visuais por meio de sua conta no X/Twitter (@damarberlari)
2 comentários
Comentários do Hacker News
Isso é uma técnica de halftone. Ou seja, uma forma de fazer parecer que há mais cores do que realmente existem na paleta, mas, na minha opinião, isso não é dithering
Eu vejo dithering como uma técnica para eliminar o banding que surge quando a paleta não é grande o suficiente
O halftone mostrado aqui expande uma paleta de 2 cores para algo como 20 cores, mas o banding continua bem evidente
Esse tipo de banding pode ser eliminado usando muito mais cores (por exemplo, escala de cinza com 256 níveis, ou 256³ no caso de RGB) ou com dithering
Imagino que a técnica de error diffusion prometida no final seja a parte a que estou me referindo
A essência do dithering é o ruído, e nesta demo não há ruído nenhum. Tudo é determinístico
Ainda assim, a apresentação em si foi realmente incrível
Em geral, o ruído surge no processo de quantização, e o dithering é a técnica de moldar esse ruído
O Bayer-matrix ordered dithering usado aqui concentra o ruído em frequências altas para ficar menos perceptível aos olhos, mas o banding ainda permanece nas frequências baixas
Como Dave Long disse, o algoritmo de linha de Bresenham também pode ser visto como uma forma de dithering. Só que o sinal, em vez de ser brilho, é a posição da caneta
Houve uma discussão relacionada alguns dias atrás — veja esta thread
Artigo da Wikipédia
Antigamente, as máquinas coloridas da NeXT tinham telas de 12 bits (4 bits por canal), mas com um bom dithering pareciam ter 24-bit true color
Recomendo dois vídeos do Daniel Shiffman no Coding Train
Turning Images into Dots: The Magic of Dithering
Coding Challenge 181: Weighted Voronoi Stippling
Foi um tema interessante. As animações eram boas e dava para ver o esforço colocado ali
Mas esse tipo de apresentação interativa é mais difícil de ler do que um post tradicional de blog
A estrutura do texto não fica clara de imediato, e como é preciso ler frase por frase, fica difícil passar o olho rapidamente
Dá a sensação de um vídeo interativo em que o usuário pode controlar o ritmo
Eu também prefiro texto no dia a dia, mas acho esse formato uma variação interessante
Já usei ordered e error diffusion dithering como linguagem visual em vários projetos de design
Especialmente em trabalhos ligados a tech/computadores/blockchain, tanto em formato estático quanto animado
Essas técnicas antigas têm um certo calor e nostalgia, então combinam bem com ideias novas
Exemplos do meu trabalho estão no Instagram:
D.Y.O.R. / Printed / Titles / Experimentos com dithering
Veja meu site olsz.me
Há algum tempo fiz uma transição entre dois tipos de dithering
Projeto no GitHub
Eu queria muito gostar disso, mas foi difícil demais ler texto sobre padrões em movimento
A forma de visualização era legal, mas eu não entendi a parte do threshold map
Faltou explicar como o mapa é criado e como os limiares são definidos
Não sei se isso foi omitido por parecer óbvio demais para o autor
O principal é lembrar do conceito de ‘threshold’. Um pixel cinza vira preto ou branco com base nesse limiar
Por exemplo,
dithered_color = (raw_color > threshold_color) ? white : blackVocê também pode usar valores aleatórios para o threshold. Se a média for 0.5, isso aproxima bem o cinza original
O importante é fazer com que, à medida que os pixels brancos aumentam, eles não se grudem uns nos outros.
Um cinza de 50% pode virar um padrão de tabuleiro, 25% pode ser apenas um pixel branco em um bloco 2x2 etc.
É divertido testar esse tipo de coisa diretamente no ShaderToy
No começo achei que usavam uma ‘imagem binária’ como entrada, mas depois apareceu uma área em cinza como entrada
Dithering faz até monitores sem suporte a cor de 10 bits parecerem bem próximos de 10 bits
O banding desaparece, e o ruído esconde a falta de profundidade de cor
Ou seja, ainda é uma técnica útil hoje em dia. Não serve só para arte retrô
As pessoas ainda pensam apenas em palette dithering
8 bits por canal não são suficientes. Por causa da correção de gama, na prática isso dá algo como 220 níveis
Eu mantenho o crate Rust dithereens justamente para resolver esse tipo de problema
Se você olhar o gradiente no topo do README, entende na hora por que isso importa
Ao reduzir imagens de alta profundidade para 10 bits ou 8 bits, random dithering já funciona muito bem
O Photoshop aplica dithering por padrão ao converter de 16 bits para 8 bits
Outros softwares não fazem isso, então, quando você imprime um pôster grande e vê banding, percebe imediatamente
Isso fazia painéis TN de 6 bits parecerem de 8 bits, e hoje também é usado em HDR-10
É um algoritmo simples que mistura cores fazendo os pixels piscarem rapidamente
Artigo da Wikipédia sobre Frame rate control
O formato da apresentação foi excelente, e estou ansioso pela próxima parte
Já usei ordered dithering no ZX Spectrum Raytracer, e foi simples de implementar com um resultado muito bom
Link do projeto
Acho que nos anos 80 isso não era tão usado por questões de desempenho. Já nos anos 90 lembro de ver isso no Windows 3.1 e nos fundos VGA de Monkey Island
A demo foi ótima, mas chamar dithering de “ilusão de mais tons” não me parece totalmente preciso
Se você aplicar um filtro passa-baixa a uma imagem com dithering, aqueles tons intermediários realmente existem
É como um amplificador classe D, que emite um sinal em pulsos, mas depois do filtro produz um som analógico real
No fim, nossa visão e a distância acabam fazendo o papel desse filtro
Se você olhar com atenção, percebe que aquela cor de fato não está lá
Reconhecemos cinza a partir de pixels pretos e brancos, mas ao mesmo tempo sabemos que isso é uma ilusão de ótica
Então acho que a palavra ‘illusion’ faz sentido aqui
Sem texto, adotando uma abordagem de vídeo interativo em que a aula é dada no auditório apenas com imagens, é um item de estilo absurdamente impactante, a ponto de rasgar o palco. A cena que mostra a imagem em escala de cinza transformada em camadas 3D me parece uma explicação extremamente didática.