- Este projeto implementa na web o Atkinson Dithering, um filtro clássico de 1 bit do Macintosh
- A imagem de entrada é convertida em preto e branco comparando com 50% de cinza, e a diferença é distribuída para os pixels vizinhos
- Aproveita tecnologias modernas de navegador como Canvas, Drag & Drop, WebWorkers e FileReader
- A imagem convertida pode ser salva com clique direito
- Salvar a imagem arrastando não é compatível devido a limitações do navegador
Importância e diferenciais do projeto open source
- O Atkinson Dithering é um efeito gráfico clássico do Macintosh usado no Hyperdither e no HyperScan
- Ele converte informações complexas de cor da imagem em uma forma simples no nível de pixel, sendo útil para a criação de imagens leves em preto e branco
- Por ser uma implementação baseada na web, pode ser usado apenas com um navegador moderno, sem software adicional
- Com WebWorkers, é possível fazer execução assíncrona e otimização de desempenho ao processar imagens grandes
- Como o código é open source, fica fácil estender funcionalidades e personalizar
Visão geral do algoritmo de Atkinson Dithering
- Cada pixel é convertido em preto e branco comparando com um valor de 50% de cinza
- O valor de diferença gerado pela conversão é distribuído para os 6 pixels ao redor da seguinte forma
(X: pixel atual, distribuído em frações de 1/8)
- X 1/8 1/8
- 1/8 1/8 1/8
- 1/8
- Dessa forma, o efeito de dithering é aplicado a toda a imagem
Implementação e forma de uso
- O arquivo de imagem é inserido no navegador por arrastar e soltar ou pela função de seleção de arquivo
- A API Canvas é usada para converter e renderizar a imagem em tempo real
- FileReader é usado para ler os dados da imagem,
- e WebWorkers são usados para executar o processamento de dithering em segundo plano
- A imagem convertida pode ser salva com clique direito
(por limitações do navegador, não é possível arrastar a imagem diretamente para a área de trabalho para salvá-la)
Stack técnica e ambiente compatível
- Faz uso ativo das APIs modernas de HTML5 e JavaScript
- É necessário um ambiente de navegador moderno, e alguns recursos podem ser limitados em navegadores antigos
Conclusão
- Oferece uma implementação web simples e intuitiva do filtro Atkinson Dithering
- Tem alto potencial de uso em diversas áreas, como desenvolvimento gráfico, artwork e redução do peso de imagens
1 comentários
Comentários no Hacker News
Ainda é meu algoritmo favorito de dithering em preto e branco.
Na faculdade, tive a experiência de conectar um scanner flatbed P&B a um Mac e digitalizar imagens com um programa tipo HyperCard stack para gerar imagens em preto e branco.
Digitalizei rapidamente imagens de um livro de clipart que comprei na livraria da universidade e usei como "logo" de um jogo shareware para Mac que comecei a escrever por volta de 1988.
Na época eu não sabia o quão incrível era o algoritmo do Atkinson, mas depois de experimentar outros algoritmos de dithering percebi como a forma de difusão do código do Bill é realmente excelente.
Mais recentemente, em um projeto de calendário eInk, quis converter várias imagens das fases da Lua para o estilo Atkinson, então procurei sites relacionados e converti imagens da Lua
É melhor não clicar no link "as follows" da caixa de diálogo de informações.
Como não é atualizado há muito tempo, agora ele virou um link NSFW (inadequado para ver no trabalho ou em locais públicos).
Esta implementação é realmente excelente.
Na hora do download, dá para melhorar um pouco a experiência definindo um valor para o atributo "download" da anchor, assim o arquivo pode receber um nome padrão e a extensão .png.
Referência: documentação do HTMLAnchorElement.download
download, como o link que você mandou mostra, só passou a ser suportado pelos navegadores em março de 2017.Enquanto isso, o último commit do repositório da ferramenta de dithering parece ser de março de 2016.
O autor ainda continua ativo no GitHub com outros repositórios, então espero que talvez aceite um pull request.
Link: repositório canvas-atkinson-dither no GitHub
Também tenho um projeto em desenvolvimento que permite converter várias imagens para MacPaint e transformá-las em uma imagem de disco no formato 400k MFS.
Link: projeto mfsjs
Ele ficou meio largado no meu diretório home por alguns meses, mas recentemente usei o Gemini Deep Research para complementar a biblioteca.
Também inclui um Markdown gerado por LLM para quem quiser reproduzir ou melhorar isso em outra linguagem.
Se você quiser experimentar dithering de Atkinson em Python,
recomendo o projeto hyperdither.
A implementação é legal e a interface traz uma sensação nostálgica.
Recentemente aumentou o tráfego do meu web component de dithering de Atkinson[0], e eu estava achando estranho, mas havia essa notícia triste.
Pessoalmente, sinto que o dithering de Atkinson produz as imagens mais bonitas justamente em monitores bem nítidos, como os Macs originais.
Tem algo de cool e com cara dos anos 80, então usei isso em um jogo que fiz no ano passado.
[0]: web component de dithering de Atkinson com precisão em nível de pixel
Uma ferramenta parecida que eu fiz alguns anos atrás:
ferramenta de dithering do Beyond Loom
É curioso que uma das opções de tamanho seja 512x384, já que a resolução original do Mac era 512x342.
De fato, os Macs do começo tinham resolução de tela de 512x342.
Informação relacionada: resolução do Macintosh original
Correção: relendo o conteúdo, na verdade você estava certo.
Parece que isso não foi coincidência.
A UI é bonitinha, e o link do GitHub da demo também vale a pena conferir.
repositório canvas-atkinson-dither no GitHub
É a mesma pessoa que o Atkinson que morreu hoje? E isso é um projeto em homenagem a ele?
Em certa medida, sim.
Mas o primeiro commit do repositório é de 15 anos atrás, então não foi algo feito às pressas por causa das notícias recentes.
Sim, o próprio Atkinson "inventou" esse algoritmo.
Eu tinha escrito "descobriu", mas "inventou" é mais preciso.