Skip to content
ixfx

Usage

Module Modulation.Easings

Easings can be driven by time or ticks, created by Easings.time or Easings.ticks , respectively.

Simple

Section titled “Simple”

Using Easings.time or Easings.ticks we get back a function that in turn produces a value. The time version runs over a given amount of clock time, typically what you want. ticks is an alternative that progresses with each call, disconnected from clock time.

This approach is very simple as it has temporality and progress tracking “baked-in”. The downside is you can’t easily check if the duration has elapsed or reset the time.

import { Easings } from "https://unpkg.com/@ixfx/modulation/bundle";


// Ease using 'quadIn' curve over three seconds
const e = Easings.time(`quadIn`, { secs: 3 });


// Keep calling e() to get the current value
// Values will be roughly 0..1, over time
e();

More practically, you’d call the returned function as part of a loop that updates state in your sketch.

See an example on fn-vis

Advanced

Section titled “Advanced”

An alternative approach is Easings.timeEasing or Easings.tickEasing .

Instead of returning a function you get a Type Modulation.ModulatorTimed instance, which looks like:

type ModulatorTimed = {
  // Returns value at this point
  // Usually 0-1, but some functions can overshoot
  compute():number
  // Reset easing to beginning
  reset():void
  // Returns true if easing is finished
  get isDone():boolean
}

To use:

import { Easings } from "https://unpkg.com/@ixfx/modulation/bundle";


// Set up easing
const e = Easings.timeEasing(`quintIn`, { secs: 5 });


e.compute(); // Get current value (0..1)
e.reset();   // Reset to 0
e.isDone;    // true if duration is complete
See an example on fn-vis

Importing

Section titled “Importing”
// Sub module
import { Easings } from "@ixfx/modulation.js"
// Eg: Easings.get();


// Whole module
import * as Modulation from "@ixfx/modulation.js"
// Eg: Modulation.Easings.get();


// From bundle
import { Modulation } from "@ixfx"
// Eg: Modulation.Easings.get();


// And within your HTML's <HEAD> </HEAD> block:
<script type="importmap">{ "imports": { "@ixfx":"/ixfx/index.js", "@ixfx/": "/ixfx/" } }</script>