Sliders, sliders, sliders, and did I say sliders?

Patterns and Code
, ,
1

I realized a good example of all the ways to use a slider is sorely needed.

So I’ll write up a good reference pattern that has a pile of sliders, well commented for each example (and likely each will have alternative configs commented out)

Binary, integer, logarithmic, easing, resetting/triggering, and more.

Ok, code is here… still in progress. Currently mildly assumes you have a 16x16 matrix, but should work for anything like a 50 pixel string too…

Slider Demos v0.5 
// these are examples of how sliders can do a lot of things

// The value of the slider - I use n here, you'll also see v used, whatever it is,
// it's the value 0..1 passed from the slider, into the function.

// binary
export var binary = 1
export function sliderBinaryOffOn(n){
    binary = floor(n+.5)
    // by adding .5, we have the shift from off to on in the middle
    // without it, it'll require going all of the way to the right
    // if you want to be reversed (1 to 0), subtract from 1 (= 1-)
    // you can also use round(), without the +.5
}

// integer
export var integer = 1
export var integermax = 10
export function sliderIntegers_1_10(n){
    integer = min(integermax,round(n*integermax+.5))
    // without the .5, it'll do 0-10
    // the min prevents it going to 11, unless you are in Spinal Tap.
    // And yes, you _could_ just use the same code as below, from A-B, with a round or floor
}

// floating value between A and B smoothly
export var floating = 31
export var floatingmin = 16
export var floatingmax = 31
export function sliderfloating_16_31(n){
    floating = floatingmin + (floatingmax - floatingmin) * n
}

// easing
// this is a truly basic example, see 
// https://forum.electromage.com/t/easing-library-v1-posted-into-pattern-library/1257
// for more easing options... this is just to show that easing in a slider is useful
export var easing = 32
export var easingmin = 32
export var easingmax = 42
export function slidereasing_32_42(n){
    easing = easingmin + (easingmax - easingmin) * n * n * n
    // by multipling n * n * n, that's an easeInCubic, so it's very sensitive on one end, and very fast on the other
    // you could use any easing here though.
    // notice how this is the same code as the floating, but with an easing component.
}

// logarithmic
// So most of the above are using simple scales... 0-10, A-B, even the easing just curves slower at one end.
// But what if you want to slide from very small values (.01 let's say) to very large values (100)
// If you do a simple linear scale from 0 to 100, it'll be very hard to pick very small values,
// but much easier to pick big ones. Easing could help here, but let's try a different answer:
// Using log() and exp(), we can put 1 in the middle of the range, for example, and have the left half be tiny
//  this is hard to show via an led based slider.  I'll try and come up with a good demo for this.
export var logmin = log(.01);
export var logmax = log(100);
export var logscalefactor = 1
export function sliderLogScale(n){
  logscalefactor = exp(logmin + (logmax-logmin)*n);
}

// resetting/triggering
// This is an example of having something reset or change, when you move the slider
// In this case, speed starts at 20, and quickly drops to 2, and while it does, the rainbow speeds up
// Once it hits 2, it stays there.  We want a way to reset the value of speed back to 20.
// the trick: save your current value, and then compare it after you involve the new value.
// if it's different, you're in the moment where you slid the slider, so reset now.
//
// You could also just look for a 0 or 1, meaning you slide all the way to one side, and reset.
//  But what happens if you leave the slider there?  Keeps resetting.  This is a one time reset.
export var speed = 20
export var resetvalue = 1
export var resetvalue_old = 1
export function sliderSpeedReset(n){
  resetvalue_old = resetvalue
  resetvalue = n;
  if (resetvalue_old != resetvalue){
    speed = 20; 
  }
}

export function beforeRender(delta) {
  t1 = time(speed)
  speed = max(speed - 0.01,2)
}

export function render(index) {
  if (index == integer || index == floor(floating) || index == floor(easing) ){
    rgb(1,0,0)
  } else {
    h = t1 + index/pixelCount
    s = 1
    v = 1 * binary
    hsv(h, s, v)
  }
}
2 Likes