Function interpolate

Interpolates between a and b by amount. Aka lerp.

ixfx Guide on Interpolation

Example: Get the halfway point between 30 and 60

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

Interpolation is often used for animation. In that case, amount would start at 0 and you would keep interpolating up to 1

Example

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

// Go back and forth between 0 and 1 by 0.1
let pp = percentPingPong(0.1);
continuously(() => {
 // Get position in ping-pong
 const amt = pp.next().value;
 // interpolate between Math.PI and Math.PI*2
 const v = interpolate(amt, Math.PI, Math.PI*2);
 // do something with v...
}).start();
Copy

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

If two parameters are given, it instead returns a function which interpolates:

const i = interpolate(100, 200);
i(0.5); // 150

// Compared to:
interpolate(0.5, 100, 200); // 150
Copy

This is useful if you want to reuse the interpolator with fixed a and b values.

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` });
Copy

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