TITLE: WAVEFORM — the shape of sound
PROMPT: Compose 'WAVEFORM — the shape of sound', an educational data-art piece: a large canvas oscilloscope-style waveform continuously morphing between sine, square, saw, triangle and noise shapes; frequency and amplitude dials; a spectrum analyzer column beside it; annotations with hairline leader lines labeling crest, wavelength, amplitude in editorial type. Palette: ink on bone with an electric cobalt trace, vermilion annotation accents. Interactions: shape chips morph the wave (animated interpolation); frequency and amplitude via draggable dials with mono readouts in Hz and dB; a LISTEN button plays the current tone (WebAudio, gesture-gated, volume-capped); typing a number jumps frequency; a freeze button plus measurement crosshair. Precise, beautiful, genuinely educational.
DESCRIPTION: An editorial instrument page in ink-on-bone: a large graticule scope where an electric-cobalt trace (with a soft phosphor echo pass) continuously renders the selected waveform, its cycle count scaling logarithmically with frequency so pitch is legible on screen. Sine, square, saw, triangle and noise chips crossfade the actual sample function — the trace visibly morphs between shapes over half a second rather than snapping. Two machined draggable dials (drag vertically, scroll-wheel, or arrow keys; 270° needle sweep) set frequency 40–2000 Hz and amplitude −40–0 dB with mono readouts in Hz and dB; the amplitude readout also drives real leader-line geometry — hairline vermilion rules span exactly ±amplitude around the baseline. Editorial italic annotations with hairline leaders label crest, wavelength and amplitude. A 16-bar spectrum column beside the scope shows the harmonic peak at the current fundamental (or a broadband smear for noise). Hovering the scope arms a vermilion measurement crosshair reading Δt (period, ms) and instantaneous amplitude; FREEZE halts phase and spectrum while the crosshair still works. LISTEN plays the genuine tone through a gain-capped (≤0.12) WebAudio chain with lowpass smoothing — oscillators map 1:1 to the displayed shape, noise uses a looping white-noise buffer.
TECHNIQUES: Canvas 2D trace recomputed per frame from analytic sample() functions with linear morph interpolation between previous and target shape; hash-based value-noise (multiply-xor-shift, smoothstep blend) so noise is continuous in phase; logarithmic frequency→on-screen-cycles mapping; pointer-capture dial widgets with wheel + keyboard accessibility (role=slider, tabindex); leader lines repositioned from amplitude in JS on resize; DOM bar spectrum with exponential falloff around the fundamental; WebAudio graph created only in a click handler (try/catch-guarded), gain hard-capped at 0.12 with setTargetAtTime smoothing; prefers-reduced-motion collapses CSS transitions; offline, system serif + mono stacks, responsive 360px→4K with clamp() and grid re-flow (annotations hide below 760px).
INTERACTION: Watch — the cobalt trace scrolls at a speed tied to frequency; spectrum bars flicker around the fundamental. Shape chips morph the wave continuously. Drag FREQ/AMP dials vertically (or wheel/arrow keys) — readouts update in Hz/dB and leader lines rescale. Type a Hz value and press Enter to jump frequency. LISTEN plays the tone (capped volume); STOP silences. FREEZE pauses phase; hovering the scope shows a dashed vermilion crosshair with Δt ms and V readout wherever you point.