How do you adjust hues in AS3 like a real color wheel?

Question

I want to adjust the hue of an art asset from one bright color to another one, keeping the monochromatic features intact. I will be starting with either a RGBYTP (red, green, blue, yellow, teal, or purple) color; then through hue adjustments, I will be able to make it look like each one of the other RGBYTP colored images.

For example, take any one of these colored eyeballs, and through AS3 hue adjustment, be able to make any of those other colored eyeballs. A common technique in web/game design.

_{(source: quadradius.com)}

I often use GreenSock Animation Platform (TweenLite/TweenMax), but both core AS code and the TweenLite engine don't seem to handle hue as I expect. I want to adjust the hue color wheel by an increment of 60 degrees, which should adjust through all 6 secondary colors nicely, and get a full bodied color result from it. But what I actually get is horrendous. In fact, adjusting the hue of an RGBYTP color returns very weird results; earth tones, pastels, even shades of gray.

_{(source: quadradius.com)}

Here is the code I use to generate all those circles with.

    for (var j:int = 0; j < 6; j++) {
        for (var i:int = 0; i < 7; i++) {
            var sprite:Sprite = new Sprite();
            var baseColor:uint;
            if (j == 0) baseColor = 0xFF0000;
            if (j == 1) baseColor = 0x00FF00;
            if (j == 2) baseColor = 0x0000FF;
            if (j == 3) baseColor = 0xFFFF00;
            if (j == 4) baseColor = 0xFF00FF;
            if (j == 5) baseColor = 0x00FFFF;
            sprite.graphics.beginFill(baseColor);
            sprite.graphics.drawEllipse(40 * i + 10, 300 + (60 * j) + 10, 40, 40);// positioning
            addChild(sprite);
            TweenMax.to(sprite, .5, {colorMatrixFilter:{hue:i * 60 }} );
        }
    }

Why do AS3 or TweenLite/Max not handle hues like Photoshop or an artists color wheel? What am I doing wrong?

Answer 1

I suspect the GreenSock platform is using Flash's own fl.motion.AdjustColor, which doesn't perform a particularly great transformation between RGB and HSV, as you've discovered. You have to take into account the perceptual brightness of different colours in order for it to look right, so it's somewhat subjective.

This page has a good explanation and some sample code with scaling values for a much more natural looking hue shift. You can use that to generate a matrix for a flash.filters.ColorMatrixFilter, then you'll probably have to write a function which takes the current tween time and run it onUpdate to use that with TweenMax.

Answer 2

Two colors don't go straight to black on the Real Color Wheel. Yellow goes to brown first and cyan goes to blue first. The brown is reds darkest color before black. Cyan goes to blues darkest color before black. I don't know any java but I sure would like a java wheel like this one. http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

The yellow eye is using the RGB gradation to dark and that's why it looks greenish, the same for the cyan colored eye. I have the coded gradations in a table I made on this website. http://www.realcolorwheel.com/colorwheel.htm You can get the color codes on the source page.

Don, RCW