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

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.

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));
}
}

• I'm confused at the for(counter part. What are you doing in the for? if the next line applies, the counter is just being decreased each time, and added at the start of the loop. Jan 24, 2014 at 17:53
• oh, maybe you're just using the for to find the last applicable percentage based on the lerp Jan 24, 2014 at 17:59
• Got this working! I'm editing your post to note what I did Jan 24, 2014 at 18:34