Function interpolatorObject

Interpolate child values between two objects. Non-recursive.

const a = { name: `Alice`, age: 30, city: `New York`, radians: 0, point: { x: 0, y: 0 } };
const b = { name: `ALICE`, age: 4, city: `New York`, radians: Math.PI * 2, length: 10, point: { x: 10, y: 10 } };

// Interpolate using default settings
const m = interpolatorObject(a);
const r = m(0.5, b); // Interpolate by 50% to value of `b`
// { name: `ALIce`,  age: 17, city: `New York`, radians: 3.14, point: {x: 10, y:10}}
Copy

Note in the above example the 'point' property isn't interpolated, because it's an object. In the case of unsupported data types like this, the interpolator snaps between the A value and the B value based on a threshold (default: 0.5). In the above example, because the progression is 0.5, the interpolator returns the B value for 'point'. If the progression were 0.49, it would return the A value for 'point'.

Provide handlers for interpolating specific properties:

import * as Points from '@ixfx/geometry/point';

// Use default interplators except for the 'point' property
const m = interpolatorObject(a, {
  point: (a, b) => Points.interpolator(a, b), // Use @ixfx/geometry point interpolator for the 'point' property
});
const r= m(0.5, b);
// Now the 'point' is interpolated as well:
// { name: `ALIce`,  age: 17, city: `New York`, radians: 3.14, point: {x: 5, y:5}}
Copy

If a handler for a given property is not defined, we use fallback interpolation for number, string and boolean value types. These will use the default settings for their respective interpolator functions, or they can be provided:

const m = interpolatorObject(a, {}, {
  optionsStrings: { style: `token`, tokenise: `character` }, // Use character tokenisation for string interpolation
  optionsNumbers: { easing: `easeInOutQuad` }, // Use easeInOutQuad easing for number interpolation
  optionsBooleans: { threshold: 0.8 }, // Use a threshold of 0.8 for boolean interpolation
});
const r = m(0.5, b);
Copy

When creating the interpolator you can pass in the initial target ('B' value) and also set the threshold used for unknown value types:

const m = interpolatorObject(a, {}, { b: targetValue, fallbackThreshold: 0.25 });
m(0.6); // Don't need to pass in target, since it's already baked-in.
Copy

If you don't pass in the target, it defaults to the start value, so the interpolator doesn't 'move'. Provide a target when calling the returned function as shown in the earlier examples.

The function is stateful in that the last set target is remembered. It's also possible to change the initial value:

m(0.5, newTarget); // Set a new target to interpolate to
m(0.5, newTarget, newOrigin); // Set both a new target and new origin
Copy

When target or origin changes, we recreate the handlers defined on the handlerFactory, or set up the fallback defaults.