Interactive Dissonance Viewer
Welcome to the Interactive Dissonance Viewer, a state-of-the-art computational psychoacoustics laboratory designed to simulate sensory consonance and dissonance landscapes. Based on the fundamental mathematical models developed by Plomp and Levelt (1965) and expanded by William Sethares, this application visualizes how the physical overtone structures (timbres) of musical instruments interact with the biomechanics of the human auditory system. By manipulating fundamental frequencies, overtone series, and interval ratios, you can explore why traditional musical scales emerged and how non-harmonic instruments define their own natural microtonal harmonies.
Overview: The Biophysical Physics of Harmony and Roughness
In classical acoustics, the perceived sound of a musical note is rarely composed of a single, isolated frequency. Instead, vibrating bodies—such as plucked guitar strings, air columns inside flutes, or struck metallic plates—vibrate simultaneously across multiple natural modes. The lowest frequency is termed the fundamental frequency ($f_1$), which dictates the perceived pitch, while higher mode vibrations generate a spectrum of overtones or partials ($f_2, f_3, f_4, \dots$). The set of partial frequencies and their relative amplitudes forms the instrument's unique timbre.
When two complex musical tones are sounded concurrently, their individual overtone partials enter the human ear, vibrating the basilar membrane located within the cochlea. Psychoacoustic experiments demonstrate that when two pure sine waves close in frequency enter the cochlea simultaneously, they excite overlapping regions of basilar membrane hair cells. When the frequency difference $|f_2 - f_1|$ is extremely small, the listener hears smooth volumetric amplitude fluctuation known as beating. However, as the frequency gap expands beyond the beating threshold but remains within the ear's critical bandwidth ($CBW$), the rapid sensory interference produces a harsh acoustic sensation called roughness or sensory dissonance.
The total sensory dissonance $D_{total}$ between two complex notes with partial sets $(f_{1,i}, a_{1,i})$ and $(f_{2,j}, a_{2,j})$ is modeled mathematically by summing the pairwise dissonance $d(f_1, f_2)$ across every combination of overtones:
$$D_{total} = \sum_{i=1}^{M} \sum_{j=1}^{N} a_{1,i} \cdot a_{2,j} \cdot d(f_{1,i}, f_{2,j})$$
Where the Plomp-Levelt pairwise dissonance function $d(f_1, f_2)$ between two pure sine partials at frequencies $f_1$ and $f_2$ ($f_1 \le f_2$) with normalized amplitudes is defined as:
$$d(f_1, f_2) = e^{-b_1 \cdot s \cdot (f_2 - f_1)} - e^{-b_2 \cdot s \cdot (f_2 - f_1)}$$
Here, $s$ is a frequency scaling factor that normalizes the frequency separation relative to the cochlear critical bandwidth at the lower frequency $f_1$:
$$s = \frac{x^*}{d_{critical}} = \frac{0.24}{0.021 \cdot f_1 + 1.9}$$
The empirical parameters derived from human perceptual testing are $b_1 = 3.5$, $b_2 = 5.75$, and $x^* = 0.24$ (representing the frequency separation of maximum sensory roughness). As a result, when partials align exactly at simple whole-number ratios (e.g., $2:1$ Octave, $3:2$ Perfect Fifth, $4:3$ Perfect Fourth), overtone frequencies overlap perfectly, eliminating sensory roughness and producing deep local minima—or consonance valleys—on the dissonance graph.
How to Use the Visualizer Controls
The interactive workspace is split into a main visualizer viewport on the left and an acoustic control panel on the right. You can interact with the controls as follows:
- Start Demo / Stop Demo: Located at the very top of the sidebar panel. Clicking "Start Demo" locks the application into an automated guided tour, sweeping through iconic musical intervals and triad chords across different instrument timbres. Clicking anywhere on the canvas, moving controls, or re-clicking "STOP DEMO" instantly halts the demo and restores your custom setup.
- Reset Baseline: Restores all instrument parameters, sliders, frequencies, and display modes back to their clean default state instantly.
- Sound ON / OFF: Toggles Web Audio API synthesis. Audio is muted by default to prevent unexpected sound output. When active, moving your mouse cursor or touch finger across the canvas synthesizes real-time additive sine waves corresponding to the exact overtone series and frequency ratios calculated under your cursor position.
- Evaluation Mode:
Intervals (2 Notes): Renders a 2D curve plotting total sensory dissonance on the vertical Y-axis against frequency ratio ($f_2/f_1$ from 1.0 to 2.0) on the horizontal X-axis. Deep troughs represent consonant musical intervals (e.g., Major 3rd at 1.25, Perfect 5th at 1.50).Triads (3 Notes): Renders a 2D heatmap showing the sensory dissonance landscape for three-note chords. The horizontal axis represents Ratio 1 ($f_2/f_1$) and the vertical axis represents Ratio 2 ($f_3/f_1$). Dark blue zones indicate deeply consonant triad chords, while bright yellow and red regions mark harsh dissonant combinations.
- Instrument Timbre Dropdown: Selects different overtone series models:
String / Open Pipe: Harmonic series ($1, 2, 3, 4, 5, \dots$). Generates classic consonance valleys at $1.25$, $1.333$, $1.5$, and $2.0$.Closed Pipe: Odd harmonic series ($1, 3, 5, 7, 9, \dots$), characteristic of clarinets and stopped organ pipes.Bell & Circular Drum: Non-harmonic Bessel-function overtones ($1, 1.19, 1.56, 2.76, \dots$). Notice how the consonance valleys shift away from traditional Western tuning ratios!Free Bar: Non-linear overtones ($1, 2.76, 5.40, 8.93$), characteristic of marimbas and xylophones.Pure Sine Waves: Fundamental frequency only, displaying minimal dissonance except when frequencies lie within a narrow critical band.
- Root Fundamental Frequency ($f_1$): Adjusts the baseline pitch in Hertz (110 Hz to 880 Hz). Notice how increasing the root pitch narrows the relative width of consonance valleys on the absolute frequency axis.
- Active Overtones Limit: Controls the number of partials computed (1 to 12). Higher numbers increase overtone complexity and computational precision.
- Interactive Canvas Inspection: Click, drag, or hover over any point on the canvas graph to view real-time numerical ratio breakdowns and total calculated dissonance indices in the blue readout bar below the canvas.
Technical Architecture & Real-Time Parametric Sound Synthesis Engine
The Interactive Dissonance Viewer is built using plain Web standards (HTML5 Canvas, Vanilla Web Audio API, ES6 JavaScript) engineered for low latency, zero memory leaks, and smooth audio rendering.
Real-Time Parametric Voice-Pool Audio Engine: To eliminate choppy audio artifacts, stuttering, and CPU spikes common in naive Web Audio implementations, this visualizer utilizes a persistent, pre-warmed voice pool. Rather than instantiating and destroying OscillatorNode objects on every pointer event—which causes heavy garbage collection pauses—the synthesizer maintains a fixed pool of running sine wave voices. As the cursor glides across the canvas, partial frequencies and amplitudes are smoothly transitioned using exponential parameter time constants:
$$\text{frequency.setTargetAtTime}(f_{\text{target}}, t_{\text{now}}, \tau), \quad \text{gain.setTargetAtTime}(g_{\text{target}}, t_{\text{now}}, \tau)$$
Where $\tau = 0.02$ seconds (20ms). This provides click-free parameter glissandos and eliminates audio buffer dropouts during active pointer drag events.
DPI Canvas Buffer Normalization: To guarantee crisp rendering on modern high-density screens (Apple Retina displays, 4K monitors) without introducing layout shift (CLS) or trigger infinite flexbox expanding loops, canvas dimensions are managed strictly through standard device pixel ratio scaling:
$$\text{Backing Width} = \lfloor \text{CSS Width} \times DPR \rfloor, \quad \text{Backing Height} = \lfloor \text{CSS Height} \times DPR \rfloor$$
Canvas backing stores update dynamically inside a throttled ResizeObserver lifecycle while keeping CSS display dimensions bound to 100% within parent aspect-ratio container wrappers (.canvas-wrapper).
Heatmap Grid Precomputation: Calculating 3-note chord triads requires computing three pairwise note interactions ($D_{12} + D_{13} + D_{23}$), each summing up to $M \times N$ overtone pairs. For an $80 \times 80$ pixel grid with 8 partials, this requires evaluating over $1.5 \times 10^6$ exponential floating-point calculations per frame. To ensure high execution performance, triad heatmaps utilize an offscreen memoized grid matrix, normalizing max dissonance metrics and rendering HSL color maps ($\text{Hue} = 240 \times (1 - D_{norm})$) cleanly using fast integer typed arrays.
Future Directions & Scientific Expansion
Future development roadmaps for this acoustic laboratory include:
- Custom Overtone Designer: Allowing users to manually draw custom partial frequency and amplitude spectra to design completely synthetic physical instruments and discover their unique natural musical scales.
- Adaptive Cochlear Basilar Membrane Filterbanks: Replacing static empirical Plomp-Levelt curves with dynamic Gammatone or Equivalent Rectangular Bandwidth (ERB) auditory filter models that account for level-dependent non-linear masking in human hearing.
- WebGL 3D Dissonance Landscapes: Upgrading the triad evaluation mode from 2D color heatmaps into fully rotatable 3D topographic terrain surfaces rendered with WebGL shaders.
- Railsback Piano Inharmonicity Tuning Curves: Incorporating string stiffness parameters ($f_n = n f_1 \sqrt{1 + B n^2}$) to model stretched tuning scales observed in grand pianos.
Explore Related Interactive Laboratories on BioniChaos