Smooth Speed Slider?

Perhaps I can ask you to help with the easing functions, as you seem to have a much better grasp of it than me. How would you work out the t value from delta in the range 0-1?

I did find one bug. If phase is negative (which it can easily be), then we return a negative time value - which is not what we want! So I added a suitably large constant offset value, to ensure the returned value is always in the range 0-1.

var phase, prev_i
function smoothTime(interval, delta) {
  /*
  time() function to smooth out changes in interval
  prev_i is previous interval
  delta is optional, if passed, will reduce phase offset to 0 after a few seconds
  */
  var smooth = 0.0002 * delta //can't be smaller than 0.0001
  phase += (phase>smooth) ? -smooth : (phase<-smooth) ? smooth : -phase
  var p1 = time(prev_i), p2 = time(interval)
  prev_i = interval
  return (p2 + (phase += (p1 - p2)) + 255) % 1
}

This seems to work with all the patterns I have tried it with so far - admittedly not many, and only 1D patterns.

Let’s say we want things to ease within 30 seconds… (Could be faster or slower, but picking a number helps). Call that duration d

So if we get delta, we start accumulation. So push it into a “total time”: tt += delta
If we find the ratio of tt to d, that’s how far into the duration we’ve gone… So let’s say delta is 300 milliseconds or .003 seconds. So we do the math of tt/d or .003/30, that’s t in 0…1
Next round, we get delta and add it again, and now it’s (for instance .003 again delta) so now tt/d aka t is .006/30 etc etc …
(If t > 1, then we are done, we’ve synced or should have. Phase should be zero)

Clear?

Got it, I was missing the duration part.

1 Like

Found a wonderful and simple page about easings…

I’ll convert these into a quick library for PB, as I can see lots of potential uses. Any 0…1 can be ‘eased’ in so many ways, so it could be brightness, hue, movement, or more.

reminder to myself to revisit this and add the best option(s) to the slider example code I just did here