OpenSource Image Dithering for AS3. (demo+source).
Intro
As promised in my previous post, here’s a small opensource project from my side. It’s tiny, really, but I hadn’t seen an ActionScript implementation of any form of Image dithering before.
Dithering….what ?
Just a brief explanation what dithering in this context means. From wikipedia :
“Dither is an intentionally applied form of noise, used to randomize quantization error, thereby preventing large-scale patterns such as contouring that are more objectionable than uncorrelated noise.”
Words to take note of in that sentence are quantization, and “intentionally applied form of noise”. In our case quantization is the removal or swapping of colors. The form of noise applied differs over the several implementations and in so called “ordered dithering” it’s hardly noise, rather a carefully chosen threshold matrix.
Dithering, why ?
Dithering imagery has been around for some time. Put a close eye to any black and white printed newspaper’s pictures and you’ll see the effect.
It’s basically been around a lot longer then I have in my 28 years of life…that’s for sure. I first learned terms like “ordered dithering” and “Floyd-Steinberg Error Diffusion” in my young and early days on the Amiga hardware. See, in those days computer hardware wasn’t capable of displaying the huge arrays of colours like now-a-days. Since you then had few colours to spare (a typical amiga workbench ran at 16 to 128 colours or so), you needed to be creative to get yourself a nicely pimped desktop image, whilst still sparing colours for your icons.
A better example of a dithering implementation for our industry is probably that checkbox when you want to save for web in Photoshop, using GIF. Or when you print something on a pure black and white printer.
Conclusion; dithering is normally used to create the illusion of tones on a device which is otherwise not capable of displaying it. So why port this to our ARGB/32Bit enabled Flash Player ? Part of the reason why I worked on this is because I just like the aesthetic of the effect. It just brings back wonderful memories of pimping my Amiga desktop.
Dithering in AS3
So, the algorithms for dithering are really quite simple. I was playing around with hydra Pixel Bender and had some ideas on converting some old algorithms to have them run in realtime. Then I thought I could make this run in realtime on Flash 9. So, first I did a version of the Algo in pure AS3. I played around with converting it to something fast enough to run at at least 20 frames per second on an average machine…and painfully failed. The remains are the AS3 version (hydra Pixel Bender version still in progress)….and I decided to clean that up a bit, and have it released as an OS project for anyone to use.
Currently it only contains so-called error-diffusion based ditherers. They make the most sense anyway, since the ordered ditherers really have nasty visual sideeffects, like Bayer’s crosshatches. Check the variants out in this little demo application using the class.
The Demo : try and use “No Dithering” first to see the effects of regular palette conversion.
Usage :
ImageDithering.dither(bitmapData, type, levels, grayscale);
Where :
BitmapData is the image to be manipulated.
Type is the form of dithering, currently supported :
- ImageDitheringType.FLOYD_STEINBERG
- ImageDitheringType.FALSE_FLOYD_STEINBERG
- ImageDitheringType.STUCK
- ImageDitheringType.NO_DITHER
Levels is the amount of colour levels to quantize to per channel.
Grayscale is a boolean indicating whether to convert the image to grayscale before the process is ran.
Right click and viewsource on the example to see how it’s implemented in Flex.
Quick update : Mario Klingemann, working on Aviary’s Peacock did a quick test with it. My effort had some use anyway!
