Smooth Speed Slider?

Patterns and Code
3

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 
/*
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 
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))
}