How do you calculate a gradient value within multiple colors (gradient stops)

Question

In WPF/Silverlight XAML you can have a brush with multiple gradient stops at different points along the color line.

I was able to replicate this behavior with two colors, a single color lerp, from this answer to my previous question: Code to generate a color gradient within a texture using a diagonal line

How do I do the same thing in that question, but with multiple color steps even at different widths from each other.

Answer 1

You do the same thing, only multiple times between the starting point and end point of each color.

Here is some pseudo code (copied from other question) and modified:

int counter = 0;
Color ca[N]; // put in somecolors here
float color_precentage[N]; // put in desired percentage

for(int x=0;x<width;x++) {
    for(int y=0;y<height;y++) {
        // but we need vectors from (-1, -1) to (1, 1)
        // instead of pixels from (0, 0) to (width, height)
        float u = (x / (float)width)  * 2.0f - 1.0f;
        float v = (y / (float)height) * 2.0f - 1.0f;    
        float here =  u * rx + v * ry;
        float lerp = (start - here) / (start - end);

        // Make sure we stay in range
        for(counter = 0; counter < color_percentage.Count && color_precentage[counter] < lerp; counter++);
        counter--;

        counter = Math.Max(counter, 0);
        counter = Math.Min(counter, color_precentage.Count - 2);

        float new_lerp = (color_precentage[counter] - lerp) / (color_precentage[counter] - color_precentage[counter + 1]);
        SetPixel(x,y, Color.Lerp(ca[counter], ca[counter + 1], new_lerp));
    }
}