a script to change the color depth of a bitmapData.
A couple of months ago, I tried to make a color reduction script. It was based on a series of BitmapData copyChannel / paletteMaps but it caused a lot of artefacts for the script couldn’t manage very low nor very high colors.
So I took it from the start, I tried to replace the paletteMap with thresholds which appear to be much faster. Yet it wasn’t satisfying ; it kept creating temporary bitmaps and batch processing them was still notoriously killling the performances. For instance if I wanted to reduce the color depth by 2 the script would perform (4 * 127) thresholds(one per channel) + the copy operations, which is veeeery bad.
the good thing with this method was when you wanted to decrease significantly the color depth, it could run pretty well. with 20 or 24 thresholds in all, the speed was convincing.
But I started manipulating the pixels themselves. no more channel splitting which really did good.
First I tried with the ByteArray and my conclusion is that it is much much slower than a get/setPixel on a locked BitmapData. and it was indeed a bad surprise…
So I resigned myself to use the good old getPixel, perform a mathematic operation and then setPixel. And it works pretty well, of course the processing time is higher than big threshold reductions but it’s constant(for a given amount of pixels) and more accurate.
see for yourslef:
I didn’t count the colors and I am not clever enough to create a real professionnal, accurate script that would handle color profiles plus I don’t really care in fact, I’m only interested in the graphical output.
so from from left to right and top-down:
- the original BitmapData that is used to perform the tests
- ReduceColors.toCGA( original ) : 8 colors (few! Ican still count to 8 ^^)
- ReduceColors.toEGA( original ) : +/- 64 colors (there are dark shades too)
- ReduceColors.toVGA( original ) : +/- 256 colors
- ReduceColors.toHAM( original ) : +/- 4096 colors
- ReduceColors.toSVGA( original ) : +/- 65536 colors
The class itself is quite idiot-proof, you can choose one of the presets above and use them as follow:
ReduceColors.toCGA( original:BitmapData, grayscale:Boolean, alpha:Boolean )
where original is the original BitmapData, grayscale is a Boolean value to get a grayscale output(wow!) and alpha another boolean that specifies wether the thresholding should be applied to the alpha channel or not. Both are set to false by default.
For the wildests amongst you, you can directly call:
ReduceColors.reduceColors( original:BitmapData, number:int, grayscale:Boolean, alpha:Boolean )
where the additional parameter number represents the number of steps that will be created to replace the original 255. During the process, colors will be snapped to the closest value they can find in the lookup table. And That’s the very thing I ‘m not proud of, to keep both black and white, I forced them in the array by making each step equal to (255/number+2).
This +2, is all but healthy and, even though it works as such, I’m sure that it could be done in a much more elegant way.
finally here’s a demo of a couple of settings to show you how to use the reduceColors() method:
and its little source file: reduceColors
I guess that was it,
enjoy :)
Justin
on Oct 3rd, 2008
@ 1:18 pm:
Hi Nicolas,
Really great blog you have here, I love what you’re doing.
I’ve been messing around with colour conversion / reduction etc at the moment too – working on some different algorithms for producing colour palettes from images.
Anyway! Have you played around with paletteMap? It might be worth looking at integrating it into your script, as, for example, a 350 x 450 image takes about 120ms to parse using getPixel and setPixel; paletteMap takes 4!
Something like:
private function reduceColours( img:BitmapData, number:int = 16 ):void
{
var rA:Array = new Array(256);
var gA:Array = new Array(256);
var bA:Array = new Array(256);
var step:Number = 256 / ( number / 3 );
for (var i:int = 0; i <= 255; i++)
{
bA[i] = Math.floor(i / step) * step;
gA[i] = bA[i] << 8;
rA[i] = gA[i] << 8;
}
img.paletteMap( img, img.rect, new Point(), rA, gA, bA );
}
nicoptere
on Oct 5th, 2008
@ 10:58 am:
hi,
thanks for the nice words. knowing your work, it’s really gratifying :)
indeed the paletteMap is (much) faster.
thanks for your neat piece of code :)
I think Math.floor() is way slower than an int() transtyping but that would not make a huge difference on such a small array ;)
when I was young and beautiful, I did this :
first attempt
don’t ask me why but I came to process each channel separately which, in terms of performances is not likely to be the fastest way.
plus there’s a little something about luminosity at threshold 128 that I couldn’t explain myself. the whole picture is suddenly dimming then becomes brighter… a guy is also giving a piece of code in he comments which appears to be faster than mine, even with a get/set pixels ! life’s hard sometimes.
AS3 Colour class for extracting the color palette from a BitmapData image or photo, ColourUtils.as
on Oct 11th, 2008
@ 8:52 pm:
[...] Barradeau has done some really cool things with this, and his Color Depth Change script is really worth checking out. There is another way to do this though, which is actually much [...]
Justin
on Oct 11th, 2008
@ 9:10 pm:
Hey Nic,
Just wanted to let you know that the colour palette algorithm I mentioned in my comment is now up on my site if you fancy taking a look:
http://blog.soulwire.co.uk/flash/actionscript-3/colourutils-bitmapdata-extract-colour-palette/
I’ve given you a shout out too because what you’re doing here is awesome and really useful.
Loving your Delaunay stuff too! It’s funny, this synchronicity! The day before Keith posted his statement about wanting to build a Voronoi diagram I was sketching out a way to do it in Flash – I’ve had the same thing with steering behaviours. Great minds think alike right! Lol.
:)
Keep up the good work dude….
AS3: Image Posterization + ColorUtils + Adaptively Colored UI’s : TroyWorks
on Dec 26th, 2008
@ 8:40 am:
[...] [2] http://en.nicoptere.net/?p=8 Color Depth [...]
Erny
on Jan 15th, 2009
@ 8:46 am:
Hi
Great works !!!!!
are you able to remove red eyes from a photo with your script ?
nicoptere
on Jan 15th, 2009
@ 12:49 pm:
> Erny
thanks :)
i guess removing red eyes from a photo is a bit more complex than simply changing the color depth on the whole picture. it implies for instance spotting the eyes location which is, as far as I know, extremely complex and anyway a bit too heavy for flash.
yet if you find a way to do that, I’d love to have a look at the code :)
atb
Ian
on Jan 21st, 2009
@ 11:02 pm:
Excellent script!
HIDIHO! » PIXEL BENDER #1 color tweaking
on Jul 5th, 2009
@ 11:49 am:
[...] Flash plugin is required to view this object. the very same as my reduceColor class just a whole lot faster and 3 lines [...]
Median Cut « GrgrDvrt
on Nov 18th, 2009
@ 6:45 pm:
[...] réduire le nombre de couleurs de l’image» et je repense à nicoptère qui a fait un truc qui y ressemble. Sauf qu’en fait ce que je veux (va savoir pourquoi) c’est récupérer un nombre précis [...]
[www.164-prod.com]
on Jun 7th, 2010
@ 7:22 pm:
[...] to Quasimondo and is wonderful ColorMatrix Class and Nicoptere to help with the color [...]