# Computer graphics: Linear Interpolation

I have two vector points $p_1$ and $p_2$. Each point has a color value $c_1$ and $c_2$. Now using linear interpolation, I would like to get the color value at point $p_3$.

Concrete example:

$\qquad \displaystyle p_1 = (1, 3) \text{ with } c_1 = (2, 4, 1)$
$\qquad \displaystyle p_2 = (4, 4) \text{ with } c_2 = (3, 1, 2)$

What color does $p_3 = (2,3)$ have?

• Do you know what linear interpolation is in general? How have you tried to apply this here? (You were probably given a definition of linear interpolation in your context; if so, please share it with us.) Commented Oct 29, 2012 at 9:43
• If this is a gamedev related question involving interpolation, you might get better answers at gamedev.SE Commented Oct 31, 2012 at 15:38

Normally in graphics, you interpolate values across a line like so:

Point $A$ has value $V_A$ and point $B$ has value $V_B$, then you want to blend the value/color linearly between them as $C$ moves between $A$ and $B$. To do this, you first calculate the ratio (or percentage) of how far $C$ lies across the line $\overline {AB}$. This is equal to $\overline{AC}$ over $\overline {AB}$. Thus the ratio is calculated as follows:

$$t=\frac {(C-A)}{(B-A)}$$

Once you have this ratio, you can use it to find the interpolated value between $V_A$ and $V_B$, since they should have the same ratio.

$$t=\frac {V_C - V_A}{V_B - V_A}$$

The unknown variable here is $V_C$, so solving for $V_C$:

$$(V_B - V_A)t=V_C-V_A\\ V_C=(V_B - V_A)t+V_A$$

However, this assumes that point $C$ lies on the line $\overline {AB}$. If it is not on the line, then you can't really "interpolate" in this way without some additional definition of what you want to interpolate. For example, if $C$ lies far below the line, then you can't really compare $\overline {AC}$ to $\overline {AB}$ like this; the ratio can be greater than 1, even though $C$ is "in between" them. So in your example, point $(2,3)$ is off the line. You have many possible variants.

For instance:

• You can interpolate between the distances of $\overline {AC}$ and ${BC}$. You would thus create a new straight line, $\overline {ACB}$ (even though in the graph it would be an angle) and do the above interpolation on that.
• You can interpolate a particular color to a dimension. For example, you take the values $A_x$, $B_x$ and $C_x$, and interpolate $\overline {A_xC_x}$ over $\overline {A_xC_xB_x}$, and use that for Red, then use $y$ for Green etc. However this works better for 3 dimensions, where each dimension can correlate to a color.
• You could also interpolate along a parallel of $\overline{AB}$, which would yield what graphic programs call "linear" gradient (as opposed to "radial"). (Come to think of it, your answer could be improved by posting example pictures!) Commented Oct 31, 2012 at 16:13
• I was going to add this with a slightly different wording: to project $C$ to $\overline{AB}$ and interpolate the projected point as before. I think this is the same as what you are suggesting. Commented Oct 31, 2012 at 16:39

Not sure what you mean, but here is an idea.

First you have to express $p_3$ as a linear combination of $p_1$ and $p_2$. This can be done by solving a linear system say

$$\lambda p_1 +\mu p_2 =p_3.$$

In your case you want to solve \begin{align} \lambda + 4\mu &= 2 \\ 3\lambda + 4\mu &= 3 \end{align}.

Then you use the parameters $\lambda$ and $\mu$ to compute $c_3$ by $$c_3=\lambda c_1 +\mu c_2.$$