Cymatics Web Audio on Canvas

Cymatics Web Audio art should be described as a cymatics-inspired visualization unless it solves and validates a physical vibrating-surface model. This tutorial maps live frequency energy into a seeded Canvas field, then serializes FFT, smoothing, equations, palette, and fallback so the composition can be reproduced.

Cymatics Web Audio is an artistic translation

Physical cymatics concerns visible patterns created when matter responds to vibration; boundary conditions, material, geometry, modes, damping, and forcing all matter. A browser spectrum mapped into a decorative equation is not automatically a plate simulation. Calling the work cymatics-inspired keeps the claim honest while leaving room for a powerful visual analogy between sound energy and nodal structure.

Write an artist's equation contract: normalized x and y, selected frequency bands, amplitude mapping, mode coefficients, time or phase, seed, and threshold-to-color rule. Cymatics Web Audio becomes reproducible when those values can be saved independently from the live microphone. A recording or fixed synthetic spectrum should regenerate a canonical still even years after the interactive performance.

Name the piece's departure from physical modeling in the visible caption, not only technical notes. Readers should understand that the browser translates sound into an authored field before interpreting resemblance as measurement. Cymatics Web Audio is the creative method, not an experimental apparatus.

Start audio only after a clear gesture

Create or resume the AudioContext from a user action and explain whether the source is an uploaded file, oscillator, playback element, or microphone. Microphone access needs a direct purpose statement and an obvious stop control. Do not record or transmit input unless the product explicitly promises and implements that behavior. The Web Audio API specification is the authority for graph semantics, not a guarantee of identical device characteristics.

Keep synthesis and visualization branches separate so analysis does not accidentally route microphone audio to speakers and create feedback. Cymatics Web Audio can operate from a silent analyser branch. Provide a built-in tone or frozen spectrum for readers who decline permission, have no input device, or use a browser where audio initialization fails. The artwork should remain intelligible before a single sample arrives.

Display a privacy indicator whenever a live input node exists and stop its media tracks when the user closes the piece. Muting the visual alone must not leave microphone capture active.

Freeze the AnalyserNode contract

An AnalyserNode exposes time- and frequency-domain data without changing the audio stream. Record fftSize, frequencyBinCount, minDecibels, maxDecibels, smoothingTimeConstant, sample rate, update cadence, and whether byte or float arrays are used. AnalyserNode visualization screenshots cannot be compared when those parameters drift invisibly.

Select frequency bands from physical frequencies, not hard-coded bin indices, because sample rates and FFT sizes can change the bin mapping. Aggregate with a declared method such as RMS or mean decibel energy, clamp to a bounded range, and add a noise floor. Cymatics Web Audio should not let one transient drive coefficients without bound or fill the frame with unstable flashing. Display live band values so the mapping remains inspectable.

Store analyser settings beside any audio reactive canvas screenshot or recording used in promotion. Otherwise a future editor can reproduce the palette and seed yet fail to recover the visual tempo and frequency response. Include the sample rate and FFT size.

Compose a field rather than a generic spectrum

Define a field such as sin(mπx)sin(nπy) plus a second rotated or radial term, then map audio bands to bounded integer-like modes, phase, and line thickness. Sample the field on a device-independent grid. Draw contours where absolute field magnitude falls below a threshold and use surrounding magnitude for tone. This creates nodal imagery that responds to sound while remaining an explicitly artistic equation.

Art direction lives in restraint: let low energy change a few large structures, mid energy alter intersections, and high energy modulate grain rather than every pixel. Use spectral color mixing for a palette whose changes have authored meaning. Cymatics Web Audio should have recognizable composition at silence, conversation, and sustained tone instead of becoming visual noise whenever the input grows loud.

Clamp coefficient changes per frame as well as their absolute range. Slew limits prevent a single loud transient from teleporting the composition even when the destination value itself is technically valid.

Decouple analysis time from render time

Read analyser data at a bounded cadence and smooth only once—either deliberately in the analyser, in your mapping, or with both effects separately documented. Render with requestAnimationFrame, but do not assume every audio callback corresponds to a frame. Background tabs, low-power devices, and high-refresh displays create different clocks. Use elapsed time for phase and cap large deltas after suspension.

If audio processing itself must run predictably, AudioWorklet for creative audio covers real-time constraints. The visual analyser path is not the place for heavy allocation or physics simulation. Cymatics Web Audio should degrade resolution or frame rate before it blocks controls. Measure long tasks, dropped frames, CPU, and battery on the supported cohort, not only a desktop beauty capture.

Separate the analysis grid from CSS display size and device-pixel ratio. The canonical field should keep its structure across dense screens while export profiles decide how finely contours are rasterized.

This edition serializer validates bounded analysis and field parameters, then proves that key order does not change the canonical receipt; it does not generate or validate a physical Chladni model.

Runnable artifact — sound-field-edition.test.mjs

import assert from "node:assert/strict";import{createHash}from"node:crypto";
const edition={fftSize:2048,smoothing:.72,seed:1847,bands:[.18,.47,.29],field:"sin(mx)*sin(ny)+radial",frame:360};const valid=x=>[512,1024,2048,4096].includes(x.fftSize)&&x.smoothing>=0&&x.smoothing<=1&&x.bands.every(v=>v>=0&&v<=1)&&Number.isInteger(x.seed);
const canon=x=>JSON.stringify(Object.fromEntries(Object.entries(x).sort(([a],[b])=>a.localeCompare(b))));const digest=x=>createHash("sha256").update(canon(x)).digest("hex");assert.equal(valid(edition),true);assert.equal(digest(edition),digest({...edition}));assert.notEqual(digest(edition),digest({...edition,seed:1848}));console.log("PASS: sound-field edition parameters reproduce one receipt");

Run node sound-field-edition.test.mjs. Expected receipt: PASS: sound-field edition parameters reproduce one receipt.

Make silence and reduced motion authored states

At zero input, draw the base geometry and label it as idle rather than showing a broken black rectangle. Offer a pause that freezes the current frame without stopping keyboard interaction, plus a reset to the canonical still. Under reduced motion, disable continuous phase changes and update only on explicit input or show the saved still. Avoid strobes and cap contrast changes that could become uncomfortable.

Canvas needs an adjacent accessible description and live controls with proper labels; pixels do not expose their nodal structure to assistive technology. Announce source and play state, not every frequency update. A kaleidoscope shader can inspire symmetry, but keep a static edition before any GPU or audio initialization. Cymatics Web Audio should remain a complete visual essay when animation is unavailable.

Profile allocations inside the animation loop and reuse typed arrays, image buffers, and paths where practical. Stable memory behavior keeps the visual instrument responsive through a full listening session.

Use physical references without borrowing proof

The Smithsonian Chladni plate is a material historical object connected to demonstrations of vibrating patterns. It can ground visual research and terminology. It does not validate this Canvas equation, its color choices, or a claim that microphone spectra recreate sand on a particular plate. Those claims would require a defensible physical model and measured comparison.

Publish a short note separating reference, simulation, and invention. Chladni patterns can inform the visual grammar while sound field generative art pursues a different experience: live, colorful, interactive, and reproducible. That honesty gives the creative system more freedom, because coefficients and palettes can be discussed as composition instead of being disguised as laboratory accuracy.

Provide keyboard-operable source, play, pause, reset, and intensity controls with visible values. The interactive artwork should be a usable instrument rather than a canvas that responds only to hidden pointer gestures. Caption historical references separately from implementation claims.

Archive a reproducible sound-field edition

Save input type and fixture hash, sample rate, analyser parameters, band definitions, mapping equations, coefficient bounds, seed, palette, canvas size, pixel ratio, frame or elapsed time, browser version, static SVG or PNG, and the serializer receipt. Include a silent fallback and the exact reduced-motion behavior. A canonical edition should render without microphone permission or an external media URL.

Revisit cymatics Web Audio when analyser behavior, equation, audio permissions, or motion policy changes. Compare future GPU work with reaction-diffusion WebGPU art but preserve the Canvas control. The successful piece makes sound feel spatial while keeping its claim bounded: an authored browser field responds to measured frequency energy, and every important choice can be replayed.

Archive a short audio-free parameter sequence for exhibitions and automated tests. It preserves the evolving composition without redistributing source music or depending on microphone permission in an unattended browser.

Stage a small edition set from silence, a synthetic low tone, a fixed three-band fixture, and one user-approved live source. Save identical canvas dimensions, analyser settings, coefficient bounds, seed, palette, elapsed frame, and field equation for every capture, then explain which differences come from input energy and which come from art direction. Repeat the set under reduced motion and with audio permission denied; both should preserve a meaningful static composition, labeled controls, and an accessible description. Profile the animation for a full session on one low-powered device, watching long tasks, allocations, thermal behavior, and control latency rather than chasing a single peak frame rate. The resulting archive supports both artistic critique and technical reproduction while keeping the central claim honest: frequency measurements influence a designed nodal field, but the browser image is not experimental proof of a physical vibrating plate.