WPF Color interpolation

Question

Hello,

I am trying to paint a WPF control's background based on a palette where each color has been assigned with values (e.g. Red = 0, DarkGreen = 10, Green = 20,LightGreen =30) and a user-selected value (e.g. 25) that would give the resulting color. I would like the resulting color to be an interpolation between the 2 nearest color values (e.g. for a value of 25 it should give a color between Green and LightGreen)

For that I'm thinking of using the existing LinearGradientBrush in WPF; set the GradientStops, offsets and get the color at a specified value . Is there a way to do this or should I implement my own color interpolation function?

Thanks.

Answer 1

Where did you come up with the Values 10/20/30 for your DarkGreen/Green/Lightgreen colors.

You'll need some sort of correlation table between your assigned palette values & the real numeric representations of the colors... e.g.

Color             Pal-Code     RGB            HSL
Red               0            255,0,0        0,240,120
Dark Green        10           0,128,0        80,240,60
Green             20           0,255,0        80,240,120
Light Green       30           128,255,128    80,240,180

From that correlation table, you could take any user "palette code", find the closed matching pair of palette codes from the table above and do a best-match range find on it. e.g. if some entered 25 (let's use HSL for convenience) then the formula would be...

Green             20           0,255,0        80,240,120
Light Green       30           128,255,128    80,240,180

25 is halfway between both codes so

Palette Code     Hue        Sat      Luminence
20               80         240      120
30               80         240      180
-------------------------------------------------
25               80         240      150

If they had selected 6, you'd need to find .6 of the range of colors between each value.

Red               0            255,0,0        0,240,120
Dark Green        10           0,128,0        80,240,60

Palette Code     Hue        Sat      Luminence
0                0          240      120
10               80         240      60
-------------------------------------------------
6                48         240      84

0->80      = +80 * 60%   = +48    So 0+48   = 48
240->240   =   0 * 60%   = 0      So 240+0  = 240
120->60    = -60 * 60%   = -36    So 120-36 = 84

Answer 2

Using the LinearGradientBrush sounds like it would have a bit of an overhead. No knowledge though. A color interpolation function isn't that hard to write though.

I'm assuming your palettes have values that are divisible by 10 for simplicity.

public static Color GetColor(int value)
{
    int startIndex = (value/10)*10;
    int endIndex = startIndex + 10;

    Color startColor = Palette[startIndex];
    Color endColor = Palette[endIndex];

    float weight = (value - startIndex)/(float)(endIndex - startIndex);

    return Color.FromArgb(
        (int)Math.Round(startColor.R * (1 - weight) + endColor.R * weight),
        (int)Math.Round(startColor.G * (1 - weight) + endColor.G * weight),
        (int)Math.Round(startColor.B * (1 - weight) + endColor.B * weight));

}

If the defined colors are not divisible by 10 the logic to find the start and end colors will be a bit more complex.

Answer 3

I think you'll be better of using a value converter, just take one of the interpolation functions suggested in the other answers and put in in a value converter, use this converter to bind the background property to the value and you're done.

Answer 4

Thanks for all the replies guys. It seems there is no way to get the "value" of a GradientBrush at a specified point. I hope this is corrected at some later version of the framework. So I guess the only option for now is to implement an interpolation algorithm as Mikko suggested.