Converta fotos para dithering Atkinson

 (gazs.github.io)
1 pontos por GN⁺ 2025-06-08 | 1 comentários | Compartilhar no WhatsApp
  • Transforma fotos no estilo de filtro de 1 bit do Macintosh clássico, aplicando o efeito de dithering Atkinson usando apenas pixels em preto e branco
  • Cada pixel vira preto ou branco com base em 50% de cinza, e o erro de conversão se espalha para os pixels ao redor
  • O erro é distribuído em 1/8 para cada uma das 6 posições ao redor do pixel atual, criando uma imagem em preto e branco com textura característica
  • A imagem resultante pode ser salva com o botão direito, mas, por limitações do navegador, não pode ser arrastada para a área de trabalho para salvar
  • A implementação usa Canvas, eventos de Drag and Drop, WebWorkers e a API FileReader, e requer um navegador moderno

Como funciona o processamento de dithering Atkinson

  • Esta implementação reproduz o filtro clássico de 1 bit do Macintosh usado no Hyperdither e no HyperScan
  • O processo compara cada pixel com 50% de cinza e o converte para preto ou branco
  • A diferença entre o valor de entrada e o valor de saída gerada durante a conversão é distribuída para os pixels vizinhos
    • 1/8 para cada uma das 2 posições à direita do pixel atual X
    • 1/8 para cada uma das 3 posições, a partir da esquerda, na linha seguinte
    • 1/8 para 1 posição à esquerda na linha depois da seguinte

Uso da demo e requisitos do navegador

  • A imagem renderizada pode ser salva com o botão direito
  • Por limitações do navegador, não é possível arrastar para salvar a imagem na área de trabalho
  • O código usa Canvas, eventos de Drag and Drop, WebWorkers e a API FileReader
  • Para executar, é necessário um navegador moderno

Leituras relacionadas

1 comentários

 
GN⁺ 2025-06-08
Comentários no Hacker News

  • Ainda é o meu algoritmo de dithering em preto e branco favorito
    Na faculdade havia um scanner de mesa monocromático ligado a um Mac, e provavelmente era possível escanear imagens com uma stack do HyperCard e transformá-las em imagens em preto e branco
    Quando comecei a fazer jogos shareware para Mac por volta de 1988, escaneei rapidamente um livro de cliparts que comprei na livraria da faculdade e usei aquilo como “logos”
    Na época eu não sabia quão bom era o algoritmo de Atkinson, mas depois, ao tentar aplicar dithering com outros algoritmos, percebi como a difusão no código do Bill era bem feita
    Recentemente, ao criar um projeto de calendário em eInk, eu queria transformar fotos da Lua em várias fases em uma série de imagens no “estilo Atkinson”, então encontrei um site parecido com o linkado e apliquei dithering Atkinson às fotos da Lua [1]
    [1] Veja a Lua na captura de tela: https://github.com/EngineersNeedArt/SystemSix/blob/10f2332b5...

    • Muito bonito mesmo! Se houver algum lugar onde seja possível ver o código do Bill, eu gostaria de mexer nele pessoalmente e aprender

  • É melhor não clicar em “as follows” na caixa de diálogo de informações
    Parece que não é atualizado há algum tempo e, nesse meio-tempo, o link virou NSFW

  • A implementação é excelente, e poderia ficar um pouco melhor se passasse um valor para o atributo download da âncora, dando ao arquivo baixado um nome padrão e a extensão .png
    Referência: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

  • Por que não dithering Sierra?
    https://tannerhelland.com/2012/12/28/dithering-eleven-algori...

    • Originalmente era nostalgia dos primeiros Macs, e parece ter voltado à tona porque Bill Atkinson acabou de falecer

  • Estou fazendo, aos poucos, algo que permite converter várias imagens para MacPaint e colocá-las em uma imagem de disco em formato MFS de 400k
    https://github.com/minorbug/mfsjs
    Esse projeto está juntando um pouco de poeira no meu diretório home há alguns meses
    Usei o Gemini Deep Research para ajudar na criação da biblioteca, e também incluí o Markdown gerado por LLM para quem quiser reproduzir ou melhorar em outra linguagem

    • Está escrito que “imagens MacPaint são um formato fixo com resolução de 576 x 720 pixels”, mas era mesmo um formato fixo?
      A Wikipedia também diz isso, mas não há fonte

  • Esta implementação é ótima e a interface também traz nostalgia
    Eu estava me perguntando por que hoje aumentaram as visualizações do meu web component de dithering Atkinson[0], mas foi por causa da notícia triste
    Sempre achei que, em monitores muito nítidos como os Macs originais, o dithering Atkinson produzia as imagens mais bonitas
    Tem algo de legal e com cara dos anos 80, por isso também usei no jogo do ano passado
    [0] https://sheep.horse/2023/1/improved_web_component_for_pixel-...

    • Fazer dithering pixel a pixel em uma tela Retina é algo bem peculiar
      Em algumas fotos, o estilo combina muito bem; em outras, nem tanto
      Tem uma sensação estranhamente moderna e antiga ao mesmo tempo, e os pontos individuais não incomodam como em fotos antigas de verdade

  • Se quiser experimentar em Python, existe o hyperdither
    https://github.com/tgray/hyperdither

    • Ao rolar a página, as imagens do README ficam marrons

  • Parece que combinaria muito bem com dispositivos eInk/ePaper

  • É a mesma pessoa, o Atkinson que faleceu hoje, e isto é uma homenagem?

    • Em certa medida sim, mas o primeiro commit do repositório foi há 15 anos, então não foi algo feito às pressas por causa da notícia
    • Sim, foi ele quem inventou esse algoritmo
      Acho que provavelmente é uma homenagem
      Corrigindo de “descobriu” para “inventou”. Veja abaixo

  • Eu queria aprender um pouco mais sobre esse algoritmo, então criei https://atkinson.franzai.com/
    Revisei com algumas IAs, então espero que os fatos estejam corretos