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
You've successfully subscribed to The ecode.DEV repository
Great! Next, complete checkout for full access to The ecode.DEV repository
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.