# 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:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![jeff](https://forum.electromage.com/user_avatar/forum.electromage.com/jeff/32/3473_2.png) [@jeff](https://forum.electromage.com/u/jeff)\
**Post date:** [May 19, 2021, 3:41am UTC](https://forum.electromage.com/t/smooth-speed-slider/1249/3 "2021-05-19T03:41:30Z")

</div>

Hey @Nick_W

I believe ZRanger1 [edit: Nope! Wizard] made the pattern in the library called “Example: Smooth Speed Slider” which does this. It’s compact enough that I’ll include it here:

> **Example: Smooth Speed Slider**
>
> ```javascript
> /*
> This pattern is based on the default scrolling rainbow and has a slider to control speed.
> It uses an accumulation based on delta instead of time() so that changes in speed do not cause the animation to jump.
> The downsides is slightly more code, and this pattern won't be synchronized with other Pixelblazes through firestorm.
> */
> 
> var speedRange = 1/1000 // this scales the milliseconds back to a usable range. shown here, the max rate is 1Hz
> var speed = speedRange // controlled by slider
> 
> export function sliderSpeed(s) {
> speed = s*s * speedRange // square it to give better control at lower values, then scale it
> }
> 
> var t1
> export function beforeRender(delta) {
> t1 = (t1 + delta * speed) % 1 // accumulate time in t1, and wrap it using modulus math to keep it between 0-1
> }
> 
> export function render(index) {
> h = t1 + index/pixelCount
> s = 1
> v = 1
> hsv(h, s, v)
> }
> 
> ```

Here’s another approach I use often, which is what I think Scruffy was going to narrow in on with the “delta of” concept:

> **Example: Time Offsets**
>
> ```javascript
> var duration = 2, t1Offset = time(duration / 65.535)
> 
> export function sliderSpeed(_v) {
> var oldDuration = duration
> duration = 10 / (1 + 9 * _v) // Period from 1 to 10 seconds
> t1Offset += time(oldDuration / 65.535) - time(duration / 65.535) + 1
> t1Offset %= 1
> } 
> 
> export function beforeRender(delta) {
> t1 = (time(duration / 65.535) + t1Offset + 1) % 1
> }
> 
> export function render(index) {
> hsv(0, 1, index == floor(t1 * pixelCount))
> }
> 
> ```

---

_[View the full topic](https://forum.electromage.com/t/smooth-speed-slider/1249)._