- Dieses Projekt implementiert Atkinson Dithering, den klassischen 1-Bit-Filter des Macintosh, im Web
- Das Eingabebild wird mit 50-%-Grau verglichen und in Schwarzweiß umgewandelt, anschließend wird die Differenz auf benachbarte Pixel verteilt
- Es nutzt moderne Browser-Technologien wie Canvas, Drag & Drop, WebWorkers und FileReader
- Das konvertierte Bild kann per Rechtsklick gespeichert werden
- Das Speichern per Ziehen des Bildes wird aufgrund von Browser-Beschränkungen nicht unterstützt
Bedeutung und Alleinstellungsmerkmale des Open-Source-Projekts
- Atkinson Dithering ist ein klassischer Macintosh-Grafikeffekt, der in Hyperdither und HyperScan verwendet wurde
- Komplexe Farbinformationen eines Bildes werden auf Pixelebene vereinfacht umgewandelt, was für die Erzeugung leichtgewichtiger Schwarzweißbilder nützlich ist
- Durch die webbasierte Implementierung ist die Nutzung ohne zusätzliche Software allein mit einem modernen Browser möglich
- Über WebWorkers sind bei der Verarbeitung großer Bilder asynchrone Ausführung und Performance-Optimierung möglich
- Als Open-Source-Code lässt sich das Projekt leicht erweitern und anpassen
Überblick über den Atkinson-Dithering-Algorithmus
- Jedes Pixel wird mit einem 50-%-Grauwert verglichen und in Schwarzweiß umgewandelt
- Der durch die Umwandlung entstehende Differenzwert wird wie folgt auf 6 benachbarte Pixel verteilt
(X: aktuelles Pixel, Verteilung jeweils 1/8)
- X 1/8 1/8
- 1/8 1/8 1/8
- 1/8
- Auf diese Weise wird der Dithering-Effekt auf das gesamte Bild angewendet
Implementierung und Nutzung
- Bilddateien werden per Drag & Drop in den Browser gezogen oder über die Dateiauswahl geladen
- Mit der Canvas-API wird das Bild in Echtzeit konvertiert und gerendert
- FileReader wird zum Einlesen der Bilddaten verwendet,
- WebWorkers führen die Dithering-Verarbeitung im Hintergrund aus
- Das konvertierte Bild kann per Rechtsklick gespeichert werden
(aufgrund von Browser-Einschränkungen kann das Bild nicht direkt per Ziehen auf den Desktop gespeichert werden)
Tech-Stack und unterstützte Umgebung
- Es werden aktuelle APIs von HTML5 und JavaScript aktiv genutzt
- Eine moderne Browser-Umgebung ist erforderlich; in älteren Browsern können einige Funktionen eingeschränkt sein
Fazit
- Bietet eine einfache und intuitive Web-Implementierung des Atkinson-Dithering-Filters
- Hohes Einsatzpotenzial in Bereichen wie Grafikentwicklung, Artwork und Bildgewicht-Reduktion
1 Kommentare
Hacker-News-Kommentar
Das ist immer noch mein Lieblingsalgorithmus für Schwarzweiß-Dithering.
An der Uni hatte ich einmal die Gelegenheit, einen Mac an einen S/W-Flachbettscanner anzuschließen und Bilder mit einem Programm ähnlich einem HyperCard-Stack einzuscannen, um Schwarzweißbilder zu erzeugen.
Ich habe ein paar Bilder aus einem Clipart-Buch, das ich im Uni-Buchladen gekauft hatte, schnell eingescannt und sie als „Logo“ für ein Mac-Shareware-Spiel verwendet, das ich ungefähr 1988 zu schreiben begann.
Damals war mir nicht klar, wie cool Atkinsons Algorithmus war, aber später habe ich andere Dithering-Algorithmen ausprobiert und gemerkt, wie großartig Bills Art der Verteilung im Code wirklich ist.
Kürzlich wollte ich für ein eInk-Kalenderprojekt mehrere Mondphasenbilder in den Atkinson-Stil umwandeln und habe dafür eine passende Website gefunden, um Mondbilder zu konvertieren.
Den Link „as follows“ im Info-Dialog sollte man besser nicht anklicken.
Er wurde schon lange nicht mehr aktualisiert und führt inzwischen zu einem NSFW-Link.
Diese Implementierung ist wirklich großartig.
Beim Download könnte man das Erlebnis noch etwas verbessern, indem man dem
download-Attribut des Anchors einen Wert gibt, damit die Datei einen Standardnamen und die Endung.pngbekommt.Siehe auch: HTMLAnchorElement.download-Dokumentation
download-Attribut wird, wie im von dir verlinkten Dokument steht, erst seit März 2017 von Browsern unterstützt.Dagegen scheint der letzte Commit im Repository des Dithering-Tools aus dem März 2016 zu stammen.
Der Autor ist auf GitHub offenbar noch in anderen Repositories aktiv, daher hoffe ich, dass er vielleicht einen Pull Request annehmen würde.
Link: canvas-atkinson-dither GitHub-Repository
Ich habe auch ein Projekt in Entwicklung, mit dem man mehrere Bilder in MacPaint konvertieren und daraus ein Disk-Image im 400k-MFS-Format erstellen kann.
Link: mfsjs-Projekt
Es lag ein paar Monate lang etwas vernachlässigt in meinem Home-Verzeichnis, aber kürzlich habe ich die Bibliothek mit Gemini Deep Research ergänzt.
Für Leute, die das in einer anderen Sprache nachbauen oder verbessern wollen, ist auch von einem LLM erzeugtes Markdown enthalten.
Wenn du Atkinson-Dithering in Python ausprobieren möchtest:
Ich empfehle das Projekt hyperdither.
Die Umsetzung ist toll, und die Oberfläche weckt Nostalgie.
In letzter Zeit stiegen die Zugriffe auf meine Atkinson-Dithering-Web-Component[0], und ich habe mich schon gewundert, warum — dabei gab es diese traurige Nachricht.
Ich persönlich finde, dass Atkinson-Dithering die schönsten Bilder auf wirklich scharfen Monitoren wie dem ursprünglichen Mac erzeugt.
Es hat etwas Cooles und sehr nach den 80ern Klingendes, deshalb habe ich es auch in einem Spiel verwendet, das ich letztes Jahr gemacht habe.
[0]: Pixelgenaue Atkinson-Dithering-Web-Component
Ein ähnliches Tool, das ich vor ein paar Jahren gemacht habe:
Beyond Loom Dithering Tool
Interessant, dass eine der Größenoptionen 512x384 ist, obwohl die Auflösung des ursprünglichen Mac 512x342 beträgt.
Die frühen Macs hatten tatsächlich eine Bildschirmauflösung von 512x342.
Mehr dazu: Auflösung des originalen Macintosh
Korrektur: Ich habe den Inhalt noch einmal gelesen, und tatsächlich hattest du recht.
Das wirkt nicht wie ein Zufall.
Die UI ist niedlich, und auch der GitHub-Link zur Demo ist einen Blick wert.
canvas-atkinson-dither GitHub-Repository
Ist das dieselbe Person wie Atkinson, die heute gestorben ist? Und ist das hier ein Projekt zu seinem Gedenken?
In gewisser Weise schon.
Allerdings ist der erste Commit des Repositories 15 Jahre alt, es wurde also nicht hastig wegen der aktuellen Nachricht erstellt.
Ja, Atkinson selbst hat diesen Algorithmus „erfunden“.
Ich hatte erst „entdeckt“ geschrieben, aber „erfunden“ ist genauer.