@labcat2020/p5.audioreactive

p5.js audio-reactive toolkit — MIDI/FFT helpers, sound boot, and shared sketch utilities for Animation Lab series.

Renamed from @labcat2020/audio-react → @labcat2020/p5.audioreactive (Sep 2026). Published to npm.

Install

pnpm add @labcat2020/p5.audioreactive p5
# optional peers already handled by host:
# p5@^2.2.3

Exports

{
  ".": "./src/p5.audioReact.js",
  "./p5.audioReact.js": "./src/p5.audioReact.js",
  "./p5.colorGenerator.js": "./src/p5.colorGenerator.js",
  "./p5.Polar.min.js": "./src/p5.Polar.min.js",
  "./p5.polygon.js": "./src/p5.polygon.js",
  "./p5.pattern.js": "./src/p5.pattern.js",
  "./p5.randomColor.js": "./src/p5.randomColor.js",
  "./p5.fps.js": "./src/p5.fps.js",
  "./sacredGeometry.js": "./src/sacredGeometry.js"
}

• p5.audioReact.js — getSongPlaybackTime(), scheduleCueSet(), loadSong()/loadMidi via @tonejs/midi + p5.sound boot (p5.soundBoot.js, p5.setGlobalP5.js).
• p5.fps.js — p.enableFpsIndicator() / disable / toggle / updateFpsIndicator() + aliases showFps/hideFps; bottom-right lab-label badge (hidden during capture). See Usage below.
• p5.colorGenerator.js / p5.randomColor.js — palette helpers (randomColor port).
• p5.Polar.min.js (Liz Peng) — polarTriangle, polarEllipse, etc.
• p5.polygon.js — deprecated re-export → canonical is @labcat2020/p5.polygon.
• p5.pattern.js (Taichi Sayama) — pattern fills.
• sacredGeometry.js — now canonical is @labcat2020/p5.sacredgeometry; kept here for compat.

Usage

import p5 from 'p5';
import '@labcat2020/p5.audioreactive/p5.audioReact.js';
import ColorGenerator from '@labcat2020/p5.audioreactive/p5.colorGenerator.js';

// in sketch setup:
await p.loadSong(audioUrl, midiUrl, (data) => {
  p.midiPpq = data.header.ppq;
  p.scheduleCueSet(data.tracks[0].notes, 'onCue');
});
p.fft = new p5.FFT();

FPS indicator (bottom-right badge, shares lab-label style from @labcat2020/animation-lab):

import '@labcat2020/p5.audioreactive/p5.fps.js';
// in setup(): p.enableFpsIndicator({ decimals: 0, updateInterval: 250 })
// Toggle: p.toggleFpsIndicator(); aliases: p.showFps(), p.hideFps()
// Markup auto-created if missing; provide <div id="fps-indicator" class="lab-label lab-label--bottom-right lab-label--fps" hidden>
// via @labcat2020/animation-lab/components/FpsIndicator.astro or SketchLayout showFps prop. Hidden during capture.

Geometry (prefer new libs for new code):

import '@labcat2020/p5.audioreactive/p5.Polar.min.js';
import '@labcat2020/p5.polygon'; // or @labcat2020/p5.audioreactive/p5.polygon.js (compat)
import { PTN } from '@labcat2020/p5.audioreactive/p5.pattern.js';

Migration

• audio-react → p5.audioreactive — update imports @labcat2020/audio-react → @labcat2020/p5.audioreactive.
• For polygons only (no audio), use @labcat2020/p5.polygon (70 lines, no Tone/MIDI).
• For sacred geometry, use @labcat2020/p5.sacredgeometry.

Peers & deps

• peerDependencies: p5@^2.2.3
• dependencies: @tonejs/midi@^2.0.28, p5.sound@^0.2.0

License

MIT — LABCAT