A visual guide for Linear Interpolation

A visual guide to understanding the linear interpolation process using OpenGL with C++, performing a smooth transition between two points.

A visual guide for Linear Interpolation

At some point in my education, I heard about the interpolation process. To that point, I remembered that was a way to compute numbers given a bunch of other numbers. According to the theory, the interpolation process is a type of estimation, which is a method to construct new data points within the range of a discrete set of known data points.

This sounds good, but why? The classical way to respond that is to create new data based on the existing data: inventing a fact given the previous know facts! (such as inventing an excuse to arrive late!). Well, do not look away from the central point: numerical data interpolation 🤓


For instance, given the range [1, 10], the interpolation process could give us 2, 7, 6, 4, and any other inside that range. Great! that sounds like extraction of a random number. Well, that's the main key: no random at all! With interpolation, we can to create a new value given the interpolation factor.

Then, the linear interpolation (frequently called as lerp) could be defined as follow: given 2 known points $p1 = (x_0, y_0)$ and $p2 = (x_{1}, y_{1}$), the linear interpolant is the straight line between these points. Where each intermediate point is computed using those points and the interpolation factor (let's call it $t$).

To be more formal, it is possible to create a point $p$ over the straight line from $p1$ to $p2$. This could be written as:
$$ p = (1-t)\times p1 + tp2$$

The formula incorporates a parameter $t$ (interpolation factor) which lives in the closed interval $[0, 1]$. Here a couple of crucial aspects:

  1. When $t=0$, then the equation is equivalent to the point $p1$
  2. When $t=1$, then the equation is equivalent to the point $p2$
    Both ends are covered while $t$ comes from 0 to 1.

Let's see the following image where $p1=(12, 10)$ and $p2=(42, 20)$; the interpolation factor $t=0.4$ (we can perceive the parameter as a belonging percentage for each point.

Example of an interpolation process using two 2D points and t=0.4
Example for an interpolation process in 2D

Then, how to obtain the point $p$ with the described setup? Well, now we have to employ the formulas:

$x = (1.0-0.4)\times 12 + 0.4\times42$
$x = 7.2 + 16.8$
$x = 24$
Now, with for the value of $y$
$y = (1.0-0.4)\times 10 + 0.4\times20$
$y = 6.0 + 8.0$
$y = 14$
Thus, the final position is $(24, 14)$

Now, talking in code we can define the function lerp as follow: (in this case, the code is in C++, however, in C, Java, C#, and others is the same code) 🤯

float lerp(float v0, float v1, float t) {
  return (1 - t) * v0 + t * v1;

Okey, and the visual part?

Subjectively, I always prefer sketch or draw the solution (hi data scientists) instead of numbers and more numbers. That's why I decided to apply the linear interpolation using an example with graphical primitives.

In this case, I am using OpenGL with C++ to draw triangles. A triangle might be defined as three points in 2D, where each point is composed by two values (one for each axis) 👾

The triangles represent an initial and ending position (for this example, the initial is represented by the lower-left triangle):

Two triangles separated in the screen
The initial and ending position for the interpolation

To be more specific, now I draw each of the three points defined by triangles as points in the same windows. The idea is the interpolation of one color point to its par. This will cause a visual effect of a smooth movement.

six point, 3 for each triangle
Colored points, 3 for each triangle

This smooth movement is applying increments over $t$ when I pressed a key on the keyboard. At the beginning, $t=0$, after pressing once the key (let's assume the key '+') the operation $$t \leftarrow t + DELTA_T$$, where $DELTA_T$ could take a small value which depends of the scale/values of your points (e.g. 0.001, 0.01, 0.1, etc.)

For instance, when $DELTA_T = 0.01$ I have to press '+' 100 times to reach $t=1$. In addition, if I press '-' $t$ is decreased in $DELTA_T$ until reach to 0. With this, all points are covered those belong to the straight line from the lower-left triangle to the upper-right triangle.

After code that, the result should look like:

Pressing '+' and '-' keys for the changing of t

Well, that is a linear interpolation!! There are some things outside this explanation:

  • What happens when $t<0$ or $t>1$? (short ans: craziness!)
  • Can I apply two or three interpolation factors? (short ans: bilinear, trilinear interpolation, more craziness of course)
  • Is it possible to modify the formula to other keeping the same conditions over $t \in [0,1]$? (short ans: sure! this is math)

The long answer for the questions are topic for a future post/video. For now, I hope that you love 😍 (I  am lying, if you undersand the point then I am happy) the interpolation process and why is used for.

From a geek to geeks.

Share Tweet Send