Bilinear color interpolation

Last week when i was surfing around the web i suddenly found this image...

Even if i didn't need this kind of gradient i asked myself how to achieve this in Java Swing? Well to be honest this is really easy (if you know how to do it) and so i thought double your fun...share your knowledge with others...so here we go...
In principle there's only one little method which is responsible for the whole magic here. This method is able to fade from one color to another by a given fraction in the range from 0...1.


So start with a simple linear gradient that looks like this:

Because we will work with floating point operations it makes sense to use also floating points to create your color objects.
If we now for example would like to get the color which is located at a fraction = 0.5f we simply have to build the difference between each color's red, green, blue and alpha values, multiply them with the fraction of 0.5f and add the result to the values of the start color...sounds to complicated ? Maybe some code makes it easier to understand...

private java.awt.Color interpolateColor(final Color COLOR1, final Color COLOR2, float fraction)
        {            
            final float INT_TO_FLOAT_CONST = 1f / 255f;
            fraction = Math.min(fraction, 1f);
            fraction = Math.max(fraction, 0f);
            
            final float RED1 = COLOR1.getRed() * INT_TO_FLOAT_CONST;
            final float GREEN1 = COLOR1.getGreen() * INT_TO_FLOAT_CONST;
            final float BLUE1 = COLOR1.getBlue() * INT_TO_FLOAT_CONST;
            final float ALPHA1 = COLOR1.getAlpha() * INT_TO_FLOAT_CONST;

            final float RED2 = COLOR2.getRed() * INT_TO_FLOAT_CONST;
            final float GREEN2 = COLOR2.getGreen() * INT_TO_FLOAT_CONST;
            final float BLUE2 = COLOR2.getBlue() * INT_TO_FLOAT_CONST;
            final float ALPHA2 = COLOR2.getAlpha() * INT_TO_FLOAT_CONST;

            final float DELTA_RED = RED2 - RED1;
            final float DELTA_GREEN = GREEN2 - GREEN1;
            final float DELTA_BLUE = BLUE2 - BLUE1;
            final float DELTA_ALPHA = ALPHA2 - ALPHA1;

            float red = RED1 + (DELTA_RED * fraction);
            float green = GREEN1 + (DELTA_GREEN * fraction);
            float blue = BLUE1 + (DELTA_BLUE * fraction);
            float alpha = ALPHA1 + (DELTA_ALPHA * fraction);

            red = Math.min(red, 1f);
            red = Math.max(red, 0f);
            green = Math.min(green, 1f);
            green = Math.max(green, 0f);
            blue = Math.min(blue, 1f);
            blue = Math.max(blue, 0f);
            alpha = Math.min(alpha, 1f);
            alpha = Math.max(alpha, 0f);

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

In the method above i first split each color into it's red, green, blue and alpha values, than i build the difference between the stop- and the startcolor, multiply it with the fraction and create a new color from the resulting red, green, blue and alpha values.


With this method which represents a linear interpolation between two colors it's easy to create a bilinear interpolation too (because it means we simply have a combination of two linear interpolations).


For example the bilinear gradient in the first image looks like this...

As you can see we have defined four colors (one for each corner) and we have also fractions in both directions (x and y). Now you need a method that is able to calculate the color between the four colors given by two fractions (one for the x-axis and one for the y-axis). Let's assume we would like to get the color at fraction_x = 0.25f and fraction_y = 0.75f.

To be able to calculate the color at the intersection of the two lines we first have to calculate the color between the upper left corner and the upper right corner at the fraction of 0.25f by using the linear interpolation method and save it for example as upperColorX.
In the second step we calculate the color between the lower left corner and the lower right corner at the fraction of 0.25f and save it as lowerColorX.
Now we have calculated the start- and stopcolor for the vertical linear gradient between the points P1, P2.

In the third and last step we only have to calculate the color between P1 and P2 at the given fraction_y = 0.75f by using the linear interpolation one more time.

Now you know how to get the color of a point that is defined by two fractions between 0...1 which is placed in a square of four colors.


I have put the bilinear interpolation in another method which looks like this...

private Color bilinearInterpolateColor(final Color COLOR_00, Color COLOR_10, final Color COLOR_01, final Color COLOR_11, final float FRACTION_X, final float FRACTION_Y)
        {
            final Color COLOR_X1 = interpolateColor(COLOR_00, COLOR_10, FRACTION_X);
            final Color COLOR_X2 = interpolateColor(COLOR_01, COLOR_11, FRACTION_X);
            return interpolateColor(COLOR_X1, COLOR_X2, FRACTION_Y);
        }

Because i don't want to add these methods all the time i created a BiLinearGradientPaint.class that takes a java.awt.Shape, the colors of the four corners and the fractions in x- and y-direction.
To create the example gradient that i used above you could use the following code:

import eu.hansolo.gradients.BiLinearGradientPaint;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.RenderingHints;

public class BilinearPanel extends javax.swing.JPanel
{
    @Override
    protected void paintComponent(java.awt.Graphics g)
    {
        super.paintComponent(g);
        
        final java.awt.Graphics2D G2 = (Graphics2D) g.create();
        G2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        
        final Color UPPER_LEFT = new Color(1.0f, 0.0f, 0.0f, 1.0f);
        final Color UPPER_RIGHT = new Color(1.0f, 1.0f, 0.0f, 1.0f);
        final Color LOWER_LEFT = new Color(0.0f, 0.0f, 1.0f, 1.0f);
        final Color LOWER_RIGHT = new Color(0.0f, 1.0f, 1.0f, 1.0f);
        
        final Rectangle RECT = new Rectangle(0, 0, 400, 400);
        
        eu.hansolo.gradients.BiLinearGradientPaint BILINEAR_GRADIENT = new eu.hansolo.gradients.BiLinearGradientPaint(RECT, UPPER_LEFT, UPPER_RIGHT, LOWER_LEFT, LOWER_RIGHT);
        
        G2.setPaint(BILINEAR_GRADIENT);
        G2.fill(RECT);
        
        G2.dispose();
    }
}

And here is the result one more time...

With bilinear gradients one could create interesting things like the following...

To create things like the image above you simply have to combine some rectangles which are filled with bilinear gradients, where the stop color of one rectangle is the start color of the next rectangle and so on.


I hope you enjoy this things like i do and if you would like to create some nice gradients too, you might want to use one of my gradients. I put the ConicalGradientPaint, the ContourGradientPaint and the BiLinearGradientPaint in an extra library that you could download here:


    binary distribution: Gradients.jar


    source (netbeans): Gradients.zip


So enjoy coding...