# 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.) – Raphael Oct 29 '12 at 9:43
• If this is a gamedev related question involving interpolation, you might get better answers at gamedev.SE – Realz Slaw Oct 31 '12 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!) – Raphael Oct 31 '12 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. – Realz Slaw Oct 31 '12 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.$$