Convert photos to Atkinson dithering
gazs.github.ioStill my favorite B&W dither algorithm.
The university had a B&W flatbed scanner attached to a Mac running ... a Hypercard stack? that allowed you to scan an image and get a B&W image.
A clipart book I picked up from the college bookstore and a quick scan and I had a "logo" for the Mac shareware games I started writing in 1988 or so.
At the time I didn't;t realize how really ... nice .. Atkinson's algorithm is. But when, later, I tried dithering with other algos I saw how nice the diffusion was in Bill's code.
More recently I was playing with an eInk calendar project and wanted an "Atkinson-esque" series of images of the Moon in various phases. So I found a site very like the linked one to Atkinson-dither the moon photos I found [1].
[1] see the moon in screenshot: https://github.com/EngineersNeedArt/SystemSix/blob/10f2332b5...
That is honestly beautiful! Is there a place where I could see some of Bill's code? I would like to perhaps play around w it on my own time and learn a thing or two!
Don't click the "as follows" in the info dialog. Looks like this wasn't updated in a while and since then the link became NSFW.
There's no guarantee that the site's creator is (or becomes) aware of this thread, so when possibly it's nice to give them a heads-up! I have just done so: https://github.com/gazs/canvas-atkinson-dither/issues/2
It's been updated and now goes to the correct page
The implementation is excellent, and could be slightly improved by giving a default name and .png extension to the downloaded file, by passing a value to the "download" property on the anchor. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...
In his defence, that attribute has been available in browsers since March 2017 according to your link [1], whereas the most recent commit in the repo for the dithering tool was in March 2016 by the looks of it.
https://github.com/gazs/canvas-atkinson-dither
He’s still active on GitHub though, in other repos. Maybe he will accept a pull request? :)
[1]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorE...
Oh, I assumed it had been recently built and probably posted today by its author given the news and the lack of a year in the title. I'll open a PR.
edit: I might open a PR. 'CoffeeScript...now there's a name I've not heard in a long time. A long time...'
> CoffeeScript
It was acceptable in the 2010s
It was acceptable at the time
:p
Nor have I said there is anything wrong with it, only that it's been a long time. So reflexively to equate calling something old with calling it bad seems like a young man's game, but it has been some time since I had close experience of being one of those, also.
It’s a reference to the linked song. One of my favorite songs :D
CoffeScript? This is the kind of task where a coding agent should be helpful.
For a tiny PR where 90% of the complexity will most likely be resurrecting an ancient toolchain?
I guess it was originally nostalgia for early Mac, and resurfaced because Bill Atkinson had just died.
I really enjoyed this article thank you for linking it.
Then you might enjoy this one, too:
Here's one I've been working on and off that lets you convert multiple images to MacPaint in a 400k MFS formatted disk image.
https://github.com/minorbug/mfsjs
I've had this project gathering a light layer of dust in my home directory for a couple months now. I used Gemini Deep Research to help produce the library, and I included the LLM-generated markdown for anyone who wishes to reproduce on other languages, improve upon it, etc.
> MacPaint images have a fixed format: 576 x 720 pixels resolution
Were they really fixed? It says this on wikipedia, but there's no citation.
This implementation is great and the interface brings back memories.
I was wondering why my Atkinson dithering web-component[0] was getting more hits today - sad news. I’ve always thought that Atkinson dithering produces the nicest images on really crisp monitors like the original Mac - something about it just looks cool and 80s which is why I used it in a game last year.
[0] https://sheep.horse/2023/1/improved_web_component_for_pixel-...
Dithering at the pixel level on a retina screen is quite something. I quite like the style on some pictures, not so on others. They have a weird modern old-fashioned look and the individual dots are not as distracting as in actually old pictures.
Thanks. I originally just wanted pixel-to-pixel dithering (quite difficult with modern browsers and retina class displays) but after I saw the results I knew I needed to add lower resolutions as well. It looks really good with some images, especially photos with lots of details - almost like a high-quality printed magazine. However you are right that the extra detail can be distracting to the eye.
Woah cool web component!
If you want to do this in Python, there's:
When I scroll, the images in the README get a brown color.
Would be great for eink/epaper devices.
Is it the same Atkinson that died today and is this a tribute ?
In a sense, but the first commit in the repository was 15 years ago - it's not something that someone whipped up in response to the news.
I adore dither as a tool for my designs. Kudos to Atkinson and everyone involved in the introduction of these algos. They mean a whole world of childhood to me, and a lot more.
p.s. dithermark.com is super cool also.
Yes, he invented* the algorithm. One assumes it must be.
* Corrected from 'discovered;' see below.
Invented the algorithm. The choice and arrangement of weights is a matter of fine-tuning to balance practical concerns - not some natural law of mathematics that could be figured out.
I would have thought such a simple combination would have been worked out much earlier. But I checked my 1993 copy of Robert Ulichney's "Digital Halftoning", and it only mentions 4. Floyd and Steinberg (1975), Jarvis, Judice, and Ninke (1976), Stucki (1981), and Stevenson and Arce (1985). Does anybody have a date for Atkinson's?
It was used on the Macintosh at release, so it must have predated Stevenson and Arce. I doubt that a description was formally published in the way that the others were. Wikipedia describes Atkinson's approach as a variant on Floyd-Steinberg dithering, and I imagine that he must have been aware of at least some of the prior work.
The algorithm, including the precious weights, can exist outside our universe. It doesn’t need matter, it only needs maths.
Discovered is correct.
Bold to say anything "can exist outside our universe" as though one were in a position to know. Do you often visit the Realm of Forms?
Every single time when I talk to the librarian he takes me there - cheap, too, he only asks for some bananas.
That's a good clarification
I appreciate the correction.
I wanted to learn a bit more about that algo, so https://atkinson.franzai.com/ - I double checked through some AIs so I hope it is factually correct.
A similar tool I wrote several years ago: http://beyondloom.com/tools/dith.html
Cute UI! GitHub link of demo: https://github.com/gazs/canvas-atkinson-dither
I just converted my home stereo. Pioneer, so lots of brushed metal. It looks really great at 2560x1440. Great dither.
What am I doing wrong? I import a photo, I click save to desktop, and I get an unidentified file in an unknown format.
I believe the file is missing a name and extension. If you rename the file with .png extension, then it works.
HA! For some reason it never occurred to me that it would be in a format the original Mac never knew. Thanks!
Interesting that one of the size options is 512x384, not 512x342 which was the original mac resolution.
The very first Mac really was 512x342 [0]
0. https://512pixels.net/2025/05/original-macintosh-resolution/
Edit: Sorry - I misread what you were saying and intended this as a correction, but you had it right all along.
I think that's not a coincidence.
Thanks I tried a bunch of my favorite photos in this too.
Thank you for posting this. Very nostalgic!
Very, very perfect, I love it
Sorry but where did you get the JS/CSS for this? It's so small.
Believe it or not, you can write both CSS and JS by hand.
I do.