Function interpolate

Interpolates between a and b by amount. Aka lerp.

ixfx Guide on Interpolation

import { interpolate } from 'https://unpkg.com/ixfx/dist/numbers.js';
interpolate(0.5, 30, 60);

See also interpolatorStepped and interpolatorInterval for functions which help to manage progression from A->B over steps or interval.

Usually interpolation amount is on a 0...1 scale, inclusive. What is the interpolation result if this scale is exceeded? By default it is clamped to 0..1, so the return value is always between a and b (inclusive).

Alternatively, set the limits option to process amount:

  • 'wrap': wrap amount, eg 1.5 is the same as 0.5, 2 is the same as 1
  • 'ignore': allow exceeding values. eg 1.5 will yield b*1.5.
  • 'clamp': default behaviour of clamping interpolation amount to 0..1

Interpolation can be non-linear using 'easing' option or 'transform' funciton.

interpolate(0.1, 0, 100, { easing: `quadIn` });

To interpolate certain types: Visual.Colour.interpolator, Points.interpolate.

There are a few variations when calling interpolate, depending on what parameters are fixed.

  • interpolate(amount): returns a function that needs a & b
  • interpolate(a, b): returns a function that needs the interpolation amount
  • Returns an interpolation function with a fixed interpolation amount. This function will need the A and B values to interpolate between (ie start and end)

    Interpolation amount is usually 0..1, where 0 will return the A value, 1 will return the B value, 0.5 will be halfway between the two etc.

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

    // Create function
    const fn = interpolate(0.1);

    // Later, use to interpolate between a and b
    fn(50, 100); // 10% of 50..100 range

    This is useful if you have a fixed interpolation amount, but varying A and B values.

    Parameters

    • amount: number

      Interpolation value (0..1 usually)

    • Optionaloptions: Partial<InterpolateOptions>

      Options

    Returns ((a: number, b: number) => number)

      • (a, b): number
      • Parameters

        • a: number
        • b: number

        Returns number

  • Interpolates between a and b by amount.

    Interpolation amount is usually 0..1, where 0 will return the A value, 1 will return the B value, 0.5 will be halfway between the two etc.

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

    // Get the value at 10% of range between 50-100
    const fn = interpolate(0.1, 50, 100);

    This is useful if you have dynamic interpolation amount as well as A & B values. Consider using interpolate(amount) if you have a fixed interpolation amount.

    Parameters

    • amount: number

      Interpolation value (0..1 usually)

    • a: number

      Starting value (corresponding to an interpolation of 0)

    • b: number

      End value (corresponding to an interpolation value of 1)

    • Optionaloptions: Partial<InterpolateOptions>

      Options

    Returns number

  • Returns an interpolation function with a fixed A and B values. The returned function requires an interpolation amount. This is usually 0..1, where 0 will return the A value, 1 will return the B value, 0.5 will be halfway between the two etc.

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

    // Create function to interpolate between 50..100
    const fn = interpolate(50, 100);

    // Later, use to interpolate
    fn(0.1); // 10% of 50..100 range

    Parameters

    • a: number

      Starting value (corresponding to an interpolation of 0)

    • b: number

      End value (corresponding to an interpolation value of 1)

    • Optionaloptions: Partial<InterpolateOptions>

      Options

    Returns ((amount: number) => number)

      • (amount): number
      • Parameters

        • amount: number

        Returns number