Function springValue

  • springValue(opts?, timerOrFreq?): (() => number)

  • The same as spring but instead of a generator we get a value. When the spring is done, 1 is returned instead of undefined.

    import { springValue } from "https://unpkg.com/ixfx/dist/modulation.js"
    const s = springValue();
    s(); // 0..1 (roughly - exceeding 1 is possible)

    Options can be provided:

    import { spring } from "https://unpkg.com/ixfx/dist/modulation.js"
    const s = springValue({
     stiffness: 100,
     damping: 10
    })

    Parameters

    • opts: Partial<{
          countdown: number;
          damping: number;
          mass: number;
          soft: boolean;
          stiffness: number;
          velocity: number;
      }> = {}
    • OptionaltimerOrFreq: number | Timer

    Returns (() => number)

      • (): number

      • Returns number

    Example: Applied

    import { Modulation, Data } from  "https://unpkg.com/ixfx/dist/bundle.js"
    let state = {
     spring: Modulation.springValue()
    }

    function loop() {
     const d = Data.resolveFields(state);

     // Apply calculated spring value to compute x value
     const x = window.innerWidth * d.spring;

     
     window.requestAnimationFrame(loop);
    }
    loop();

    Note that the generated value can exceed 0..1 range. This is by design, since a spring can 'overshoot'. See Data.Normalise for functions to normalise.

Settings

Member Visibility