Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

Easing Between Two Values Over Time With An Interval

Note

This approach pre-populates an array with easing values. In most cases, you're probably better off making function calls when you need the values but I wanted to see how this would work

I'm experimenting with the Web Audio API. I'm capturing start and end points for volume changes and want to apply them with an easing function. The goal is to apply tweaks every 10ms. I needed a way to determine the eased values at that interval. This is what I came up with:

Details

The function takes 5 integer values: a starting time, an ending time, a starting value, an ending value, and an interval. The return value is an array that has a timestamp and volume level for each entry. Everything in the array is spaced at the interval with a possible exception of the last entry. It's always the endTime which means it might not line up exctly if the interval split the time evenly.

It took a while to figure this one out. I feel like I had to have missed hitting good search terms, but I wasn't able to find an example. At some point I'd like to add an animation to this page. That's an exercise for another day.

Playground

This form updates live to show the output from the function based on the inputs.

Notes

  • I'm using this approach to pre-populate an array. In most cases it likely makes more sense to use a function call that produces the values dynamically

  • This is a good starter article if you're not familiar with easing and lerping. It's a little math heavy. I just skimmed those parts and read more of the descriptions

  • The math for the actual easing function is split out on its own to make it easier to switch other easing methonds

  • I'm using easeOutQuad. Other easing functions could be used to replace it. Check out easings.new for examples

  • The unit of startTime and endTime doesn't matter. They values can represent seconds, hours, days, or anything else. They don't even have to be time values, merely a starting and ending integer

References

  • This is a good intro article to easing functions if you're not already familiar

  • Very nice collection of easing functions and examples

  • This has a formula to do a reverse lerp. I didn't end up needing it. Keeping it here for reference anyway