home
NOTE: Under Construction - I'm in the middle of upgrading my site and lots of stuff is kinda broken. Please forgive the mess.

Easing Between Two Values Over Time With An Interval

August 2023

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

═══ § ═══

Footnotes And References