Bitmap hue shift with custom palette? Help!

[frankichiro]

Hi everybody!

So I've got this idea, but I don't know how to do it.

How do you shift the colors of a bitmap image, with a red/yellow cloud, so that red becomes orange, then yellow, then orange, then red again? The yellow should go trough the same process, but start and end with yellow. Same with all the other colors in between.

Kind of like when you play with the hue-setting in photoshop, but instead of looping trough the whole spectrum, it only loops trough red>orange>yellow>orange>red.

I can't seem to find any good tutorials of this. Do you know how to do it? I'd really appreciate your help!

/ Frank

[cbeech]

there are several methods to achieve this, but mainly the colorTransform class, the bitmapData class palletMap() method or the colorMatrixFilter(), it will depend on the effect you wish to achieve. so here's a little something to play with:


var ctrans:ColorTransform = new ColorTransform();
var rate:Number = 0.01;

function transition(e:Event):void {
ctrans.redMultiplier += rate;
pic.transform.colorTransform = ctrans;
}
addEventListener(Event.ENTER_FRAME, transition);

now of coures the above will run 'continuously' - you'll want to choose a 'level' to stop at, and you'll then a system to transition to another color., but it should get you going.

[frankichiro]

Thanks cbeech, but that didn't really give me the effect I was looking for.

Example: http://img.photobucket.com/albums/v244/MCVegetto/Misc/Garou_Busta_Wolf.gif

Look at the start of the animation, when the yellow fades away. I'd like to do something like that, but with red instead of black.

Another example: http://burndiego.com/kof/orochi-intro.gif

When the blue stuff happens, look at the sphere at the bottom. See how the color shifts? That's what I want.

Now, I've discovered bitmapData.threshold, which seems to be the answer, but I can't seem to figure out how it works!

I have a test image, and I can select all the pixels of a certain color, but they just turn black no matter what colors I set for the parameters. Can someone please explain how to do this?

Here's what I have:

image.bitmapData.threshold(original, rect, pt, "==", 0xFFFEC8, 0x0000FF, 0xFFFFFF, true);

So, I'd like to make every pixel with the color "0xFFFEC8" to become "0x0000FF", but they just become black. What am I doing wrong, and what is the third color for anyway?

Please help!

/ Frank

[cbeech]

cool - yeah i thought you wanted to transition the 'entire' image - so yeah threshold (which i didn't mention) is a good way to do it. the issue is that you need to use 32 bit ARGB values in the parameters, so like:

image.bitmapData.threshold(original, rect, pt, "==", 0xFFFFFEC8, 0xFF0000FF, 0xFFFFFFFF, true);

[frankichiro]

Oh, I see! Yes, now it's working, thank you!

However, I think I've figured out exactly what I want now. It's called a Gradient Map! That's what you use in Photoshop at least, in order to achieve the effect I'm looking for.

I want to start with a grayscale image, and a gradient between two or more colors. Then, I'd like to make the grayscale image cycle trough the gradient colors, with an offset loop. The darkest pixels in the grayscale image should be replaced with the first color of the gradient, and the brightest with the last color, and so on with the pixels in between. Then, I just shift the gradient, and the whole image shifts with it. Get it?

If I shift the gradient 50%, the whole image should appear "inverted", but still have the same colors as the gradient. The colors should be reversed.

So, how do you match color to pixels like this? It's a challenge, right? :D

Any suggestions?

[cbeech]

LOL! yeah but nothing is impossible! look into the palletMap() method of the bitmapData class - i think that may be what you need here ;)

[frankichiro]

Weeeeeee, I did it!

Couldn't find any palletMap method, but I figured it out anyway!

I've included the final result, if you want to see it in action, and here's the code:


var spectrum:Array = new Array(4294939148,4294949413,4294956095,4294959192, 4294962036,4294964115,4294965416,4294966460,429496 7244,4294966460,4294965416,4294964115,4294962036,4 294959192,4294956095,4294949413);
var grayscale:Array = new Array();

var originalData:BitmapData = new Bang(640, 480);
var bitmap:Bitmap = new Bitmap();

var timer:Timer = new Timer(10, 0);
var rectangle:Rectangle = new Rectangle(0, 0, 640, 480);
var point:Point = new Point(0, 0);
var firstColor:uint;

addChild(bitmap);

for (var i:uint, c:uint, r:uint; i < 640*480; i++, c = i/640, r = i%640) {

var pixelColor:uint = 0xFF000000+originalData.getPixel(r, c);
if (grayscale.indexOf(pixelColor) == -1) grayscale.push(pixelColor);

}

grayscale.sort(Array.NUMERIC);

function transition(e:TimerEvent):void {

bitmap.bitmapData = originalData.clone();

for (var i:uint = 0; i < 16; i++) {

bitmap.bitmapData.threshold(bitmap.bitmapData, rectangle, point, "==", grayscale[i], spectrum[i], 0xFFFF0000, true);

}

firstColor = spectrum.shift();
spectrum.push(firstColor);

}

timer.addEventListener(TimerEvent.TIMER, transition);
timer.start();Note that "new Bang(640, 480)" is including an image from the gallery, exported for actionscript with the ID Bang. This image is saved with 16 colors only, in order to match the color spectrum that consists of 8 colors. The 8 colors are repeated in reverse at the end of the spectrum, to make it 16 in total. Thus, we have 16 original colors, and 16 replacements. The code applies all the replacement colors over their respective original colors, and then shifts the spectrum one step, so they match differently next time around.

The effect that inspired me was the KO background in Street Fighter IV that has just been released. Check out this clip, at the 1:10 mark: http://www.youtube.com/watch?v=5nSMK-GatHY

Pretty cool, right? I'm going to use it for my own game I've been working on. Can't tell you more about it though because it's a secret. ;)

Thanks for all the help!

/ Frank

[cbeech]

LOL! right on - good job, looks great! yeah I totally misspelled the method name: paletteMap() still might help down the road - good gaming :D