Audio-reactive visuals extract DSP data from audio and map it to visual parameters

Audio-reactive visual systems operate in two stages: first, extract data from a live audio signal using digital signal processing (DSP) — amplitude, frequency bins, pitch, onsets; second, map those numeric values to visual properties such as size, color, position, or particle count. The mapping stage is where creative decisions live: which audio feature drives which visual parameter, and with what curve or scaling. p5.js with p5.sound (wrapping the Web Audio API) is a browser-native platform for this workflow, providing DSP analysis classes and a drawing canvas in one environment. The key insight is that DSP output is just numbers — any numeric visual parameter can be a target, and the relationship can be linear, logarithmic, or nonlinear depending on perceptual intent.

Examples

p5.Amplitude.getLevel() → scale an ellipse’s radius; p5.FFT.analyze() → bar heights in a spectrum visualizer; autocorrelation peak lag → circle arc angle in a pitch display.

Assessment

Given an audio signal, name two distinct DSP features you could extract and describe a visual parameter each could drive; explain why the mapping curve (linear vs. logarithmic) matters for frequency.