Playing With Colors!

We have studied about colors in the 10th standard physics. There are 3 basic or primary colors, Red(R), Green(G),  Blue(B). Any other color, or a secondary color, is just a combination of these colors, taking single, any two or all three at a time. We have a few common color formations as follows:

R+G ==> Yellow
G+B ==> Cyan
B+R ==> Magenta
R+G+B ==> White

In a rainbow, out of the 7 colors, 3 are primary, and the rest are secondary. Any colored thing that we see, has its own RGB component, and its color visibility depends on the intensity of each component.

Like, if we observe any image by enlarging it, we would find numerous pixels. Apparently, an image is the result of pixel-clustering. Every pixel has it's own RGB component, which provides a color to that pixel. That is how we see the image in various colors.

Flash provides a good option to change the color of any object both at the time of compilation, as well as run-time. Changing the object color at compile-time can be done by using the Flash CS3/ CS4, the same way we do it in Microsoft-Paint. For run time color effects, we have "ColorMatrixFilter", an in-built class in AS3. The constructor of this class takes an array as its argument. The array has 20 elements in it for a 4X5 color transform.

The first five elements of the array are worked upon to calculate the "Red Result" of the pixel, next 5 gives the "Green Result", then next 5 gives the "Blue Result" and finally, the last 5 give the "Alpha Result" of the object. For instance:

Let the array be:
a = [1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0];

or

a = [1,0,0,0,0, 0,1,0,0,0, 0,0,1,0,0, 0,0,0,1,0];

or

a = [1,0,0,0,0,   /* Red */
     0,1,0,0,0,   /* Green */
     0,0,1,0,0,   /* Blue */
     0,0,0,1,0];  /* Alpha Transparency */

All the above 3 notations of color matrix are the same. For each color value in the array, a value of 1 is equal to 100% value being sent to the output.

If sR, sG, sB, sA are the respective red, green, blue and alpha components of each pixel, then "Red Result", "Green Result", "Blue Result" and "Alpha Result" are calculated as follows:

redResult   = (a[0]  * sR) + (a[1]  * sG) + (a[2]  * sB) + (a[3]  * sA) + a[4]
greenResult = (a[5]  * sR) + (a[6]  * sG) + (a[7]  * sB) + (a[8]  * sA) + a[9]
blueResult  = (a[10] * sR) + (a[11] * sG) + (a[12] * sB) + (a[13] * sA) + a[14]
alphaResult = (a[15] * sR) + (a[16] * sG) + (a[17] * sB) + (a[18] * sA) + a[19]

All the 4th elements of each row in the above matrix, can have values between 0.0 to 1.0 (0.0 for no visibility and 1.0 for maximum visibility).

a[4], a[9], a[14] and a[19] are the offset values. As we already know, that any color-effect has a range of 0-255 (0 gives no color effect and 255 gives maximum color effect), so an offset, between -255 and 255, can optionally be added to each result.

Adding more fun to the matrix:

Suppose, we want all the green values in the pixels, to show the red color effect, the resultant matrix would be of like:

a = [1,0,0,0,0,   /* Red */
     1,0,0,0,0,   /* Green */
     0,0,1,0,0,   /* Blue */
     0,0,0,1,0];  /* Alpha Transparency */

The brightness of the image is increased on adding the offset value between 0 to 255, and can be decreased the same way by using offset values between -255 to 0. For example:

Matrix for a more bright image:
[1,0,0,0,25,  /* Red */
 0,1,0,0,25,   /* Green */
 0,0,1,0,25,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

Matrix for a less bright image:

[1,0,0,0,-25,  /* Red */
 0,1,0,0,-25,   /* Green */
 0,0,1,0,-25,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

Like this, we can give multiple color and brightness effects to any image or object.