@freder/piecewise

a library for creating composable easing and envelope functions.

installation

# yarn
yarn add @freder/piecewise

# npm
npm install --save @freder/piecewise

example: easing function

const piecewise = require('@freder/piecewise');

function identity(t) {
	return t;
}

function always(c) {
	return (t) => c;
}

const piecewiseEasingFn = piecewise.easing([
	{
		tInterval: [0, 0.5],
		tMap: [0, 1], // optional
		easingFn: identity,
	},
	{
		tInterval: [0.5, 0.8],
		easingFn: always(1),
	},
	{
		tInterval: [0.8, 1],
		tMap: [1, 0], // reverse
		easingFn: identity,
	},
]);

tInterval is mapped to tMap, with which easingFn is called. easingFn only takes one argument t.

visualization:

example: envelope function

const piecewiseEnvelopeFn = piecewise.easing([
	{
		tInterval: [0, 0.5],
		tMap: [0, 1],
		easingFn: identity,
	},
	{
		tInterval: [0.5, 1],
		tMap: [1, 0],
		easingFn: identity,
	},
]);

const finalFn = piecewise.envelope(piecewiseEnvelopeFn, piecewiseEasingFn);

envelope returns the product of the values of an envelope function and an easing function at time t.

visualization:

grey: easing function
red: envelope function
black: resulting function

example: mix function

const f1 = identity;
const f2 = always(1);
const finalFn = piecewise.mix(f1, f2, 0.7);

mix returns a new function that calculates the weighted mean of two functions at time t.

visualization:

grey: f1, f2
black: resulting function

example: crossfade function

const easingFn = piecewise.easing([
	{
		tInterval: [0, 0.6],
		tMap: [0, 1],
		easingFn: always(0),
	},
	{
		tInterval: [0.6, 0.8],
		tMap: [0, 1],
		easingFn: identity,
	},
	{
		tInterval: [0.8, 1],
		tMap: [0, 1],
		easingFn: always(1),
	},
]);

const f1 = always(0.75);
const f2 = always(0.25);
const finalFn = piecewise.crossfade(easingFn, f1, f2);

crossfade mixes two functions and is controlled by easingFn.

visualization:

grey: f1, f2
red: easing function
black: resulting function

visualization

→ visualization-example.js

utility functions

const easing = require('easing-js');
const { utils } = require('@freder/piecewise');

// wrap penner easing function to only be a function of `t`:
const wrappedEasingFn = utils.wrapPennerFunction(easing.linear);
wrappedEasingFn(0.7); // → 0.7