Generating gradients programmatically?

Question

Given 2 rgb colors and a rectangular area, I'd like to generate a basic linear gradient between the colors. I've done a quick search and the only thing I've been able to find is this blog entry, but the example code seems to be missing, or at least it was as of this posting. Anything helps, algorithms, code examples, whatever. This will be written in Java, but the display layer is already taken care of, I just need to figure out how to figure out what to display.

Solution 1

you want an interpolation between the first and the second colour. Interpolating colours is easy by calculating the same interpolation for each of its components (R, G, B). There are many ways to interpolate. The easiest is to use linear interpolation: just take percentage p of the first colour and percentage 1 - p of the second:

R = firstCol.R * p + secondCol.R * (1 - p)

There's another question related to this.

There are other methods of interpolation that sometimes work better. For example, using a bell-shaped (sigmoidal) interpolation function makes the transition smoother.

/EDIT: Oops, you mean using a predefined function. OK, even easier. The blog post you linked now has an example code in Python.

In Java, you could use the GradientPaint.

Solution 2

You can use the built in GradientPaint class.

void Paint(Graphics2D g, Regtangle r, Color c1, Color c2)
{
  GradientPaint gp = new GradientPaint(0,0,c1,r.getWidth(),r.getHeight(),c2); 
  g.setPaint(gp);
  g.fill(rect);
}

Solution 3

Using the basic AWT classes, you could do something like this:

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.Rectangle2D;
import javax.swing.JPanel;

public class LinearGradient extends JPanel {

    public void paint(Graphics g) {
        Graphics2D g2 = (Graphics2D) g;
        Color color1 = Color.RED;
        Color color2 = Color.BLUE;
        int steps = 30;
        int rectWidth = 10;
        int rectHeight = 10;

        for (int i = 0; i < steps; i++) {
            float ratio = (float) i / (float) steps;
            int red = (int) (color2.getRed() * ratio + color1.getRed() * (1 - ratio));
            int green = (int) (color2.getGreen() * ratio + color1.getGreen() * (1 - ratio));
            int blue = (int) (color2.getBlue() * ratio + color1.getBlue() * (1 - ratio));
            Color stepColor = new Color(red, green, blue);
            Rectangle2D rect2D = new Rectangle2D.Float(rectWidth * i, 0, rectWidth, rectHeight);
            g2.setPaint(stepColor);
            g2.fill(rect2D);
        }
    }
}

Solution 4

Following up on the execllent answer of David Crow, here's a Kotlin example implementation

fun gradientColor(x: Double, minX: Double, maxX: Double, 
                  from: Color = Color.RED, to: Color = Color.GREEN): Color {
    val range = maxX - minX
    val p = (x - minX) / range

   return Color(
        from.red * p + to.red * (1 - p),
        from.green * p + to.green * (1 - p),
        from.blue * p + to.blue * (1 - p),
        1.0
    )
}

View more solutions