Linear Interpolation Explained

[Oddly]

Making this guide for @Damian666 but, honestly, it's a pretty important thing to know in game dev, so today I'll be explaining Linear Interpolation.

So first off, What is Linear Interpolation?
Linear Interpolation (Lerp for short in game dev lingo) is the process of finding any point on a given line, given any value of X.
A question that may be in the form of solving for Linear Interpolation may look something like.

"Given the line (A, B), what is the value of Y at X on that line?"

It's important to remember, when we say "LINEAR" interpolation, or "LINEAR" algebra, we're talking about working on straight lines. So that's just a tip for anything dealing with linear mathematics, is they all deal with straight lines. (finding Y at X on a straight line is linear interpolation).

Linear means "Straight Line" and "Interpolation" means "the insertion of something of a different nature into something else."

So when you are doing "Linear Interpolation" You are Linearly inserting a new point between 2 points. Linear Interpolation is inserting a new point between 2 points on a straight line.

Solving for Y at X is doing Linear Interpolation. Basically I have a set of X and Y values. They are dependent variables. The value of Y is dependent on the value of X.
So, If I have a table as so:

__X_____Y__
__1__ | __4__ < ---- Point A
__2__ | __?__
__3__ | __?__
__4__ | __16__ < ----- Point B

When X is 1, Y will be 4
When X is 4, Y will be 16.

Linear interpolation is solving for Y at X. If X is 3 in this table, Y is 12.

I graphed this table in a graphing calculator. Unfortunately values only went from -10 to 10, so I set Point A=(1, 4) and Point B = (2, 8), but it's the same graph, I just used different points on the same line to draw the graph. Basically when doing linear interpolation, you can solve for any Y value on this line given any X and 2 other points on the same line. That is what Linear Interpolation is for. To find other points on the same line.

We need to solve for Y at X=2, and solve for Y when X=3. Which we use the equation of Linear Interpolation to do.

The Equation for Linear Interpolation is


Where
X1, Y1 is the start_point (Point A);
X2, Y2 is the end_point (Point B);
X is an independent variable; (an argument or parameter) you feed into the function
The function solves for Y at X.

If you solve for...
(X1,Y1) = (1, 4),
(X2, Y2) = (4, 16),
X =2
Y will equal 8.

if you say X is 3,
(X1,Y1) = (1, 4),
(X2, Y2) = (4, 16),
Y will equal 12

To break down the function further... You can imagine the function is sort of generating a ratio. "For each X so amount of Y will be given".
That is this part of the function: (y2-y1)/(x2-x1)

This ratio is also known as the "Slope" of the line. This part might be more familiar to you from high school math as:

(fun fact; In this image the Triangle symbol is called "Delta" and whenever you see it, it usually means "the difference between", you'll see it in programming too. "DeltaTime" means "The difference between 2 times" In this image, Delta X and Delta Y mean "The difference between 2 X's and Y's)

We use the start and end point to calculate the slope.

The rest of the equation y1+(x-x1) is applying an offset to our new value X. (since our line isn't always at point 0, 0 in our equation, when calculating y we need to account that we're applying an offset.
 

The Function for Linear Interpolation in Python code would look like the following:

# Solve for Y at point X given line (x1, y1), (x2, y2)
def get_interpolate(start_point, end_point, x):
    x1, y1 = start_point
    x2, y2 = end_point

    y = y1+(x-x1)*((y2-y1)/(x2-x1))
    return y

In the GIF below, The Red Dots are the start and end points. The red line shows the linear sequence of all values of Y at any Given X between the Start and End Points. And the Blue Dot is the linear interpolate at any specific given X along the red line.

(red line = every possible linear interpolate, blue dot = 1 linear interpolate at a time)

In this GIF, Each frame I am increasing or decreasing the value of X by 1, and solving for Y using the python function I posted above to get the Y of the blue dot at X. When the blue dot hits the start or end point, I'm multiplying the incrementor by -1 to switch the blue dot's direction. This way you can see how the value of Y changes as X changes.

Note: Because I am using pygame, the grid position (0, 0) starts in the upper left hand corner.

Values: (X1, Y1) = (2, 3), (X2, Y2) = (15, 15)

 

Alright, and finally, in order to make that gif, I actually used Python and PyGame to program some code that does Linear Interpolation to help you understand it better. Here is the snippet for that code:
https://gitlab.com/-/snippets/2252356

Enjoy!

P.S. I punched the equation into a graphing calculator for you too... The line you see is not the same thing as I coded, the line is Y at any given X. If you change the x1, y1, x2, y2 variables, the line will move because you're moving your start point and end point.
https://www.desmos.com/calculator/jg3pfrrkqa

"Lerping" in game design makes use of linear interpolation by calculating how much of a jump a game object needs to be transformed each frame to insure a smooth sliding transition from Point A to Point B in a given frame of time.

I.E. How big of steps do I need to take If I want to take 1 evenly spaced step each second, in order to move 30 feet forward in straight line in exactly 30 seconds?

That's what Lerping is solving for. You can avoid calculating that average "step size" between point A and B to add each frame to your current position using Linear Interpolation, You can set a game object's position at any point of time by simply calculating where Y should be given X and 2 other points.

[Damian666]

oh wauw, thats nice of ya mate.

 

im going to read it , hopefully i get it xD

 

and what would i use on a curved part of a line?

[Oddly]

2 minutes ago, Damian666 said:

oh wauw, thats nice of ya mate.

 

im going to read it , hopefully i get it xD

 

and what would i use on a curved part of a line?

A curved line is not going to use a linear function. I believe what you're looking for for curves is Hyperbolic Interpolation. Curved lines are non-linear, which will have a much different function. Probably something that involves log or exponential functions. I'd have to sit down and try to figure out how to interpolate on a curved line to answer this. I might give it a shot this weekend. If I have the time.

[Damian666]

would be great, because i have to deal with both straight, and curved lines >.<

[Oddly]

1 minute ago, Damian666 said:

would be great, because i have to deal with both straight, and curved lines >.<

 

I gotta learn it anyway, so ill make a tutorial when I wrap my head around that. Typically you learn linear algebra before non-linear because straight lines are easier to visual.

[Damian666]

thanx bro

[Arufonsu]

wow, you just summarized half of my calculus semester from last year in a single post, plus, is pretty well explained and goes straight to the point 
thanks a lot for this, "lerp" in game dev makes way more sense to me now