the ease and the lerp

I've talked about easings before, a decade ago in a jQuery context and then five years ago based on Processing.

So an easing is a way of translating a linear motion into something smoother and more organic. In general they work as a function, taking in an input from 0.0 to 1.0 (generally a value that's been changing linearly, 0.0, 0.1, 0.2, 0.3...) and outputting a corresponding "where are you at now" value (with some easings, this won't be limited to be stuck between 0 and 1, which allows for a little overshoot and correction)

Easings.net is a cute little site with a pile of these functions. (If you're writing in plain old javasript you will have to remove the "number" typings...)

P5 provides a nice function called lerp() to ease translating the "between 0 and 1ish" values to the actual start (i.e. 0.0) and end (i.e. 1.0) value you want:

lerp(startX,endX,easingFunction(timerValue));

I set up a small p5 sample, and you can replace easePatakk (from this tumblr post) with easing.net's "easeOutElastic"

Easings are also available in CSS. I admit I use them a lot less now than I did back in the jQuery days - there's always something a little weird about treating an verb + adverb (like easing) as a noun (CSS descriptor).