@labcat2020/p5.audioreactive-capture

p5.js frame capture — headless/browser ZIP export with DOM layer compositing for Animation Lab.

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

Install

pnpm add @labcat2020/p5.audioreactive-capture p5 jszip

Exports

{
  ".": "./src/p5.capture.js",
  "./dom-layer": "./src/domLayerCaptureBackground.js",
  "./composite": "./src/extensions/compositeDomCapture.js"
}

Usage

import p5 from 'p5';
import initCapture from '@labcat2020/p5.audioreactive-capture';
import { createDomLayerCaptureBackground } from '@labcat2020/p5.audioreactive-capture/dom-layer';
import { compositeDomCaptureExtension } from '@labcat2020/p5.audioreactive-capture/composite';

const sketch = (p) => {
  p.setup = () => {
    p.createCanvas(1920, 1080);
    initCapture(p, {
      prefix: 'MySketch',
      enabled: false, // toggled via capture UI / headless flag
      captureCSSBackground: true,
      extension: compositeDomCaptureExtension({
        background: createDomLayerCaptureBackground(p.bgWrapperEl)
      })
    });
  };
};
new p5(sketch);

• p5.capture.js — core initCapture(p, opts) (requires p5.prototype.getSongPlaybackTime if audio-synced).
• domLayerCaptureBackground.js — captures CSS/DOM background layer.
• compositeDomCapture.js — composites WebGL canvas + DOM layer into final frames (ZIP via jszip).

Peers & deps

• peerDependencies: p5@^2.2.3
• dependencies: jszip@^3.10.1

License

MIT — LABCAT