Tech-Algorithm.com

Linear interpolation is a basic form of interpolation. It is a method to estimate property (in this case color) of any arbitrary point between two or more given points. There are many other types of interpolation, and many different uses (not just color estimation). To name a few others we have polynomial and cubic spline interpolation. The focus in this article however is on the basic of its implementation – simple and easy to understand.

Now the introduction is done with, we'll move straight for content. What was linear interpolation again? Is a method to estimate the property of an arbitrary point between two other points with their properties known. Or in a more readable fashion, we can ask, if one point is red (A) and the other green (B) what color is between red and green (Y)?


Figure 1: What should be the color for Y?

Figure 1 explains a lot, it tells the distance between A and B which is L, and between A and Y which is l (not the number 1 but lowercase for 'L'). With all these information available, we can devise a formula for the yet unknown Y and – surprise – it's the linear interpolation function!! *sigh*

The function

Figure 2: Linear interpolation function.

Equation 1 as shown in figure 2 is the magic formula. With this handy tool finding all possible colors for Y in all possible points between A and B is very easy and simple!!

So what is the color for Y?
Ok. I lied. I admit.

It's not going to work with A, B, L, and l thrown into the formula – it just can't. What we need are numbers and for this a little assumption might just prove useful. A and B are of known color, so not much assumption there, let's just say they are RGB (consisted of red, green, and blue) for now. For L and l, take L as 7 and l as 5. So now we have,

A's RGB value (0xFF0000)
Red = 255
Green = 0
Blue = 0

B's RGB value (0x00FF00)
Red = 0
Green = 255
Blue = 0

L = 7
l = 5

Notice there are 3 channels in RGB, this mean to find Y, we have to calculate red, green, and blue element for Y. Lets label the 3 elements for Y as Yr, Yg, and Yb. What this mean is we will need to use equation 1 (see figure 2) for 3 times before we can tell what Y's color is.

To find the red element for Y,

Figure 3: Red element for Y.

To find the green element for Y,

Figure 4: Green element for Y.

To find the blue element for Y,

Figure 5: Blue element for Y.

Simple trivial calculation does become tedious when done manually. Fortunately, through diligence and patience (and putting up with this), we have revealed the true color for Y (all assumptions applies). Here is the color for Y, extra size for clarity.

Y's RGB value
Red = 72
Green = 182
Blue = 0


Figure 6: Interpolated color Y for l = 5.

Uhuh?? It's green! I don't see any difference!
Of course it's green! Just a bit darker with a soft tint of red... or not...

It is a slightly darker green, but still green. For comparison check the diagram below. Not just showing how Y is a bit darker, it also shows the full transition from red to green in 7 steps – low resolution, I know. There is also a RGB table thrown in for good measures.


Figure 7: Full transition from red to green in 7 steps.

Java snippet
Really? Is this even needed?
Anycase the function is commented, check that for explanation.

/**
 * 
 * Linear interpolation between two points.
 * Return interpolated color Y at distance l.
 * 
 * @param A ARGB for point A.
 * @param B ARGB for point B.
 * @param l Distance Y from A.
 * @param L Distance between A and B.
 * @return Interpolated color Y.
 */
public int linearInterpolate(int A, int B, int l, int L) {
    // extract r, g, b information
    // A and B is a ARGB-packed int so we use bit operation to extract
    int Ar = (A >> 16) & 0xff ;
    int Ag = (A >> 8) & 0xff ;
    int Ab = A & 0xff ;
    int Br = (B >> 16) & 0xff ;
    int Bg = (B >> 8) & 0xff ;
    int Bb = B & 0xff ;
    // now calculate Y. convert float to avoid early rounding
    // There are better ways but this is for clarity's sake
    int Yr = (int)(Ar + l*(Br - Ar)/(float)L) ;
    int Yg = (int)(Ag + l*(Bg - Ag)/(float)L) ;
    int Yb = (int)(Ab + l*(Bb - Ab)/(float)L) ;
    // pack ARGB with hardcoded alpha
    return 0xff000000 | // alpha
            ((Yr << 16) & 0xff0000) |
            ((Yg << 8) & 0xff00) |
            (Yb & 0xff) ;
}