Rainbow Math!

Is there a mathematical equation I can use to simulate a color that fades from red to blue (like this).

Basically let’s say I’ve got a line that follows the player that is a solid color. Is there some mathematical equation that I can use to fade this color? I tried:

color++;
currentColor=color%0xFFFFFF;

But it didn’t really give me an effect I wanted.

Look into RGB to HSV transformations. You can do a simple lerp in HSV space to accomplish this. There are probably more complicated ways to get better control over the transition though, such as specifying intermediate colors and whatnot.

As jonathan touched on, you want to look into a colour space that utilises a specific hue variable, which is typically a colour space with H in the name, abbreviating for hue

Color.interpolateColor works for what you’re trying to achieve.

Originally posted by Aaants:

Color.interpolateColor works for what you’re trying to achieve.

Nice, did not know that method existed.

Originally posted by jonathanasdf:

Originally posted by Aaants:

Color.interpolateColor works for what you’re trying to achieve.

Nice, did not know that method existed.

This. I’ve been using some other function I had to find online to mix colors. Thanks.

Originally posted by Aaants:

Color.interpolateColor works for what you’re trying to achieve.

Does that do more than just scale the RG and B components separately? (That would have been my first guess on how to do it, but using a different color model might allow for a better effect.)

Edit: Yeah, I think that’s all it does. So if you don’t have Adobe Flash and thus that class, this would probably do the same thing:

public static function interpolateColor(col1:uint, col2:uint, progress:Number):uint
{
   var negP = 1-progress;
   var r:uint = uint(((col1>>16)&0xFF)*negP+((col2>>16)&0xFF)*progress);
   var g:uint = uint(((col1>>8)&0xFF)*negP+((col2>>8)&0xFF)*progress);
   var b:uint = uint(((col1)&0xFF)*negP+((col2)&0xFF)*progress);
   var a:uint = uint(((col1>>>24))*negP+((col2>>>24))*progress);
   return (a<<24)|(r<<16)|(g<<8)|b;
}

(I literally just threw this together at this very moment, so use at your own risk.)
Edit: fixed a typo or two in the function

Never put much thought into how it does it but, if I was to try, it’d a much worse version of what you just did – so yes I agree! :)

The Color class in general is pretty useful. I’ve used in both PGGCs and various other bits ( This one contains the source ) and it’d no doubt make an appearance in PGGC3 if I ever had a go. I think you can use it in FlashDevelop but the fl libraries aren’t linked up by default – you need to include them in your project.

I’m pretty sure interpolateColor is not what RTL was after, given the provided jpe image; as such colour space transformation should still be the way to go

Otherwise a simple gradient from red to blue is indeed achieved using interpolateColor, which is nice to know

Originally posted by Dealmaster13:

given the provided jpe image

Speaking of which, I can’t view it. The file extension is “jpe” and Firefox refuses to display it as an image.

Download it then view it

MCheck this out: http://www.fastswf.com/aPozza0
Press T and then move around with WASD. What I basically want is for that line to change colors from blue to red, going through all colors and back.

Current code (changed to attempt rainbow):

public function updateLine( newX:Number, newY:Number ):void
		{
			if ( _isEnabled )
			{
				Draw.setTarget( lineTo );
				percent += .01;
				color = interpolateColor(0x000000, 0xFFFFFF, percent % 1);
				if ( lastPos )
				{
					Draw.line( lastPos.x, lastPos.y, newX, newY, color, .75 );
					lastPos.x = newX;
					lastPos.y = newY;
					lineToImage.updateBuffer();
				}
				else
				{
					lastPos = new Point( newX, newY );
				}
			}
			else
			{
				throw( new Error( "Must call enable() before updating line." ) );
			}
			
			super.update();
		}
		
		private function interpolateColor( fromColor:uint, toColor:uint, progress:Number ):uint
		{
			var q:Number = 1 - progress;
			var fromA:uint = ( fromColor >> 24 ) & 0xFF;
			var fromR:uint = ( fromColor >> 16 ) & 0xFF;
			var fromG:uint = ( fromColor >> 8 ) & 0xFF;
			var fromB:uint = fromColor & 0xFF;
			
			var toA:uint = ( toColor >> 24 ) & 0xFF;
			var toR:uint = ( toColor >> 16 ) & 0xFF;
			var toG:uint = ( toColor >> 8 ) & 0xFF;
			var toB:uint = toColor & 0xFF;
			
			var resultA:uint = fromA * q + toA * progress;
			var resultR:uint = fromR * q + toR * progress;
			var resultG:uint = fromG * q + toG * progress;
			var resultB:uint = fromB * q + toB * progress;
			var resultColor:uint = resultA << 24 | resultR << 16 | resultG << 8 | resultB;
			return resultColor;
		}

That fades from black to white.

RTL: it only does green for me.

Originally posted by Draco18s:

RTL: it only does green for me.

I changed it, the green was an example

Originally posted by RTL_Shadow:

Originally posted by Draco18s:

RTL: it only does green for me.

I changed it, the green was an example

Ah