# Smooth Speed Slider?

**URL:** <https://forum.electromage.com/t/smooth-speed-slider/1249>\
**Category:** Patterns and Code\
**Created:** [May 18, 2021, 8:20pm UTC](https://forum.electromage.com/t/smooth-speed-slider/1249 "2021-05-18T20:20:05Z")\
**Posts on this page:** 5\
**Page:** 2

<div class="post-metadata">

**Author:** ![Nick\_W](https://forum.electromage.com/letter_avatar_proxy/v4/letter/n/958977/32.png) [@Nick\_W](https://forum.electromage.com/u/Nick_W)\
**Post date:** [May 21, 2021, 4:18pm UTC](https://forum.electromage.com/t/smooth-speed-slider/1249/21 "2021-05-21T16:18:13Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![Scruffynerf](https://forum.electromage.com/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@Scruffynerf](https://forum.electromage.com/u/Scruffynerf)\
**Post date:** [May 21, 2021, 5:02pm UTC](https://forum.electromage.com/t/smooth-speed-slider/1249/22 "2021-05-21T17:02:36Z")

</div>

> [@Nick\_W](#):
>
> How would you work out the t value from delta in the range 0-1?

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?

---

<div class="post-metadata">

**Author:** ![Nick\_W](https://forum.electromage.com/letter_avatar_proxy/v4/letter/n/958977/32.png) [@Nick\_W](https://forum.electromage.com/u/Nick_W)\
**Post date:** [May 21, 2021, 5:17pm UTC](https://forum.electromage.com/t/smooth-speed-slider/1249/23 "2021-05-21T17:17:45Z")

</div>

Got it, I was missing the duration part.

---

<div class="post-metadata">

**Author:** ![Scruffynerf](https://forum.electromage.com/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@Scruffynerf](https://forum.electromage.com/u/Scruffynerf)\
**Post date:** [May 24, 2021, 3:02pm UTC](https://forum.electromage.com/t/smooth-speed-slider/1249/24 "2021-05-24T15:02:12Z")

</div>

Found a wonderful and simple page about easings…

> **[Easing Functions Cheat Sheet](https://easings.net)**
>
> Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right...

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.

---

<div class="post-metadata">

**Author:** ![Scruffynerf](https://forum.electromage.com/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@Scruffynerf](https://forum.electromage.com/u/Scruffynerf)\
**Post date:** [September 22, 2021, 8:53pm UTC](https://forum.electromage.com/t/smooth-speed-slider/1249/25 "2021-09-22T20:53:19Z")

</div>

reminder to myself to revisit this and add the best option(s) to the slider example code I just did [here](https://forum.electromage.com/t/sliders-sliders-sliders-and-did-i-say-sliders/1590)

[Previous page](https://forum.electromage.com/t/smooth-speed-slider/1249.md?page=1)