Fotos in Atkinson-Dithering umwandeln

 (gazs.github.io)
1 Punkte von GN⁺ 2025-06-08 | 1 Kommentare | Auf WhatsApp teilen
  • Wandelt Fotos in den Stil des klassischen 1-Bit-Filters des Macintosh um und wendet den Atkinson-Dithering-Effekt nur mit schwarzen und weißen Pixeln an
  • Jedes Pixel wird anhand von 50 % Grau zu Schwarz oder Weiß, und der Umwandlungsfehler wird auf benachbarte Pixel verteilt
  • Der Fehler wird auf jeweils 1/8 an 6 Positionen rund um das aktuelle Pixel verteilt und erzeugt so das charakteristische texturierte Schwarz-Weiß-Bild
  • Das Ergebnisbild kann per Rechtsklick gespeichert werden, wegen Browser-Beschränkungen aber nicht per Drag-and-Drop auf den Desktop gezogen werden
  • Für die Implementierung werden Canvas, Drag-and-Drop-Events, WebWorkers und die FileReader-API verwendet; ein aktueller Browser ist erforderlich

Funktionsweise der Atkinson-Dithering-Verarbeitung

  • Diese Implementierung reproduziert den klassischen 1-Bit-Filter des Macintosh, der in Hyperdither und HyperScan verwendet wurde
  • Im Verarbeitungsablauf wird jedes Pixel mit 50 % Grau verglichen und in Schwarz oder Weiß umgewandelt
  • Die Differenz zwischen Eingabewert und Ausgabewert, die bei der Umwandlung entsteht, wird auf benachbarte Pixel verteilt
    • jeweils 1/8 auf die 2 Positionen rechts vom aktuellen Pixel X
    • jeweils 1/8 auf die 3 Positionen von links in der nächsten Zeile
    • 1/8 auf die 1 Position links in der darauffolgenden Zeile

Verwendung der Demo und Browser-Anforderungen

  • Das gerenderte Bild kann per Rechtsklick gespeichert werden
  • Wegen Browser-Beschränkungen kann das Bild nicht per Drag-and-Drop auf den Desktop gespeichert werden
  • Der Code verwendet Canvas, Drag and Drop events, WebWorkers und die FileReader-API
  • Zum Ausführen ist ein aktueller Browser erforderlich

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-06-08
Hacker-News-Kommentare

  • Immer noch mein liebster Schwarzweiß-Dithering-Algorithmus.
    An der Uni gab es einen Schwarzweiß-Flachbettscanner, der an einen Mac angeschlossen war, und vermutlich konnte man mit einem HyperCard-Stack Bilder scannen und daraus Schwarzweißbilder machen.
    Als ich um 1988 anfing, Shareware-Spiele für den Mac zu entwickeln, scannte ich schnell Clipart aus einem Buch, das ich im Uni-Buchladen gekauft hatte, und verwendete sie als „Logos“.
    Damals wusste ich nicht, wie gut der Atkinson-Algorithmus war, aber als ich später mit anderen Algorithmen ditherte, merkte ich, wie gut die Diffusion in Bills Code funktionierte.
    Kürzlich habe ich an einem eInk-Kalenderprojekt gearbeitet und wollte Fotos der verschiedenen Mondphasen als Serie von Bildern im „Atkinson-Stil“ erstellen. Also fand ich eine ähnliche Website wie die verlinkte und wendete Atkinson-Dithering auf Mondfotos an [1].
    [1] Siehe den Mond im Screenshot: https://github.com/EngineersNeedArt/SystemSix/blob/10f2332b5...

    • Wirklich schön! Wenn es irgendwo Bills Code zu sehen gibt, würde ich gern selbst damit herumspielen und daraus lernen.

  • Auf „as follows“ im Info-Dialog sollte man besser nicht klicken.
    Es sieht so aus, als sei es eine Weile nicht aktualisiert worden, und inzwischen ist der Link NSFW geworden.

  • Die Implementierung ist großartig, und sie könnte noch etwas besser werden, wenn man dem download-Attribut des Anchors einen Wert übergibt, damit die heruntergeladene Datei einen Standardnamen und die Endung .png bekommt.
    Siehe: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...

  • Warum nicht Sierra-Dithering?
    https://tannerhelland.com/2012/12/28/dithering-eleven-algori...

    • Ursprünglich ging es wohl um Nostalgie für die frühen Macs, und da Bill Atkinson gerade verstorben ist, scheint es wieder aufgekommen zu sein.

  • Ich baue nebenbei etwas, mit dem man mehrere Bilder in MacPaint umwandeln und in ein 400k-MFS-formatiges Disk-Image packen kann.
    https://github.com/minorbug/mfsjs
    Dieses Projekt staubt seit ein paar Monaten leicht in meinem Home-Verzeichnis ein.
    Gemini Deep Research hat mir beim Erstellen der Library geholfen, und ich habe auch das vom LLM erzeugte Markdown beigelegt, für alle, die es in einer anderen Sprache nachbauen oder verbessern wollen.

    • Dort steht: „MacPaint-Bilder sind ein festes Format mit einer Auflösung von 576 × 720 Pixeln“ — war es wirklich ein festes Format?
      In der Wikipedia steht es auch so, aber ohne Quelle.

  • Diese Implementierung ist großartig, und das Interface weckt Erinnerungen.
    Ich hatte mich gefragt, warum mein Atkinson-Dithering-Web-Component[0] heute mehr Aufrufe bekam; es lag an der traurigen Nachricht.
    Ich habe immer gedacht, dass Atkinson-Dithering auf sehr scharfen Monitoren wie den ursprünglichen Macs die am besten aussehenden Bilder erzeugt.
    Es hat etwas Cooles und einen 80er-Jahre-Vibe, deshalb habe ich es auch letztes Jahr in einem Spiel verwendet.
    [0] https://sheep.horse/2023/1/improved_web_component_for_pixel-...

    • Pixelgenaues Dithering auf einem Retina-Display ist ziemlich ungewöhnlich.
      Bei manchen Fotos passt der Stil ziemlich gut, bei anderen nicht.
      Es wirkt seltsam modern-altmodisch, und die einzelnen Punkte stören nicht so wie bei echten alten Fotos.

  • Wenn man es mit Python ausprobieren möchte, gibt es hyperdither.
    https://github.com/tgray/hyperdither

    • Beim Scrollen werden die Bilder im README braun.

  • Das scheint sehr gut zu eInk/ePaper-Geräten zu passen.

  • Ist das derselbe Atkinson, der heute gestorben ist, und ist das hier eine Würdigung?

    • In gewisser Weise ja, aber der erste Commit des Repositories ist 15 Jahre alt; es wurde also nicht hastig passend zur Nachricht erstellt.
    • Ja, er hat diesen Algorithmus erfunden.
      Vermutlich ist es eine Würdigung.
      Korrektur: „erfunden“, nicht „entdeckt“. Siehe unten.

  • Ich wollte etwas mehr über den Algorithmus lernen und habe deshalb https://atkinson.franzai.com/ gebaut.
    Ich habe es mit einigen AIs gegengeprüft; hoffentlich stimmen die Fakten.