Notifications

Interpolation - The Basics

This is a multi-part series

- Introduction - what is Lerp/Interpolation
- Curves and Graphs - How to visualize interpolation
- Creating Curves - How to use curves in unity
- Time - Expanding on the concept of delta
- Code - Examples and use cases

Introduction

Interpolation is in my opinion one of the coolest concepts in design. It doesn't matter if you are making games, user interfaces or animations. There is nothing else that gives you a greater bang for your buck in terms of quality for a small change.

When I first started games development, I was new to the idea, and quite frankly, the math scared me. It seemed complex and unapproachable, but It is amazing how simple the concept actually is. Once you understand the basic principle, the possibilities are endless.

What Is Interpolation?

At its core, Interpolation is the act of creating new data between two values. In other words, allowing you to smoothly move from one number to another. In the animated examples you can see those values can be anything from Position, Visibility or Color.

Basics

Before we get to anything fancy, let's start simple. Let's do some super basic maths.

If I gave you the number 3, and said the goal was 10 , How do you get there?

You add 7, right?

Let's label them Start, Difference, and Goal.

So in short:

Start + Difference = Goal

(I know, I know... bare with me)

Here is where it gets interesting. Let me add one more number, we will call it Time. This new number will only ever be some number between 0 and 1. Let's see what happens when we change our formula.

Start + (Difference * Time) = ?

If we pass in 0 for Time, we get.... Start, but if we pass in 1, we get Goal.

Still simple, right? What happens if we pass in.... 0.5 ? We get half-way between Start and Goal.

That.... is basically it! What you have there is the entire concept of Linear Interpolation. In terms of actual code:

```
public float Interpolate(float start, float goal, float time)
{
var difference = goal-start;
return start + difference * time;
}
```

Let's see it in action:

This is the entire core concept.

Everything else builds on this idea. The important thing to remember is that the only thing that changes going forward is Time. (and it will only be between 0 and 1).

Non-Linear Interpolation

What we have created above is motion. In physics terms you should see a similarity to Equations of motion. At the end of the day, that is what we are doing, we are moving something over time from one position to another.

The kind of motion above though, is quite frankly...Boring. it is Linear. It travels the exact same distance at the exact same time. It takes an identical amount of time to get to the halfway point as it does to get from halfway to the end.

That is not how any real life motion works.

In real life, moving items have Acceleration. A car doesn't go from no movement to a set speed and instantly stop. It ramps up speed and then near the end it slows down.

How do we get our equation to do that? In the simplest terms we alter Time. We Intercept the value Time and change it before it is applied to our objects. Let's look at some code:

```
public float ValueSnap(float time)
{
if(time < 0.4f) return 0;
if(time > 0.6f) return 1;
else return 0.5f;
}
```

What this function says is; regardless of what number you pass in, only ever return 0, 0.5, or 1.

If we combine the two:

```
[Range(0,1)]
float time = 0;
void Update()
{
var changedTime = ValueSnap(time);
var answer = Interpolate(3,10,changedTime);
}
```

Let's see what that does to our motion:

Not the most exciting thing in the world, though think about what this means. We can take some value between 0 and 1 that represents how much time has passed and fudge the numbers so the mover is at a different percentage of the transition than the real time.

In animation terms, that means for something to be smooth, it should take longer to move near the start and take longer to arrive at its destination (speed up and slow down).

In Unity

The math behind interpolation is a lot simpler than you might have thought. In fact, let's have a closer look at how it might actually crop up in your Unity3d adventures. The classic Mathf.Lerp.

For a recap, let's remind ourselves of the Interpolate function we have been using:

```
public float Interpolate(float start, float goal, float time)
{
var difference = goal-start;
return start + difference * time;
}
```

Hopefully now it makes a bit more sense. Now let's have a peek under the hood and see exactly what Mathf.Lerp is actually doing:

```
public static float Lerp(float a, float b, float t)
{
return a + (b - a) * Mathf.Clamp01(t);
}
```

Looks pretty similar, right?

Aside from the added Clamp to limit t to between 0 and 1, it is the exact same function.

What Next?

Now that we know what Lerp actually Is, and what it does, in part two we will look at how to make it more useful (in the form of Curves).

Continue in Part 2

Other Projects

Lloyd

2 months ago

Co-founder Red Iron Labs - Other

Very well written

Wichaya Karnchanapee

2 months ago

Designer, Programmer & Musician - Student

Awesome article!

Mathijs Bakker

2 months ago

Unity Game Developer - Programmer

Great article!

Mathijs Bakker

2 months ago

Unity Game Developer - Programmer

Interpolating/lerping from part 1 to part 2 to part 3...