Skip to content
ixfx

Advanced

interpolate has a few different ways of being used

// Provide amount, A, B and options
const value = interpolate(amount, a, b, options);
// Get back interpolated result
// Provide an interpolation amount and optional options
const i = interpolate(amount, options)
// Get back a function which takes A & B values
i(from, to); // Yields interpolated value
// Provide A & B values, and options
const i = interpolate(a, b, options);
// Get back a function which takes interpolation amount
const i(amount); // Yields interpolated value

The options for the interpolate function can be left out. It has a single property, limits which determines how to behave if interpolation amount exceeds 0..1.

  • ‘clamp’: clamp returned value to within A & B (inclusive). This is the default.
  • ‘wrap’: value wraps from end to start
  • ‘ignore’: allow return values which exceed A & B.

For example:

import { interpolate } from 'https://unpkg.com/ixfx/dist/numbers.js';
interpolate(1.1, 100, 200, { limits: `clamp` });  // 200
interpolate(1.1, 100, 200, { limits: `wrap` });   // 110
interpolate(1.1, 100, 200, { limits: `ignore` }); // 210

Interpolators

The interpolators Numbers.interpolatorInterval and Numbers.interpolatorStepped use the same options as Numbers.interpolate .

This allows us to use an easing curve for non-linear interpolation, determine what to do if interpolation range is breached and provide a custom transform function. For more: Type Numbers.InterpolateOptions 

// Use quadIn easing, wrapping the interpolation amount
interpolatorInterval({ mins: 1 }, 10, 100, {
  easing: `quadIn`,
  limits: `wrap`
});

Re-targeting

The interpolators both return a function to compute the interpolated value. We can use this to re-target the interpolation, allowing A and/or B points to be adjusted from their initial values.

Note:

  • Order of parameters is ‘B, A’; the opposite when creating. This is because it’s more common to want to only adjust the target value.
  • The change internally mutates the interpolator. Subsequent calls to the function make use of the changed A & B values.
const compute = interpolatorInterval({ mins: 1 }, 100, 200);


// A single parameter sets the B value
compute(250); // Use a new range of 100->250 and return computed value
compute(); // Compute value using 100->250 range


// Two parameters set B, A
compute(300, 150); // Use a new range of 150->300 and return computed value