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.

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);
}

It is very twitchy and erratic, and it’s not very accurate neither, but it works.

Most of the concepts are explained in detail here and there.

My next step would be to track something of a specific color (a marker). Shouldn’t be too hard – I hope.

CLICK TO OPEN MOVIE. Press SPACE to toggle between display modes.

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.

After Googling around, I found this tutorial on Metaballs and computer graphics.

I ported the code into AS3, but the result is not very impressive. It is very slow and processor heavy. If you click on the stage, the last Metaball added will be moved, and as you can see, it takes a bit of time to redraw them. I’m not even thinking about animating this.

I’m still looking for a more elegant solution for Flash, hopefully one that uses the Vector-based drawing API of Flash, and not BitmapData.

UPDATE: I have an updated version here. Also, I linked the image above to the updated one. For comparison, the old one is here.

From this:

mc.graphics.lineStyle(0);
mc.graphics.moveTo(10, 10);
mc.graphics.lineTo(20,10);
//...

To this:

with (mc.graphics) {
    lineStyle(0);
    moveTo(10, 10);
    lineTo(20,10);
    //...
}

Much more readable and easier to type.

Check it out here and bookmark it.

Link.

If anyone knows something better, please let me know. 

I’ve been playing around with Papervsion lately, and have finally understood how to make it work, albeit only lightly. Here is one of my first attempts with Papervision. It’s just a bunch of spheres, where clicking on one will move the camera to its position, while the camera focuses on the center.

It’s not much. I’m still working on it, but I just wanted to post something here. Check it out. Flash Player 10 is required.

Update: I’ve added a depth of field effect. It’s not very “accurate”, but it’s a nice touch. I don’t know how to do it efficiently, so it might be CPU intensive.

Update 2: I’ve added random movement to the particles.

As always, the source.

I finally figured out how to setup external class libraries in FlexBuilder, which took longer than I would have hoped. Now I can use Papervision3D, Away3D and have a central library for all other API’s and classes.  It’s not as enjoyable as FlashDevelop, but, it’s better than nothing.

I also started playing with PV3D, which is just awesome. Very fun to play around with, and I can’t wait to make something I could use for my eternally work-in-progress site.

And finally, there’s a new tweening engine on the block. It’s called gTween and it’s made by Grant Skinner, so you know it’s great. Like TweenLite, it aims for speed and it’s also very lightweight. It’s still in beta, and not as powerful and feature-packed as TweenMax or other tweening engines. I haven’t tested it enough to choose it over TweenLite yet, but, I like it’s different approach to creating and managing (yep, you could manage, edit, reuse and even nest) tweens. Check it out here.

And, yeah, I would post my little “experiment” with Papervision, but I can’t seem to extract/find the swf file. I even tried using the .as file as a Document class to a Flash file, but I still can’t double-click and play the movie.

I am also having trouble with FlexBuilder, whenever I Run/Play button to test a project, it often doesn’t show anything until several retries or not at all, but using the .as file as a Doc class to a Flash file, it plays fine. Any help would be very much appreciated.