In game dev, generative art, and creative coding, sine is a ubiquitous function that is often used as a spring-like oscillator for a given parameter.
On its own, sine has some undesirable qualities which most developers will encounter and adjust in isolated situations. The purpose of Bounded Sine is to solve these issues up-front in a reusable way:
| Sine | Bounded Sine | Benefits |
|---|---|---|
Period = 2 * PI |
Period = period, which defaults to 1. |
No longer need to work in radians. Period can be any value. |
Is bounded by [-1, 1] |
Is bounded by [yMin, yMax] |
Bounds can now match the desired min/max value of a parameter. |
fx(0) = 0 |
fx(0) = yStart where yMin <= yStart <= yMax |
Starting value can be set rather than it being fixed. |
Here's an example:
const fn = boundedSine({ yStart: 2, yMax: 3, yMin: 0 });
Bounded Sine also takes period and invert parameters. Note that when invert is true, f(0) does not always equal yStart because the function is reflected across its average y-value.
const fn = boundedSine({ yStart: 2, yMax: 3, yMin: 0, period: 10, invert: true });
| Parameter | Default | Description |
|---|---|---|
options |
{} |
boundedSine takes a single options object. |
options.yStart |
0 |
The value of fx(0) before translations. |
options.yMin |
-1 |
The minimum y-value before translations. |
options.yMax |
1 |
The maximum y-value before translations. |
options.period |
1 |
The length of one cycle of the curve. |
options.translateX |
0 |
Translation applied in the x-direction. |
options.translateY |
0 |
Translation applied in the y-direction. |
options.invert |
false |
Reflects the functions around the average y-value. |
yarn add bounded-sine
import { boundedSine } from "bounded-sine";
const fn = boundedSine({ yStart: 2, yMax: 3, yMin: 0 });
const yStart = fn(0)