Usage

Module Modulation.Easings

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

Simple

Using Easings.time or Easings.time we get back a function that in turn produces a value.

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/dist/modulation.js";

// 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

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/dist/modulation.js";

// 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