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?
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.