Gradient Math/algorithm

[sciwizeh]

OK, this is probably the wrong place for this question, but here goes nothing...

I want to know what math is involved in making a Color gradient (so i can program some myself). My goal for now is to make a program that can get two locations and matching colors, and display a gradient that was formed by them, but i hope to be able to handle more than two color location sets.

all I really want is links to places that have details on the math, or the algorithms, but an explanation here would be good also, if this is the wrong thread please point me to the right one, i googled some of this and it didn't work out.

thanks

[sciwizeh]

So, after a bit more seaching i have come across something that said to use Linear Interpolation, which i'm not sure how to impliment...

i get that the formula gives points on a line, and i can do that, but what i don't get is if i have a location and a color the interpolation is only going to give more locations, so how do i get the RGB values for those locations?

[Ezzaral]

At it's most basic, a linearly interpreted gradient just calculates the new RGB values by applying the target value percent of the linear range to the each RGB component range. Here's a Java function illustrating that:

/** returns a color between start and end colors based upon percent of the range */
private Color gradedValue(Color beginColor, Color endColor, float percent) {
    int red = beginColor.getRed() + (int)(percent * (endColor.getRed() - beginColor.getRed()));
    int blue = beginColor.getBlue() + (int)(percent * (endColor.getBlue() - beginColor.getBlue()));
    int green = beginColor.getGreen() + (int)(percent * (endColor.getGreen() - beginColor.getGreen()));

    return new Color(red, green, blue);
}

Where "percent" is just the percentage of your spatial linear range, i.e. at position x=50 on a display area 200 pixels wide, "percent"=0.25. The intermediate color for that point on a gradient from white to blue would be obtained by gradedValue(Color.WHITE, Color.BLUE, 0.25f)

[sciwizeh]

that makes sense, so if i have two arbitrary points...

i can get the interpolation the distance between the first point and the newly calculated point over the distance between the first point and the end point gives percentage... Right? a radial gradient would be the same rotated over a circle

and what about more than 2 points?

[Ezzaral]

More than two points for what? You have a range from one value (min) to another (max) represented as a gradient between two colors. Do you mean more color ranges?

[sciwizeh]

What i want to do is probably a bit complex, i want the user of my program to be able to specify a set of 2D coords and a color for each coord. i found a program that can do it, but i don't know how it works, i used it to make this image to illustrate my point :

[Ezzaral]

You can probably get there pretty easily by just playing around with the coordinate space to color space translation formulas and a bit of basic trigonometry. It's still interpolation between the colors based upon the relative distance between your 2D points.