Notifications

Interpolation - Graphs and Curves

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

Recap

When we left off In Part 1, we had covered the concept of Time being the main driving force in interpolation. In our case it was a number between 0 and 1. We then showed that you could intercept that time value before it was applied to our interpolation and give it a different value (in effect changing how the motion looked).

The changed value we called a Delta. It is the change in the time value ...over time. This concept can be a bit confusing so let's break it down a little.

Delta

Let's start by visualizing time ( our 0 - 1 value ).

Now that we have a visual representation of time, let's have a look at some of the code from part 1 again:

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

- It returns 0 for any value less than 0.4
- Then returns 0.5 for the value 0.5
- After 0.6, returns 1.

Let's have a look at that as a second axis against Time:

We now have a second axis. Let's draw lines that represent the time passing:

The blue line represents our Delta value, which stays at the value 0 right up until just before 0.4.

Next it switches to the Delta value of 0.5:

It stays there until it hits 0.6, then it returns 1.

Now we have a graph that visually represents the motion of our line:

At first it can be difficult seeing how the graph is able to visually represent the line motion. Once you get used to the idea though, you can very quickly tell what effect a curve will have on your values. Let's move away from my ms-paint doodles and look at some other graphs:

Curves

Take this one for example:

At Time 0, you get a value of... 0. Similarly for 0.4, 0.5, etc. Each Time value returns the same value as a Delta. This is our old friend Linear Interpolation again. Only now you can see exactly how linear it actually is.

Finally to the good stuff. Now that we can see what a graph line looks like, we can look at our first graphed curve:

Very subtle difference. Let's see what effect it has on our numbers:

As you can see, sampling the Time value against this curve still returns a value between 0 and 1, but it gives you slightly different values. Values that represent something speeding up and slowing down. Far more natural than something moving without any apparent velocity. It is the difference between the motion of these two:

It can be a little hard to tell the difference in such a simple example, but trust me on this, smooth value changes are something we take for granted in professional work. We rarely notice it, unless it is not there.

What Next?

We are still at a very basic stage here, but now we have a way to visualize custom motion. Next up we need to start looking at how we can go about defining these in code.

Continue in Part 3

Other Projects