Code to generate a color gradient within a texture using a diagonal line

Question

I want to generate a color gradient between two colors from x1,y1 to x2,y2. I'm unsure how to do this though. I can use Color.Lerp to get all of the color steps, but the problem is that I don't understand how to then apply that to a plane (the texture pixels) when the line would be at an angle.

If it was a horizontal/vertical line, that would be easy, because it's just plotting the same color along the appropriate axis. But if it's a diagonal line of any degree, that seems way more complicated and I'm unsure how to do calculate it.

As an example, here is a gradient from a picture editor program. It goes from green-to-red. The actual start and end positions are the circles. Therefore, the solid start/end colors continue solid outside of the gradient area.

Answer 1

Here is one way to do it, the idea behind this method is rotating the whole image to make the line straight while working on it. I am only using half of the matrix because the line is flattened horizontally and so the Y coordinate doesn't matter to us then.

0. Convert your startPoint and endPoint into vectors:

float x1 = (startPoint.X / (float)width)  * 2.0f - 1.0f;
float y1 = (startPoint.Y / (float)height) * 2.0f - 1.0f;
float x2 = (endPoint.X / (float)width)  * 2.0f - 1.0f;
float y2 = (endPoint.Y / (float)height) * 2.0f - 1.0f;

1. Find the angle between (x1,y1) and (x2,y2):

float angle = atan2(x1 - x2, y1 - y2);

2. Create half of a rotation matrix (We only need half for this)

float rx = cos(angle);
float ry = sin(angle);

3. Calculate start and end points in rotated space:

float start = x1 * rx + y1 * ry;
float end =   x2 * rx + y2 * ry;

4.-. For each pixel:

for(int x=0;x<width;x++) {
    for(int y=0;y<height;y++) {

4.1. Rotate the pixel so the line is horizontal

        // 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;

4.2. Find the ratio between start and end

        float lerp = (start - here) / (start - end);

4.3. Interpolate between your colors and finish the pixel

        SetPixel(x,y, Color.Lerp(color1, color2, lerp));
    }
}

Answer 2

You can project each point of the canvas on the (x1,y1)—(x2,y2) line and get a value between 0 and 1 that you then use for lerping. Here is some pseudocode:

for (y = 0; y < height; ++y)
    for (x = 0; x < width; ++x)
    {
        float A = (x - x1) * (x2 - x1) + (y - y1) * (y2 - y1);
        float B = (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1);
        float U = Clamp(A / B, 0.0, 1.0);

        SetPixel(x, y, Color.Lerp(Color1, Color2, U);
    }

Answer 3

To be honest, I wouldn't even start trying to create a texture and update all the pixels. This is far from being efficient, unless you want to do more complicated patterns than just a simple gradient.

Basically, for me there are two valid approaches:

• Draw a quad with colored vertices (fixed pipeline rendering).
• Draw a quad and color it using a fragment shader.

To render the quad in both cases, you can just look at this question and answer. Then just add colors to the vertices or enable shader usage.