Breaking Down Interpolation (Lerp)

What is Interpolation (Lerp(A,B,t))?

Interpolation is a way to estimate values between two known points. Think of it like filling in the gaps between two numbers, positions, or colors smoothly instead of jumping straight from one to the other.

Another way of interpreting interpolation is to try, “guessing the values in between two known points.” If you have two points on a graph, interpolation helps you estimate what lies between them based on patterns.

A Simple Example

Imagine you’re walking from Point A to Point B. Instead of teleporting instantly, you take steps to get there. Interpolation is like deciding how to take those steps—fast, slow, steady, or with a curve.

Everyday Examples of Interpolation

1. Volume Fading in Music – When you lower the volume, it doesn’t just jump down instantly. It gradually decreases—this is interpolation.
2. Video Game Animations – A character moving from one position to another usually does so smoothly, thanks to interpolation.
3. Color Transitions – If a light slowly changes from red to blue, interpolation is used to blend the colors.

Basic Idea in Math

If you have two points:

• Start value = A
• End value = B
• A fraction of the way between them = t (a number between 0 and 1)

The simplest interpolation formula is:

Interpolated Value = A + (B − A) ∗ t

If t = 0, you’re at A.
If t = 1, you’re at B.
If t = 0.5, you’re halfway between A and B.

What is the Interpolated Value Actually Representing?

The value you get from interpolation is a “middle point” between two known values, but what it represents depends on what you’re interpolating.

• If you’re interpolating positions, the value represents a point between two locations.
• If you’re interpolating colors, the value represents a mix between the two colors.
• If you’re interpolating sound volume, the value represents the loudness at that moment.

So, the interpolated value itself isn’t anything special—it’s just a computed number between A and B. What gives it meaning is how you use it.

How Do You Actually Use Interpolation for a Smooth Transition?

The key is that interpolation happens over time. Instead of jumping to the final value, you gradually change the value over multiple frames.

Example: Moving an Object Smoothly Using Interpolation

Let’s say you want to move an object from point A = (0,0) to point B = (100,100) over a fixed time duration (1 second) using interpolation.

Sure! Let’s go step by step and write the example comprehensively, making sure to explain the actual equation properly.

Moving an Object Smoothly Using Interpolation

We want to move an object from point A = (0,0) to point B = (100,100) over a fixed time duration (1 second) using interpolation.

Step 1: Understanding the Formula

The general interpolation formula for a smooth transition is:

Interpolated Value = A + (B − A) ∗ t

Where:

• A = Start position (e.g., (0,0))
• B = End position (e.g., (100,100))
• t = A fraction between 0 and 1 that represents how far along the transition is.

Step 2: How to Compute t Over Time

• In a game or animation, time is divided into frames (e.g., 60 frames per second).
• Each frame, we update t based on the elapsed time (elapsed_time).
• To ensure t smoothly increases from 0 to 1 within 1 second, we calculate:

t = delta_time / total_duration

For a 1-second transition:

t = delta_time / 1.0

For a 2-second transition:

t = delta_time / 2.0

So t increases gradually as time progresses, ensuring smooth movement.

Step 3: Applying the Formula in a Game

Each frame, the object’s position updates like this:

Position = A + (B - A) * t

For a 1-second transition, assuming the game runs at 60 FPS, t increases slightly each frame (delta_time is small).

Why Haven’t You Explicitly Used t Before?

When using something like:

x += speed * direction * delta_time
y += speed * direction * delta_time

You’re applying velocity directly over time. This is a more traditional way to handle movement, where the object’s position gradually updates each frame based on speed.

• This method doesn’t care about where the object started and where it should end after a fixed time.
• Instead, it just keeps moving based on velocity until something stops it.

How is Interpolation Different?

Interpolation (like A + (B - A) * t) is used when:

• You want smooth movement from a defined start to a defined end.
• The transition is tied to a fixed duration, meaning it will always complete in the set time.
• You don’t want speed to dictate when it reaches the target—it must arrive in exactly 1 second (or any given time).

Why is t Necessary for Fixed-Time Transitions?

With interpolation, we calculate position based on progress (t) instead of speed.

• t = elapsed_time / duration ensures that no matter the frame rate, the object always reaches the destination in exactly the given time.
• Instead of adding velocity every frame, the object moves based on how much of the transition has been completed.

How Your Previous Approach Differs

Your usual approach (x += speed * delta_time) doesn’t guarantee reaching a specific point in exactly 1 second—it depends on speed. If the speed changes, the time to reach the target changes too.

Interpolation is more controlled because it maps movement directly onto time. Instead of “keep moving until we arrive,” it’s “we are exactly this far into the transition.”

When Would You Actually Need t?

• When making cutscenes, UI animations, or timed movements where the object must arrive in a set duration.
• When doing spline interpolation (smooth curves) for animation.
• When controlling easing functions like slowing down as you approach the target.

So, you haven’t needed t explicitly because frame-based movement works fine for most gameplay. But for strict timing or smoother movement control, interpolation (and t) gives more precise control.

What is Being Checked?

The only thing being “checked” is how much time has passed (or how much progress has been made in the transition). Instead of instantly setting a value, you calculate it gradually each frame.

Example in Code (Pseudocode)

start = (0, 0)
end = (100, 100)
duration = 1.0  # 1 second
elapsed_time = 0.0

while elapsed_time < duration:
    t = elapsed_time / duration  # Progress (0 to 1)
    position = lerp(start, end, t)
    elapsed_time += delta_time  # Assume delta_time is frame time

Each loop updates t, gets a new interpolated position, and moves the object.

Why Interpolation Works for Anything

Let’s say you’re interpolating color instead of position:

• A = Red (255,0,0)
• B = Blue (0,0,255)
• color = Lerp(A, B, t)

As t goes from 0 → 1, the color smoothly shifts from red to blue.

So what you’re interpolating determines the meaning—the math stays the same.