Fractalforums

Hello, I'm trying to do color interpolation (with 16bits colors), but I don't get smooth transitions when I use more than two colors.

Here is the result with two colors (0xFFFF, 0x0000):


And here with five colors (0x4708, 0xC5FA, 0x15D4, 0x0F92, 0x23CD):


(Sorry for the image quality)

The code (RGB565 is just an unsigned short int):
#define PALETTE_WIDTH 320
#define PALETTE_SIZE 5

RGB565 colors[PALETTE_SIZE] = { 0x4708, 0xC5FA, 0x15D4, 0x0F92, 0x23CD };

RGB565 Palette(uint16_t num)
{
float p = num / float(PALETTE_WIDTH-1);
num = (int)( (float)num*(PALETTE_SIZE-1)/(float)PALETTE_WIDTH );

byte r, g, b,
     r_t, g_t, b_t;

r = (colors[num].val & 0b1111100000000000) >> 11;
g = (colors[num].val & 0b0000011111100000) >> 5;
b = colors[num].val & 0b0000000000011111;
r_t = (colors[num+1].val & 0b1111100000000000) >> 11;
g_t = (colors[num+1].val & 0b0000011111100000) >> 5;
b_t = colors[num+1].val & 0b0000000000011111;

r = int( (1.0-p)*float(r) + p*float(r_t) );
g = int( (1.0-p)*float(g) + p*float(g_t) );
b = int( (1.0-p)*float(b) + p*float(b_t) );

return RGB565( (u16(r) << 11) + (u16(g) << 5) + u16(b) );
}
Maybe linear interpolation only works with two colors...

Linkback: https://fractalforums.org/programming/11/solved-color-interpolation/2652/

Almost there. The value of p needs to be relative to each pair of colors in the palette. Maybe something like:

float p = float(num)*float(PALETTE_WIDTH - 1);
p = p - floorf(p);

Then the values of p across all of the palette is a sawtooth curve, rising repeatedly from zero to one between any two palette entries.

(Beware, the above code has just been hacked in as an illustration. It is untested and probably has bugs.)

Almost there. The value of p needs to be relative to each pair of colors in the palette. Maybe something like:

float p = float(num)*float(PALETTE_WIDTH - 1);
p = p - floorf(p);

Then the values of p across all of the palette is a sawtooth curve, rising repeatedly from zero to one between any two palette entries.

(Beware, the above code has just been hacked in as an illustration. It is untested and probably has bugs.)

Thank you, I was able to get it to work! I simply had to change a bit the code example you gave me.

Though, I should have noticed the sawtooth graph... I'll plot my value next time!

Here is the modified code if anyone is interested:
float p = float(num)/float(PALETTE_WIDTH)*float(PALETTE_SIZE-1);
num = (int)( (float)num*(PALETTE_SIZE-1)/(float)PALETTE_WIDTH );
p = p - num;


@ hobold.  Thanks, for showing me how floor function is used with a color palette.

@ galac    A while ago i tested different interpolations with a palette - linear, trig, and parabolic (with mix functions to blend) but my implementation was too slow.  I think i will try again 

@galac: You probably never considered a negative index into a color palette. But I have found it useful in some situations. Be aware that cast to int is not the same as floor() for negative numbers. This may be too pedantic, but consider changing your (int) to floor() and saving what may be a painful debug if someday you decide to allow negative palette indices.

negative index into a color palette

defiantly is useful when you are building up a colorValue using several colorValue components within each iteration, (opposed to a simple single distance based function). It is more intuitive when tweaking, e.g. a mandelbox may have tweakable color components derived from boxFold, sphere fold, varying scale,  etc,   the component parameters can be negative,

Before converting to RGB , offset the palette origin (or use other maths)  such that all points have positive FinalColorValues.