AS3: Image Posterization + ColorUtils + Adaptively Colored UI’s

by troy on December 16, 2007

Ported this posterization algorithm to AS3 . It will be in the com.troyworks.ui.ColorUtil, when released.

Posterization is basically compressing the color range of a photo into something smaller. Anybody who has worked with converting to 'indexed color' in GIF or PNG knows what this means. Say you have a sun against a sky of blue.  Since there are only say 8 colors, there is no need to have room for 24bit color across the entire range, making it dramatically smaller.  The other use is for artistic purposes,

Porting one to actionscript has allowed me to create something nifty. One of the design challenges when working with dynamically loaded images is complimenting the colors in the loaded image in the surrounding UI elements., and from a useability perspective making sure that text and UI elements are sufficiently contrasting from whatever dominate color is chosen, else they dissapear...is that "cut or delete?"

So towards that end, I created this prototype, click on one of the indexed colors to change the ui, the text will choose from one of the other color bands. The title will pick either white or black to attempt whatever the best contrast is from the selected color.

Click on any of the colored bars to have the entire UI adjust..all colors originate from the thumbnail.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

This was accomplished by first posterizing the loaded image (the second image) and indexing the colors with a bandpass filter (filtering out anything too black or too white) via com.troyworks.ui.ColorUtil , sorting by how often the color occurs in the image to generate the histogram. Used com.troyworks.core.tweeny.Tny to do the color tweening. com.troyworks.data.ArrayX to get a random color from the bands.

From a design perspective, it's interesting how the low occurance spot colors when selected makes the image seem more 'playful' while the more common dominate ones 'serious'. I find myself wanting to put a better color distance in, to filter out things close to grays from the options.

There are also method to get shades and hues from a given color, but no examples yet.

All in all a fun way to spend a few hours this evening, while listening to Lily Allen.

UPDATE
there are others working on this as well, with great examples
[1a]

http://blog.soulwire.co.uk/flash/actionscript-3/colourutils-bitmapdata-extract-colour-palette/

[1b] http://blog.soulwire.co.uk/flash/actionscript-3/extract-average-colours-from-bitmapdata/#more-165
[2] http://en.nicoptere.net/?p=8 Color Depth

Previous post:

Next post: