Understanding Lerp (Linear Interpolation)

If you’ve ever dabbled in creative coding, game development, or animation, you’ll eventually face a common problem: how do you smoothly transition a value (like an object’s position, a color, or a volume level) from a starting point to a target over time?

The answer is Lerp, it is shorthand for Linear Interpolation. At its core, it’s a mathematical function that finds a value between two other values, based on a percentage.

The Math Behind It

The concept of linear interpolation is surprisingly straightforward. Let’s look at the basic formula:

result = start + (end - start) * amount;

Here’s a breakdown of the three main arguments that the lerp() function usually takes:

• start: The initial value.
• end: The target value you want to reach.
• amount: The percentage between the two values (usually between 0.0 and 1.0).

Let’s break down why this formula works mathematically and intuitively.

Step 1 — Find the distance between the numbers

First part:

This gives the total distance between the start and end values.

Example

start = 10
end   = 30

end - start = 20

So the total distance between them is 20 units.

Step 2 — Take a percentage of that distance

Now multiply by t (amount):

This gives how far we want to move from the start.

If:

t = 0.0 → move 0%
t = 0.5 → move 50%
t = 1.0 → move 100%

Example:

distance = 20
t = 0.25

20 × 0.25 = 5

So we move 5 units from the start.

Step 3 — Shift from the start position

Now add the start value:

Example:

start = 10
movement = 5

10 + 5 = 15

So 25% between 10 and 30 = 15

LERP is basically:

The formula works because it follows this logic:

1. Find total distance between start and end
2. Take a percentage of that distance
3. Add it to the start position

So:

LERP = start + (distance × percentage)

or

LERP = start + (end − start) × t

That’s the whole idea behind interpolation.

A Simple Example

Imagine you want to find the midpoint between 10 and 20. You would set the amount to 0.5 (which represents 50%):

let mid = lerp(10, 20, 0.5); // Returns 15

If you set the amount to 0.1 (10%), it will return a value much closer to the start:

let closeValue = lerp(10, 20, 0.1); // Returns 11

Watch: Linear Interpolation (Lerp) Tutorial by codingtrain