Dither All the Things - Atkinson Dithering for the Web

January 19, 2023 7:27 AM

Dither All the Things - Atkinson Dithering for the Web
I think we can all agree that web pages today are too colorful, which is why I have created a web component that crushes your images down to crisp, pixel-perfect dithered black and white. This blog post features an interactive demo - dither your own images and party like it is 1985!

Role: creator

posted by AndrewStephens (14 comments total)

I love this. My first PC was a 12MHz 286 with a 720×348 monochrome Hercules graphics adapter. The display was amber on black, and very high resolution compared to everything else I had used. Very high resolution, but no colour and no shades.

I spent days experimenting with the options for various dithering and halftone image conversion programs. The dithering algorithms were particularly slow, but gave really impressive results. I got very good at taking a lower resolution input image (say 320x200 256 colour) and converting it to a really nice image I could display at full native resolution on my system.

Your project has made me quite nostalgic. And the dithered pictures are beautiful in their own right.
posted by samworm at 12:39 PM on January 19, 2023 [1 favorite]

Thanks Samworm. I was thinking of the original Apple Mac when I conceived this project - coming from 8-bit home computers with colorful but lores graphics, something about the Mac's simple black and white graphics really appealed to me.

It is a mark of how fast computers are these days where a 4000*3000 photograph can be dithered down to 800*600 almost instantly by not very good javascript whereas your old computer would probably take several dozen seconds with optimized assembly.

Getting the dithering just right was surprisingly hard - modern browsers have very good image scaling algorithms that do a fantastic job of making pictures look good at all sizes but really play havoc with dithered images.
posted by AndrewStephens at 1:45 PM on January 19, 2023

Atkinson dithering looks so good, only realised last year when I used it in a project where all the pics are processed with various retro effects.
posted by malevolent at 3:59 AM on January 20, 2023 [1 favorite]

This reminds me of a thing I implemented a year or so ago, which converts a colored image into a B+W animated gif that does dithering in the time dimension - at each frame, each pixel is either black or white with a probability that is equal to the brightness of that pixel in the original image, so darker pixels in the original are black more often, and lighter ones are white more often.
posted by rustcrumb at 3:19 PM on January 22, 2023 [2 favorites]

Rustcrumb, that sounds like a cool way to make an noisy image. Once you get started on image processing it is hard to stop. There are just so many weird effects and even the ones that fail at least look visually interesting.
posted by AndrewStephens at 5:39 PM on January 22, 2023

at each frame, each pixel is either black or white with a probability that is equal to the brightness of that pixel in the original image, so darker pixels in the original are black more often, and lighter ones are white more often.

I just spent a few minutes implementing this in pygame (and then a few more refining it to get more than like 3fps) and it's awesome! A bit like TV snow, but less chunky.
posted by uncleozzy at 12:42 PM on January 23, 2023 [1 favorite]

At the risk of derailing, the great thing about Rustcrumb's dithering scheme outlined above is that it can be easily implemented in a shader (unlike the Atkinson dither I used).

I quickly whipped up this demo using shadertoy.
posted by AndrewStephens at 6:20 PM on January 23, 2023 [2 favorites]

The automatic dithering produces some interesting artifacts as you change the zoom level on the web page (e.g. Cmd-+ and Cmd-- on a Mac). 200% looks fine, but in-between levels produce some oddities. Sometimes very regular square-ish patterns, other times a lot of blue (!) pixels.
posted by jedicus at 10:26 AM on January 25, 2023

I dig this a lot.

As someone who has deployed a public interactive that used Atkinson dither, please be more aware than I was at the time that dithering faces can be inadvertently racist. The world isn't 18% grey, but too many photographic algorithms still assume that.
posted by scruss at 8:45 AM on January 30, 2023

Oh - I wonder if this would be useful with laser "engraving" on painted tile/canvas.... Similar to ImagR
posted by rozcakj at 11:11 AM on February 1, 2023

That is neat, I couldn't place where I had seen images like that, and then the Wikipedia article said the Mac, and I was transported back in time.

One question, I became aware in the last few years that RGB values are not linear in brightness and that translating the 24 bits into an overall intensity involves the gamma curve, one reason that PCs look different than Macs. So does the dithering take the non-linearity of the grey value into account? I guess it wouldn't make much difference if we're only talking about a single bit, but I wonder if you know offhand.
posted by wnissen at 4:27 PM on February 1, 2023

> So does the dithering take the non-linearity of the grey value into account?

Nope, the actual algorithm is pretty simple since it was designed to run fast on 16 bit CPUs. The image is converted to greyscale taking into account the sensitivity of our eyes to different colors (see here for the code) but that is as far as it goes. Each greyscale value is treated as a linear when spreading the error.

I am not sure if it would make much difference to the overall look of the dithering to use a proper gamma curve. Maybe I will try someday.
posted by AndrewStephens at 6:38 PM on February 2, 2023 [1 favorite]

You know, I'm almost certain that you're right that it would have little effect. I mean, our eyesight is a total lie, everything is an illusion (Plato didn't know how right he was), so I would never say absolutely never. But the gamma curve is so smooth locally it's hard to imagine it making a difference. Probably one of those things like where sin(theta) is very close to theta when theta is small.
posted by wnissen at 10:09 AM on February 4, 2023

Late to this but very cool! I like how quickly it (re-)renders images. I recently ran across an iOS app (BitCam, I think) that purports to do something similar but found it more resource-intensive than I would have expected...
posted by gofordays at 10:07 AM on February 13, 2023