Once upon a time in the 1980’s, computers had 1-bit displays, and the world was in (at least, so we understand from the pictures) gray scale. Those grays were often represented by various types of dithering patterns, of which one of the most classic is Atkinson Dithering.
Atkinson Dithering is named after Bill Atkinson, the developer of classic Macintosh applications MacPaint and HyperCard, where this type of dithering contributed heavily to the look and feel of computer images in the era.
There are already a number of neat applications (listed below) that can perform Atkinson dithering on source images. Today we’re releasing a neat little Processing sketch that takes video from your webcam and performs Atkinson dithering on it in real time, to produce live video continuously processed with the effect.
The net result is quite surprising, because dithered images like these feel like they should only exist in an era long before webcams and computer video. And yet, they move.
The Atkinson dithering algorithm itself is a modified version of Floyd-Steinberg dithering, where the “error” between the intended gray level at each pixel and the black or white dot that is actually drawn at each pixel is distributed to neighboring points.
There are actually two versions of our “mirror dither”program, at different sizes. One runs with full resolution in a modern 800×600 window. The other, shown above slightly reduced, is just 512×342, with rounded corners and a black border— giving you live dithered video, the same shape and size as an original Macintosh screen.
You can download the two versions of our program here. The program is a “sketch” file that runs within Processing, which you can download here for your operating system. (We’ve written and tested it under Processing version 2.0b6; other versions may work as well.)
And as we mentioned, there are also already plenty of good applications that perform Atkinson dithering for still photos:
- HyperDither, a Mac application
- An HTML5 Canvas method
- The 1-bit Camera iPhone app
- A python implementation
- Hyperscan-dither for core image/quartz composer on Mac
- the Dither Line Art Plugin for Photoshop
Here’s one that’s quite a bit faster, by accessing the raw screen pixel array instead of using the point() command: http://pastebin.com/A33DsRMt
Hi,
I would like to thank you Windell a lot for this! It has helped me in making my project to display video on a Nokia 3310 display.
Please take a read at my writeup on it here: http://devjoe.com/?p=265
Hi, I am the author of HyperDither. Your implementation is not entirely accurate… the dither patter should not be aligned to the same angles. My guess is you are not tracing the scan lines in the correct order, perhaps starting from the bottom and ending at the top? If you have to trace in that order, then you will need to flip the dither matrix. HTH.
Whoops! Looks like you are correct! Bug fixed; I’ll post a revised version shortly.