September 12, 2005
Flash 8: ColorMatrix

Today I've got something not very spectacular but nevertheless quite useful: a demo of my ColorMatrix class. The new ColorMatrixFilter is a very versatile tool that allows for many color manipulations, many more than the good old ColorTransform was capable of. The only problem with the filter is that in order to use it you will have to feed it with a ColorMatrix which in pratice is an array of 20 elements. Not really the most intuitive way, but that's the price for its flexibility.

Fortunately there's lots of documentation all over the web on how those ColorMatrices work and what numbers you have to put where in order to achieve a certain effect like adjusting the contrast, creating a greyscale version or roating the hue of an image. The ColorMatrix class takes care for all the matrix operations that are necessary to achieve those effects. Here is a little demo of some of its possibilities:

There are some nice things possible that you cannot do with Photoshop. For example setting the saturation to -100 will invert the colors but not the luminance. Or setting the contrast to -200 will invert the image. The little grid on the right side allow to remap the RGBA channels of the image, so for example you can create an alpha channel from the combination of red+green+blue channel. For some effects the application order of the effects is important. In this demo the order is hardwired: hue - saturation - contrast - brightness - alpha - threshold (if selected) - channel mapping.

Download the source files here.

NOTICE: you will find the latest AS3 version of ColorMatrix in the Quasimondo Libs repository on Google code.



Posted at September 12, 2005 05:37 PM | Further reading
Comments

looking forward to the source

Posted by: boldergeizd on September 12, 2005 07:02 PM

Wow ! Best demo of color matrix i ever seen. Nice :)

Posted by: aa on September 12, 2005 07:34 PM

Your ColorMatrix class looks like a 'must-have base class' for Flash 8. Thanks a lot for sharing!

I see that you are using Paul Haeberli's 'luminance vectors'.

r_lum = 0.3086;
g_lum = 0.6094;
b_lum = 0.0820;

As you will be aware luminance vectors/coefficients are not 'eternal', they depend very much on the current technology of our monitors/screens.

Some time ago I found slighly different and a bit newer ones in Charles A. Poynton's 'colorspace-faq' (see point C-9 of http://www.faqs.org/faqs/graphics/colorspace-faq/):

r = 0.212671;
g = 0.715160;
b = 0.072169;

Maybe Haeberli's are based on an older monitor standard? Who has more authority? Is there an organisation somwhere which sets and updates the standard?
I didn't find out. I just opted for Poynton's , with good results.

Cheers!

Posted by: Andreas Weber on September 13, 2005 03:18 PM

Thank for this information Andreas. Looks like I should have researched a bit more - but at least it's better than the 0.3333/0.3333/0.3333 method that you see some people use for greyscale conversion. I will update the class anyway with a few more methods and incorporate those factors (probably as a default, and put Haeberli's in comments)

Posted by: Mario Klingemann on September 13, 2005 03:28 PM

WOW!
I never knew flash could do all that!

Thanks Mario for showing us all the works!

Posted by: Phinny on October 7, 2005 02:43 PM

You've done a great job with this. Thanks so much.

While more often than not I'll probably find great use for this class. Still, I have this undeniable urge to fully understand what's going on under the hood of these matricies.

Can you suggest any other resources for someone (such as myself) who has very little knowledge of matricies?

I've checked that resource link mention, but I still can't grasp why it is those transformations forumals work.

Or maybe looking for too much?

Thanks again,
-David

Posted by: David on November 14, 2005 10:59 PM

Thanks so much for the source code, and all your other work with flash 8 also. You are a wizard, a true star!

Posted by: michael on November 15, 2005 11:27 PM

Yeah, very usefull in the moment. Thanks for sharing the stuff.

Posted by: Jens Franke on November 29, 2005 03:39 PM

great source image, btw. is that code? or yarn?

Posted by: eric on January 10, 2006 01:37 AM

I've been trying to mod your class so that an object stores the matrix info, and then adds and subtracts to the class as only that property is changed. (changing brightness only adds in small increments rather then calculating brightness, contrast,saturation, etc every time one thing is changed) the bad part, is i can't get it to work with some of the more advanced channel stuff! =) you think you could post a mod?

here's somethin i got -- works, but the channels don't work:

public function set _brightness(v:Number):Void {
if (this.__brightness != v) {
var old = 255 * this.__brightness / 100;
this.__brightness = v;
var v = 255 * v / 100;

var mat:Array = new Array(0,0,0,0,v - old,
0,0,0,0,v - old,
0,0,0,0,v - old,
0,0,0,0,0);
this.adjustColor(mat);
}
}

private function adjustColor(mat:Array):Void {
// check matrix adjustment
if (mat) {
var temp:Array = new Array();
var cnt = 19;
do {
temp[cnt] = this._matrix[cnt] + mat[cnt];
} while (--cnt-(-1));
this._matrix = temp;
}
}

var cm = new ColorMatrixFilter(mat);
this.output_mc.filters = new Array(cm);

Posted by: Dan on January 13, 2006 10:36 AM

you know you're right. i'm an idiot =). though i still can't get it to work with a threshold ... doing the following actions doesn't reset the image --- i'm probably still doing something wrong still (thanks for your help by the way, your class rocks =))

the following obviously doesn't work

cm.threshold(100);
cm.threshold(-100);

if you want to turn threshold on or off, they all need to be recalculated correct?

Posted by: Dan on January 13, 2006 09:27 PM

i will try that now -- i switched around all my methods to use yours, some of them are irreversible as well -- contrast and saturation as well.

cm.adjustContrast(30);
cm.adjustContrast(-30);

yeah, that doesn't seem to work for the threshold ..... what i'm trying to achieve is the ability to change a property on a movieclip (such as _threshold) and have it update it's filter to the correct value.

Posted by: Dan on January 13, 2006 09:43 PM

one more note -- i tried doing contrast by setting:

cm.adjustContrast(30);
cm.adjustContrast(0);

and that doesn't work either.

your work is still amazing =)

Posted by: Dan on January 13, 2006 09:49 PM

once again you're totally right. thanks for your help.

Posted by: Dan on January 13, 2006 11:42 PM

Really nice work Mario!! That's exactly what I was searching for...
Just one thing, you're talking about adjustBrightness() with only one parameter, but in your source, the prototype of the methods is :
adjustBrightness(r:Number, g:Number, b:Number)

How come?

Posted by: Julien on January 27, 2006 04:23 PM

Now in this time flash developer have a making
a opreating system in desing in the flash 8.
and call a new opreating system in the world.
This opreating comming release.

Posted by: saif-ur-rehman on February 7, 2006 03:53 PM

Bless your heart!

Posted by: Elor on February 8, 2006 03:51 PM

Mario - How would you code a tween between black & white and color for a bitmap? I'd like to ease a b&w to color.

Posted by: steve w on March 9, 2006 12:44 AM

Mario-What if you had an image and you wanted to replace just a certain range of colors within that image with a new range of colors, kind of like the Replace Color function in Photoshop, can this be done using your ColorMatrix class?

Posted by: Tony Birleffi on March 17, 2006 06:50 AM

You should give it a try; its definitely been a challege for me, I'll try your suggestion. Any future code samples would really help! Thanks again for your prompt feedback.

If I get a working sample going I'll email it to you to post for everyone to see. Its a feature that would be really helpful to know.

Thanks again,

Posted by: Tony Birleffi on March 17, 2006 03:34 PM

Mario-How would you create a duplicate of the already attached bitmap?

Posted by: Tony Birleffi on March 17, 2006 05:52 PM

Mario-That's great thanks!

Posted by: Tony Birleffi on March 17, 2006 06:36 PM

Mario-I can't seem to get pass how the threshold filter needs to work, am I using your version or macromedia's?

Posted by: Tony Birleffi on March 17, 2006 07:11 PM

Mario-That's great how can I view and download it?

Posted by: Tony Birleffi on March 17, 2006 07:29 PM
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Thank you!

Most Visited Entries
Sketches, Works & Source Code
Lectures
Contact
Backlog
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german
Impressum


My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers