Applying a ColorTransform() to BitmapData is probably the easiest and most predictable of the BitmapData methods. But it still deserves an Explorer.

I needed to create this explorer because I’m looking for ways to increase the contrast of various objects in front of my webcam so that I can effectively track them. Turns out that the getColorBoundsRect() isn’t very effective at tracking moving objects by color because it looks at a specific ARGB color value. Even very slight changes in lighting or orientation throws the tracking out of whack.

Suppose you wanted to track the position of the cursor in a TextArea. You might need to do this if you wanted to provide some contextual information to the user. And if you do so you want to position the message very near to where the user is typing.

The TextArea provides a lot of information and some of it can be used to approximate the location of the cursor but it isn’t precise.  But I did happen upon an idea that gets the position of the last typed character very accurately. Check it out below:

You should be able to see the red dot follow the cursor around. I’m doing this by checking the BitmapData of the TextArea every time the text changes. I then combine that with the BitmapData from the previous change in text and apply a Difference blend mode. You can see that in the black box at the bottom. What is different each time is the last character.

Now I can use the getColorBoundsRect method on the BitmapData to find the x/y coordinates of the last character. Actually, I have to mix in a little threshold magic because the blending doesn’t produce exactly white pixels and the getColorBoundsRect is very picky. You can check out the source code for a full explaination.

I’m reading A³3 – AdvancED ActionScript 3.0 Animation – and having fun making a mess with BitmapData and webcams.

The inspiration for the above code comes from the chapter on Alternate Input: The Camera and Microphone – page 215. The code is pretty much a mess. I’m just playing.

You can see some interesting effects depending on the order that you switch modes. For instance, if you switch from Difference - the default – to alpha then there will be a permanent imprint of what was visible when you switched under the changes to the screen. So you can switch and then move your hand in front of your face and you’ll be able to see an outline of your face behind your hand. It gets even more interesting if you go from Lighten to alpha.

Let me know if you find some interesting mode combinations to try out?

Anyone else think that Difference looks a little like the Agent Smith effect in Matrix Revolutions or is it just me? :)

If you need to add some random noise to your BitmapData then you have two options:

1. myBitmapData.perlinNoise which is sort of smooth gradiations of patterns. Sort of looks like a nebula to me, or
2. myBitmapData.noise which is much like static, just a bunch of randomly colored dots

It is very easy to use each method but how changes in the parameters can change the output isn’t very obvious. So I created this Explorer because that’s what I do. I’m an Explorer of Actionscript. :)

And now…
Now you can go out and make some noise of your own. Maybe something a little more creative than this. Be sure to drop a comment below if you have anything you would like to share.

Notes
The last parameter passed in the perlinNoise method is for an array of offsets. There’s no easy way to add user controls for editing that many possible arrays – one for each octave. Therefor I just left it out since the default is null. I also did a few experiments with adding an offset array behind the scenes without any user control but the change in visual appearance of the output was so small that I didn’t think it was worth the effort. It’s quite possible I wasn’t doing it right so you should play with it yourself.

Coding conventions
In this Explorer I experimented with changing my coding conventions for giving IDs to components. I usually just give components a descriptive ID and I don’t think about the format that much. This time I placed the type of component at the beginning of the ID string followed by an underscore and then a descriptive name. I often get to a point in an method where I need to access a component and I have to remember the name. The Outline panel is helpful but I don’t use it as much as I should. With this convention all I have to do is type in slid… to get the code hinting for all of the slider components and then just pick it out of the lineup.

What do you think of this convention?

The cornerstone to BitmapData is the draw method. That is one of the main ways to get pixels into your Bitmaps. Below is an explorer to allow you to play around with selecting pixels from an image and see them drawn onto the surface below.

Dragging the mouse inputs the values for the Rectangle parameter. The radio buttons to the right allow you to control the BlendingMode and ColorTransformation parameters.

At the very bottom you can see text output of the exact values that went into drawing the pixels into the BitmapData.