home | news | contact | about
Linear Interpolation
25 June 2009, 06:52 PM
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)?

line.png
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
linear.gif
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,
yr.gif
Figure 3: Red element for Y.

To find the green element for Y,
yg.gif
Figure 4: Green element for Y.

To find the blue element for Y,
yb.gif
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

dgreen.png
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.

table.png
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) ;
}

Last edited on 25 June 2009

Comments

~Chris, 31 August 2011, 02:51 AM
Thanks for this write up. Ive been looking for linear interpolation formula using distance/offset\'s for some time now (that i could understand! hehe)... much appreciated!
Kind regards,
Chris
~Shaghayegh, 3 June 2012, 04:33 AM
sooooooooooooooooo tnx :*
~nondescript, 4 February 2013, 10:30 PM
Thanks a lot!! Appreciate it!
~michaltn, 15 January 2014, 09:47 AM
thank you so much! greatly explained
Post a comment~
Name*
An elephant is bigger than a mouse. true or false*
Comment*
Notes: The comment system is moderated.
Meaning your comment will not show until reviewed.