Linear Interpolation

25 June 2009, 06:52 PM

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. */`

publicintlinearInterpolate(intA,intB,intl,intL) {`// extract r, g, b information`

`// A and B is a ARGB-packed int so we use bit operation to extract`

intAr = (A >> 16) & 0xff ;intAg = (A >> 8) & 0xff ;intAb = A & 0xff ;intBr = (B >> 16) & 0xff ;intBg = (B >> 8) & 0xff ;intBb = B & 0xff ;`// now calculate Y. convert float to avoid early rounding`

`// There are better ways but this is for clarity's sake`

intYr = (int)(Ar + l*(Br - Ar)/(float)L) ;intYg = (int)(Ag + l*(Bg - Ag)/(float)L) ;intYb = (int)(Ab + l*(Bb - Ab)/(float)L) ;`// pack ARGB with hardcoded alpha`

return0xff000000 |`// alpha`

((Yr << 16) & 0xff0000) | ((Yg << 8) & 0xff00) | (Yb & 0xff) ; }

Last edited on 25 June 2009

### Comments

~

**Shaghayegh**, 3 June 2012, 04:33 AMsooooooooooooooooo tnx :*

~

**nondescript**, 4 February 2013, 10:30 PMThanks a lot!! Appreciate it!

~

**michaltn**, 15 January 2014, 09:47 AMthank you so much! greatly explained

Post a comment~

Chris, 31 August 2011, 02:51 AMKind regards,

Chris