🔒 Locked

Hue Ramping 2D Bitmaps

Started by hellz Sep 14, 2004 at 12:38 PM 1 replies 800+ views

Original Post

Sep 14, 2004 at 12:38 PM

Hey guys, I'm a bit confused as how to apply a hue ramp to a bitmap, based on the individual colours of each pixel. The idea, is to create a tinted version of the original bitmap. If any of you remember the original BreakOut, if you collected a power-up, the paddle would gradually tint itself to a specific tint (red for example) for the duration of the power-up and then revert to the original colours. I guess I can't really explain this without uploading some images, so take a look at these: Original Tint to red Now the thing is, I don't want to just "flick" between the original and tinted images. I'd rather manipulate the bitmap directly and alter the pixels, gradually shading them from the original to the tinted version. Working with Allegro, I've managed to create a hue ramp that works with primitives and gradually shades between each ramp.


int HueRamp(int *r, int *g, int *b, const int rampEnd)
{
	static currentRamp = RAMP_RED;

	switch (currentRamp)
	{
	case RAMP_RED:
		(*r != 255) ? (*r)++ : currentRamp = RAMP_ORANGE;
		break;
	case RAMP_ORANGE:
		(*g != 128) ? (*g)++ : currentRamp = RAMP_YELLOW;
		break;
	case RAMP_YELLOW:
		(*g != 255) ? (*g)++ : currentRamp = RAMP_GREEN;
		break;
	case RAMP_GREEN:
		(*r != 0)   ? (*r)-- : currentRamp = RAMP_CYAN;
		break;
	case RAMP_CYAN:
		(*b != 255) ? (*b)++ : currentRamp = RAMP_BLUE;
		break;
	case RAMP_BLUE:
		(*g != 0)   ? (*g)-- : currentRamp = RAMP_PURPLE;
		break;
	case RAMP_PURPLE:
		(*r != 128) ? (*r)++ : currentRamp = RAMP_DARKRED;
		break;
	case RAMP_DARKRED:
		(*b != 0)   ? (*b)-- : currentRamp = RAMP_RED;
		break;
	}

	return currentRamp;
}

That works well, but obviously assumes the colours of the bitmap in question, are already suitable for ramping (as in, straight from dark red->red or red->orange). Now the question is, how to get from the original colours, to a specified ramp? For example, the RGB of the top left pixels (after the grey portion) for the original/tinted versions, are:


Orange->Red

  255   142    29  Original
- 255    29    29  Tinted
-----------------
    0   113     0  Difference

  255   223   190  Original
- 255   190   190  Tinted
-----------------
    0    33     0  Difference

I made a blue version as well, and from original to blue (same pixel example):


Orange->Blue

  255   142    29  Original
-  29    29   255  Tinted
-----------------
  226   113  -226  Difference

So how do I get from one to the other? I'm guessing I need to somehow "scale" the tint for each pixel, depending on its original colour so that it doesn't end up as a solid colour, such as red or orange. However, how I'd go about that, I'm not entirely sure. If this doesn't make sense, I'll try to explain further. Thanks in advance, -hellz

Emmanuel Deloget

Sep 14, 2004 at 2:55 PM

Hi,

You may try to do some simple lerp between the old color and the new color. If t is the time (going from 0.0f to 1.0f) :

R = srcR*(1-t) + dstR*t;G = srcG*(1-t) + dstG*t;B = srcB*(1-t) + dstB*t;

Simple, and will probably give acceptable result whatever the src color and dst color are. Note that for better results you may want to limit both luminance and saturation changes - that is : changing only the tint and not the tint intensity and lightness. I suggest you to pick your favorite image manipulation program in order to find the destination color of the pixels (using the HSL color picker, of course).

If you want to compute the destination color at run time then I suggest you to have a look to Paul Bourke's HSL page for more information about HSL and its use.

Quote:

I'd rather manipulate the bitmap directly and alter the pixels, gradually shading them from the original to the tinted version.

I assume you want to say "a copy of the bitmap" rather than "the bitmap". If you directly operate on the bitmap then you'll loose the original color - which is probably not what you want to do.

HTH,

hellz

Sep 14, 2004 at 3:00 PM

Quote:
Original post by Emmanuel Deloget
Hi,

You may try to do some simple lerp between the old color and the new color. If t is the time (going from 0.0f to 1.0f) :
R = srcR*(1-t) + dstR*t;G = srcG*(1-t) + dstG*t;B = srcB*(1-t) + dstB*t;
Simple, and will probably give acceptable result whatever the src color and dst color are. Note that for better results you may want to limit both luminance and saturation changes - that is : changing only the tint and not the tint intensity and lightness. I suggest you to pick your favorite image manipulation program in order to find the destination color of the pixels (using the HSL color picker, of course).

That sounds good, and yes, I'm using the colour picker in PhotoShop to ensure I'm getting the right values.

Quote:

If you want to compute the destination color at run time then I suggest you to have a look to Paul Bourke's HSL page for more information about HSL and its use.

Sweet, thanks! That'd be preferable rather than computing at compile time.

Quote:

Quote:

I'd rather manipulate the bitmap directly and alter the pixels, gradually shading them from the original to the tinted version.

I assume you want to say "a copy of the bitmap" rather than "the bitmap". If you directly operate on the bitmap then you'll loose the original color - which is probably not what you want to do.

Yeah, that is what I meant, just phrased it rather poorly. [smile]

Quote:

HTH,

It certainly does! You've given me a lot to go on; thank you very much. [smile]

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.