Easing Between Two Values Over Time With An Interval
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.
- 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
Footnotes And References
- •
- •
- •