Sketch: Lerp, Unlerp, and Remap

One of my favorite and most often used functions of all time is “remap”. That is not a standard name, it’s just what I call it. Remap is a more general version of the well known "lerp", which if you haven’t heard of it before, comes from smooshing the words “linear" & "interpolate” together, and remap can be built using lerp and its inverse, "unlerp".

Lerp is simply a weighted average of two values. It’s “linear” because all possible weighted averages of two values make a straight line. If you write any scripts or code or even use Excel, chances are lerp is already there, but it might have a different name. In webgl there’s “mix”, in javascript you might use goog.math.lerp. And it’s so simple to write, a lot of people just add their own even when it’s already there.
“Unlerp” does the opposite of lerp - Given a weighted average and two values, it tells you what the weights are. Unlerp is probably a little less common, and usually has a different name, but it’s still very handy to have at your disposal.


“Remap” is the name I use for combining lerp and unlerp to linearly map a value from interval a to interval b. lerp and unlerp both have an implicit 0-1 (unit) interval, and sometimes I confuse myself about which direction I’m going. Remap makes it so I don’t have to remember -- even if one side is a unit interval. (Yes, it's true, sometimes I use remap when I could just use lerp!) All three functions are doing linear interpolation, but remap is the general form, and is perhaps what a function called “lerp” should be doing.
Remap is crazy useful! It can be used to create mid-points, to convert between different physical units, or even to animate something!