Skip to content
ixfx

Usage

Simple

Section titled “Simple”

The simple way to use waveforms with ixfx is with Modulation.wave . It returns a function which in turn provides numeric values.

import { wave } from 'https://unpkg.com/@ixfx/modulation/bundle';


// Set up the wave
// Other shapes: sine, sine-bipolar, saw, square, arc
const m = wave({ secs: 2, shape: `triangle` });


// Later, call m() when we want a value
m(); // Yields a number

You’ll need to call the returned function whenever you need the current value of the wave. This could be as part of a regular update loop (see a little further for an example).

The shape value can be ‘sine’, ‘sine-bipolar’, ‘saw’, ‘square’ or ‘arc’. wave can take different options for the timing: hertz, millis, ticks or secs.

wave({ hertz: 0.1, shape: `sine`});
wave({ millis: 90, shape: `sine`});
wave({ secs: 1,    shape: `sine`});
wave({ ticks: 100, shape: `sine`});
See example on fn-vis

Here’s an example of using wave as part of state

import { wave } from 'https://unpkg.com/@ixfx/modulation/bundle';
import { resolveFields } from 'https://unpkg.com/@ixfx/core/bundle';


const state = {
 intensity: wave({secs: 2, shape: `sine` })
 someOtherState: 10
}


const use = async () {
 const { intensity, someOtherState } = await resolveFields(state);
 // Do something with intensity value...
}

Generator

Section titled “Generator”

An alternative is to use the Module Modulation.Oscillators , which exposes waveforms as generators.

This can be used in for await loops:

import { Oscillators } from "https://unpkg.com/@ixfx/modulation/bundle"
const osc = Oscillators.saw(0.1);
for await (const value of osc) {
  // Do something with value
}

Importing

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


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


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


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