Pushing the boundaries

…couldn’t be any simpler!

ActionScript code tricks

Posted by vijayram on January 30, 2007

Continuing with the post, today’s tricks are to do with bitwise operators for manipulation of colours.

After working on the visualizer, it became obvious to me that one needs to know the nitty grittys of assisgning colours and manipulating the same using ActionScript. Working through this reminded me of the days I implemented RSA encryption in FLash 5. Bits, Bytes, hex…..hmm…geek time!

Starting with basics of number theory, we in our day to day life deal with numbers using a base 10. For example, Shilpa Shetty in Celebrity Brother was paid £300,000 for apperance.
300,000 = (3 x 100000)+(0 x 10000)+(0 x 1000)+(0 x 100)+(0 x 10)+(0 x 1)
300,000 = (3 x 10^5)+(0 x 10^4)+(0 x 10^3)+(0 x 10^2)+(0 x 10^1)+(0 x 10^0)

Whilst in computers, everything is represented using base 2 system (ie: 0 and 1).
100010 = (1 x 2^5) + (0 x 2^4) + (0 x 2^3) + (0 x 2^2) + (1 x 2^1) + (0 x 2^0) = 34

Moving on, colours are represented as hexadecimal. This basically means that, it is to the base 16. Simple!. They are represented as: numbers 0 to 9 and the letters A to F. For example, the decimal number 12 is C in hexadecimal.

Colour values in ActionScript is represented using a 32 bit hexadecimal or 4 pairs of hexadecimal digits( one hexadecimal digit = 4 binary digit). I said 4 pairs here, which means each channel makes a hexadecimal pair (Alpha, Red, Green and Blue). Opaque images are 24-bit, with 8 bits for each of its red, green, and blue channels. Transparent images add another 8-bit alpha channel for a total of 32 bits.

So far a 32-bit image, it is AARRGGBB.

Moving on, lets take case of bitwise OR (“|”). Do not confuse this with logical OR. This sets the result bit to 1 if either of the source bits is 1.
0101 OR 0011
= 0111
Several ActionScript gurus use this operator while playing with colours [ eg:graphics.lineStyle(num,0x0033FF|(num << 8)); ]
Lets just put it this way, its a celver way for combining colours. You can use the bitwise OR to combine BitmapDataChannel constants to indicate multiple color channels.
bitmap.perlinNoise(100, 100, 5, 500, false, true, BitmapDataChannel.RED | BitmapDataChannel.GREEN | BitmapDataChannel.BLUE,false, null);

The next operator is shift, Left Shift “<<” and Right Shift “>>”. The left operands value is moved left or right by the number of bits specified by the right operand.
In theory, 00001110 << 2 = 00111000.
Actionscript converts the result to a 32-bit integer, which is good in our case for colours.
Shift operators discard anything after the decimal place, so shifting by zero provides a faster way to floor your numbers:
trace(1234.567>>0); // 1234
Now coming back to our bitmap representation, AARRGGBB we know that it is represented as follows: aaaaaaaarrrrrrrrggggggggbbbbbbbb (8 bits for each channel).

Given an RGB colour, if we want to extract only red, we do as follows:
myRed = myRGB >>16; This would move the bits to the right by 16 place, thereby discarding all the G and B bits and we are left with only R :). But its still padded with those trailing zeros.

The next and the last operator we are going to look at is &. Again this is different from logical and”&&”.
The & operator performs a bitwise AND on two integers. Each bit in the result is 1 only if both corresponding bits in the two input operands are 1. For example:
0 1 0 1 0 1 1 0
& 0 0 1 1 0 0 1 0
0 0 0 1 0 0 1 0
This is a clever operator and used for masking. Masking is nothing but to mask the other bits and extract the ones you want. Interesting!
Lets take the earlier example of extracting the red channel, its easier to do with this operator as follows:
var argb:Number = 0xFFAA341B;
var redChannel:Number = (argb & 0x00FF0000) >> 16;
trace(“redChannel: “+redChannel.toString(16)); //output redChannel: AA

Technorati Tags: , ,


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: