Color Mixer Flex App Updated

I’ve updated my Color Mixer application. Right now it is as good as done. It’s not the best looking, but all the functionality is working fine. If there are any suggestions on how to improve it, I’d be glad to hear them.

I am still working on the AIR version. It’s taking a while figuring out how to skin components properly (the gradient sliders clearly show this).  And it seems that taking a screenshot of the desktop is not possible on AIR, which is a shame because I was really looking forward for the feature to take any color on screen. Unless I find a workaround for this, I’m going to have to leave that feature out.

I hope someone finds this useful, as I know I do. Here it is.

On different note, this post was posted from Windows Live Writer. I’m liking it very much. I hope everything displays fine.

RGB to Hexadecimal to HSV conversion in AS3

In my previous post, I needed to do a lot of conversion between different representations of color. I think a post on how to convert color would be useful.

private function RGBToHex(r:uint, g:uint, b:uint):uint{
    var hex:uint = (r << 16 | g << 8 | b);
    return hex;
}

private function HexToRGB(hex:uint):Array{
    var rgb:Array = [];

    var r:uint = hex >> 16 & 0xFF;
    var g:uint = hex >> 8 & 0xFF;
    var b:uint = hex & 0xFF;

    rgb.push(r, g, b);
    return rgb;
}

private function RGBtoHSV(r:uint, g:uint, b:uint):Array{
    var max:uint = Math.max(r, g, b);
    var min:uint = Math.min(r, g, b);

    var hue:Number = 0;
    var saturation:Number = 0;
    var value:Number = 0;

    var hsv:Array = [];

    //get Hue
    if(max == min){
        hue = 0;
    }else if(max == r){
        hue = (60 * (g-b) / (max-min) + 360) % 360;
    }else if(max == g){
        hue = (60 * (b-r) / (max-min) + 120);
    }else if(max == b){
        hue = (60 * (r-g) / (max-min) + 240);
    }

    //get Value
    value = max;

    //get Saturation
    if(max == 0){
        saturation = 0;
    }else{
        saturation = (max - min) / max;
    }

    hsv = [Math.round(hue), Math.round(saturation * 100), Math.round(value / 255 * 100)];
    return hsv;

}

private function HSVtoRGB(h:Number, s:Number, v:Number):Array{
    var r:Number = 0;
    var g:Number = 0;
    var b:Number = 0;
    var rgb:Array = [];

    var tempS:Number = s / 100;
    var tempV:Number = v / 100;

    var hi:int = Math.floor(h/60) % 6;
    var f:Number = h/60 - Math.floor(h/60);
    var p:Number = (tempV * (1 - tempS));
    var q:Number = (tempV * (1 - f * tempS));
    var t:Number = (tempV * (1 - (1 - f) * tempS));

    switch(hi){
        case 0: r = tempV; g = t; b = p; break;
        case 1: r = q; g = tempV; b = p; break;
        case 2: r = p; g = tempV; b = t; break;
        case 3: r = p; g = q; b = tempV; break;
        case 4: r = t; g = p; b = tempV; break;
        case 5: r = tempV; g = p; b = q; break;
    }

    rgb = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    return rgb;
}

The code above requires and returns:

• RGB values between 0 to 255
• Hexadecimal in RRGGBB format
• Hue values between 0 to 360
• Saturation and Value between 0 to 100

Notice that the “middleman” is RGB.

And, just in case you only have the Hexadecimal string to work with, here is the code to convert that string into a usable decimal value.

private function HexToDeci(hex:String):uint{
	var deci:uint = 0;
	var power:uint = hex.length - 1;
	for(var i:uint = 0; i < hex.length; i++){
		var char:String = hex.charAt(i);
		if(parseInt(char) >= 0 &&  parseInt(char) <= 9){
			deci += parseInt(char) * Math.pow(16, power);
		}else{
			switch(char){
				case "A": case "a":	deci += 10 * Math.pow(16, power); break;
				case "B": case "b":	deci += 11 * Math.pow(16, power); break;
				case "C": case "c":	deci += 12 * Math.pow(16, power); break;
				case "D": case "d":	deci += 13 * Math.pow(16, power); break;
				case "E": case "e":	deci += 14 * Math.pow(16, power); break;
				case "F": case "f":	deci += 15 * Math.pow(16, power); break;
			}
		}

		power --;
	}
	return deci;
}

EDIT: I’ve just gathered that there is a much much simpler way to convert a Hexadecimal string into a usable number. I feel kind of stupid right now.

private function HexToDeci(hex:String):uint{
        if (hex.substr(0, 2) != "0x") {
                hex = "0x" + hex;
        }
        return new uint(hex);
}

Metaballs update

Still delving into metaballs. I implemented the suggestions in this page for optimizing, and the results are good. I could even animate it – just barely though, at ~15 FPS on my browser.  Again, most of this is just copy & paste from the source provided in the tutorial.

Metaballs – move your mouse around.  Click to change the target ball.

Still looking for a more elegant solution for Flash. This is done on a very small stage size, with only 4 balls. I want to do a full screen version, with at least 10 balls moving around.

RGB seperation test

After seeing a cool demo from the ClockMaker blog, I was inspired to try and recreate the effect. My attempt is not very impressive, but I did manage to figure out how he did it. Although much of this is from his sourcecode, I just thought I’d post a simplified version and put little comments and stuff.

And oh, Merry Christmas to all!

Click the image to see the movie.

Source.

[Learn] A “pixelating” effect on a Bitmap

I did a little experimenting with the BitmapData class, and came up with this.
I found this effect from a gallery somewhere, and thought it would be cool to try my hand at it, for learning purposes.

Click on the image below to see the effect.

What’s happening is, I get the size of the image, divide it by the size of the “pixels” I want, then create an array of Rectangles positioned in a grid over the image.
I then fill each Rectangle with the color of the pixel in it’s center by using the getPixel() and fillRect() methods of the BitmapData class.
Here is the central function doing the pixelating.

private function pixelate(bitmap:Bitmap, strength:Number):void {
var _x:int = 0; // position of the rectangle
var _y:int = 0;
if (strength > 1){
_strength = 1;
}
var _strength:Number = strength; // multiplier for size of "pixels"

var _w:Number = bitmap.bitmapData.width * _strength; //size of "pixels"
var _h:Number = bitmap.bitmapData.height * _strength;

var nH:int = Math.ceil(bitmap.bitmapData.width / _w); // number of rectangles needed horizontally
var nV:int = Math.ceil(bitmap.bitmapData.height / _h);// number of rectangles needed vertically

var rectangles:Array = []; // Rectangles array

//create rectangles
for (var i:int = 0; i < nV; i ++){
var targH:Number = _h;
if (i >= nV - 1){
targH = bitmap.bitmapData.height - _y;
}
for (var j:int = 0; j < nH; j ++){
var targW:Number = _w;
if (j >= nH - 1){
targW = bitmap.bitmapData.width - _x;
}
rectangles.push(new Rectangle(_x, _y, targW, targH));
_x += _w;
}
_x = 0;
_y += _h;

}
//fill in rectangles
for (i = 0; i < rectangles.length; i++){

var rect:Rectangle = rectangles[i];
var pix:uint = _states[0].getPixel((rect.x + rect.width / 2), (rect.y + rect.height / 2));
bitmap.bitmapData.fillRect(rect, pix);
}

saveCurrentState(bitmap.bitmapData);

}

Now for the reverting to the original image part, I had to improvise. Since I overwrote the BitmapData with a bunch of filled rectangles, I couldn’t do much with it.
So I used an array which stores each “state” the BitmapData is in. And I could just retrieve the BitmapData in the array and copy it into the original BitmapData.

private function saveCurrentState(bitmapData:BitmapData):void {
_states.push(bitmapData.clone());
}
private function revertToState(stage:int):void {
try{
bmData.copyPixels(_states[stage], bmData.rect, new Point(bmData.rect.x, bmData.rect.y));
}catch (e:Error){
throw new Error("Invalid state. ");
}
}

To create the animation, I just called the pixelate() function through a Timer at 300 milliseconds.

Slideshow on ActionScript 3

Just found this great resource for learning AS3. It is a slideshow created by Grant Skinner showing the basics of the language and some optimization tips. Each page worth an article itself, all 167 of them. It not only sounds good, it looks good.

http://gskinner.com/talks/as3workshop/

A little heads-up about the Flash Player 9 Garbage Collector

I want to give a heads-up to all those just beginning with AS3 about how it handles memory. I had to find out about this the hard way, and now have to redo a lot of stuff.

Flash Player 9 introduced a new system management feature called a garbage collector (GC). Basically, what it does is “sweep” for objects that can not be used/accessed anymore, and delete them, freeing memory. Until those ‘null’ objects are removed by the GC, they will sit in memory until the Player is closed.

So, whenever you want something to be deleted (escpecially with CPU intensive particle systems), you must be aware of what and where you are referencing your objects, so you could easily remove them.  You have to do this by hand. One method is to set all objects you want to delete, and all references to it,  to null. Even then, you have to wait for the GC to do its “sweeping motion” for those objects to be deleted.

Another thing to watch out for are event listeners. Make sure you remove any listeners (by calling removeEventListener()) from objects you want to delete, since they also hold a reference to your objects.

Check this article series for more details and info about the GC and resource management in Flash Player 9/AS3.

And lastly, it is about unloading external swf’s through Loader. You might think that using unload() from a Loader would remove that swf completely, but that isn’t the case.  In fact, unload() does a pretty poor job at “unloading” swfs. Here is a quote from another article that explains this in great detail:

In AS3, calling Loader.unload() simply removes the reference to the loaded movie. If any other references exist to the loaded content, it will not be unloaded.

My site has been delayed by almost a month now, trying to figure out and fix my memory leak problem. I finally have an idea of what’s wrong, now I have to figure out a solution.