https://github.com/freder/piecewise
a library for creating composable easing and envelope functions.
https://github.com/freder/piecewise
crossfade easing envelope javascript
Last synced: 21 days ago
JSON representation
a library for creating composable easing and envelope functions.
- Host: GitHub
- URL: https://github.com/freder/piecewise
- Owner: freder
- License: mit
- Created: 2017-02-17T12:16:08.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2021-03-02T17:30:25.000Z (almost 5 years ago)
- Last Synced: 2023-06-12T02:50:16.742Z (over 2 years ago)
- Topics: crossfade, easing, envelope, javascript
- Language: JavaScript
- Size: 221 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# @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
```javascript
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
```javascript
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
```javascript
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
```javascript
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](./visualization-example.js)
## utility functions
```javascript
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
```