FilterHN

Convert photos to Atkinson dithering

438 points

by nvahalik

10 months ago

| past

| 19 comments

| gazs.github.io

| HN

▲

JKCalhoun

10 months ago

[-]

Still 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...

▲

dev_chhatbar

10 months ago

[-]

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!

▲

nedt

10 months ago

[-]

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.

▲

CaliforniaKarl

10 months ago

[-]

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

▲

lionkor

10 months ago

[-]

It's been updated and now goes to the correct page

▲

throwanem

10 months ago

[-]

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...

▲

57473m3n7Fur7h3

10 months ago

[-]

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...

▲

throwanem

10 months ago

[-]

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...'

▲

57473m3n7Fur7h3

10 months ago

[-]

> CoffeeScript

It was acceptable in the 2010s

It was acceptable at the time

https://www.youtube.com/watch?v=dOV5WXISM24

▲

throwanem

10 months ago

[-]

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.

▲

57473m3n7Fur7h3

10 months ago

[-]

It’s a reference to the linked song. One of my favorite songs :D

▲

dolmen

10 months ago

[-]

CoffeScript? This is the kind of task where a coding agent should be helpful.

▲

throwanem

9 months ago

[-]

For a tiny PR where 90% of the complexity will most likely be resurrecting an ancient toolchain?

▲

amai

9 months ago

[-]

Why not Sierra?

https://tannerhelland.com/2012/12/28/dithering-eleven-algori...

▲

p_l

9 months ago

[-]

I guess it was originally nostalgia for early Mac, and resurfaced because Bill Atkinson had just died.

▲

collingreen

9 months ago

[-]

I really enjoyed this article thank you for linking it.

▲

amai

9 months ago

[-]

Then you might enjoy this one, too:

https://surma.dev/things/ditherpunk/

▲

minorbug

10 months ago

[-]

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.

▲

kristianp

9 months ago

[-]

> 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.

▲

AndrewStephens

10 months ago

[-]

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-...

▲

kergonath

9 months ago

[-]

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.

▲

AndrewStephens

9 months ago

[-]

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.

▲

shrinks99

10 months ago

[-]

Woah cool web component!

▲

amelius

10 months ago

[-]

If you want to do this in Python, there's:

https://github.com/tgray/hyperdither

▲

kinduff

10 months ago

[-]

When I scroll, the images in the README get a brown color.

▲

kgbcia

10 months ago

[-]

Would be great for eink/epaper devices.

▲

larodi

10 months ago

[-]

Is it the same Atkinson that died today and is this a tribute ?

▲

zahlman

10 months ago

[-]

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.

▲

larodi

10 months ago

[-]

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.

▲

throwanem

10 months ago

[-]

Yes, he invented* the algorithm. One assumes it must be.

* Corrected from 'discovered;' see below.

▲

zahlman

10 months ago

[-]

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.

▲

mark-r

9 months ago

[-]

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?

▲

zahlman

9 months ago

[-]

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.

▲

baq

9 months ago

[-]

The algorithm, including the precious weights, can exist outside our universe. It doesn’t need matter, it only needs maths.

Discovered is correct.

▲

throwanem

9 months ago

[-]

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?

▲