Back to General and Gameplay Programming

A Brief Introduction to Lerp

Published August 21, 2018 by Matt DesLauriers, posted by mattdesl

Do you see issues with this article? Let us know.

Linear interpolation (sometimes called 'lerp' or 'mix') is a really handy function for creative coding, game development and generative art.

The function interpolates within the range [start..end] based on a 't' parameter, where 't' is typically within a [0..1] range.

carbon (24).png

For example, divide 'loop time' by 'loop duration' and you get a 't' value between 0.0 and 1.0.

Now you can map this 't' value to a new range, such as `lerp(20, 50, t)` to gradually increase a circle's radius, or `lerp(20, 10, t)` to gradually decrease its line thickness.

2018.08.19-22.40.29.gif

Another example: you can use linear interpolation to smoothly animate from one coordinate to another. Define a start point (x1, y1) and end point (x2, y2), then interpolate the 'x' and 'y' dimensions separately to find the computed point in between.

2018.08.19-22.41.19.gif

Or use linear interpolation to spring toward a moving target. Each frame, interpolate from the current value to the target value with a small 't' parameter, such as 0.05.

It's like saying: walk 5% toward the target each frame.

2018.08.19-22.40.53.gif

A more advanced example, but built on the same concept, is interpolating from one color (red) to another (blue).

To do this, we interpolate the (R, G, B) or (H, S, L) channels of the color individually, just like we would with a 2D or 3D coordinate.

2018.08.19-22.39.52.gif

Another quick example is to choose a random point along a line segment.

There are lots of ways to use linear interpolation, and lots more types of interpolation (cubic, bilinear, etc). These concepts also lead nicely into areas like: curves, splines and parametric equations.

Source code for each of these examples is available here: https://gist.github.com/mattdesl/3675c85a72075557dbb6b9e3e04a53d9

About the author:
Matt DesLauriers is a creative coder and generative artist based in London. He combines code and emergent systems to make art for the web, print media, and physical installations.

Note:
This brief introduction to lerp was originally published as a Twitter thread and is republished here with the kind permission of the original author.

[Wayback Machine Archive]

9 Likes 7 Comments

Comments

Rutin

Very cool article! I use linear interpolation to smooth out visual movement, it works very nicely with variable render rates. It's also nice for visual effects like shown above.

Thanks for sharing!

August 21, 2018 04:39 AM

Francisco Tufro

Nice article! I loved the visual examples.

I can't say how many times lerp has been the tool of choice to achieve zillions of nice looking effects using shaders, plus is the basis of rasterization!

Keep the good work

August 29, 2018 03:21 AM

JoshGrams

Note that your "springing toward" example (lerping a fraction of the remaining distance each time) is highly frame-rate dependent. So if your game isn't frame-rate locked (i.e. web-games running on machines with different monitor refresh rates, or even a locked 60 fps game running on a machine too slow to support it) different people may see different behaviors. The spaceship rotation in George Prosser's DRILL_BIT, for instance, is much harder to use on a slow machine.

And the way you're doing it, scaling by the deltaTime, will only partly correct for that. For instance, if your framerate is twice as fast (deltaTime is half the length) then you actually need the square root of the rate (you lerp twice in the same time, essentially multiplying by the factor twice, i.e. squaring it). In the general case you need Math.pow:


// Return a lerp factor for the given frame time which will result in
// the value getting convergenceFraction of the way to the target in
// smoothTime time units.  I usually just use 0.9 or 0.95 for the fraction
// and vary the smoothTime to get the effect I want.
function smoothOver(dt, smoothTime, convergenceFraction) {
	return 1 - Math.pow(1 - convergenceFraction, dt / smoothTime)
}

For further adventures in non-linear interpolation things, Squirrel Eiserloh's Fast and Funky 1D Non-linear Transformations GDC talk is well worth a watch. Although note that with his later (curved) functions, he only mumbles once that he's "normalizing" them (meaning scaling them up so they are exactly one unit tall). Without knowing that, if you try to use some of the formulas he gives as written, you'll end up with something very flat that does almost nothing. But he gives a good intuitive introduction to how to think about constructing some of these things.

August 30, 2018 12:09 PM

r3dux

@JoshGrams I tried your smoothOver function in Unity and it returns NaN:

float GetLerpFactor() { return 1.0f - Mathf.Pow(1.0f - YourLerpFactor, Time.deltaTime / Time.smoothDeltaTime); }

Interested if you have any thoughts but no worries if not, just using the raw lerpFactor times deltaTime seems to be doing the job at the moment. Maybe it'll make more sense after I check out your linked Non-Linear Transformations talk. Cheers! =D

July 19, 2021 09:09 AM