Example

Here’s an example of using interpolatorInterval to change the background saturation after a click.

Run and edit this example on Glitch

import { interpolatorInterval } from 'https://unpkg.com/ixfx/dist/numbers.js';

const settings = Object.freeze({
  // How long to interpolate
  saturationInterpolate: 20*1000,
});

let state = {
  hue: Math.random(),
  // Start saturation with an interval of 1ms,
  // essentially starting the interpolator at its final value
  saturation: interpolatorInterval(1)
}

const useState = () => {
  const { saturation, hue } = state;

  // Set background based on interpolated saturation value
  const colour = `hsl(${Math.floor(hue*360)}, ${ Math.floor(saturation() * 100) }%, 50%)`;
  document.body.style.backgroundColor = colour;
}

const loop = () => {
  useState();
  window.requestAnimationFrame(loop);
}

// When we click, restart interpolation from 0..1
document.addEventListener(`click`, () => {
  const { saturationInterpolate } = settings;
  state = Object.freeze({
    ...state,
    // Assign a random colour
    hue: Math.random(),
    // Create a new interpolator
    saturation: interpolatorInterval(saturationInterpolate)
  })
});

loop();