The Webtar

Controls & Shortcuts

The Webtar is designed for expressive performance using a combination of mouse, keyboard, and device sensors.

Keyboard Shortcuts

Chord slots persist the full playable state: string quantity, base/fundamental frequency, and each string’s tuning + geometry (frequency, angle, length, x, y). This lets you build a 7-step performance pipeline and jump between saved configurations instantly.

Mouse & Touch Interaction

• Hover / Strum: Move the cursor across strings to excite them. The velocity and acceleration of your movement determine the volume and spectral brightness (timbre).
• Click / Tap: Plucks a string at a specific point.
• Double Click: Toggles fullscreen (if clicked on empty space).

Mobile / Sensors

• Gyroscope: Tilt your device left or right to control the Whammy Bar pitch bend.

HUD Controls

• Strings: Drag up/down or click arrows to change string count (1-24).
• Freq: Drag up/down or click arrows to change the fundamental tuning frequency.
• Toggles: Enable/Disable Hover or Click interactions.
• Whammy Visual: Shows the current bend angle and sensitivity setting.

Theoretical Basis

The Webtar combines two distinct simulation approaches to achieve both visual realism and audio fidelity.

1. Visual Physics: 1D Wave Equation

The visual representation solves the 1D Wave Equation using an Explicit Finite Difference Time Domain (FDTD) method.

$u_{tt} = c^2 u_{xx} - 2\sigma u_t$

This simulates traveling waves, reflections at boundaries, and interference patterns (standing waves) in real-time at 60fps. It allows the strings to visually “wobble” and react to the whammy bar’s tension changes.

2. Audio Synthesis: Modal Synthesis

For audio, FDTD can be unstable at high frequencies in a browser environment. Instead, we use Modal Synthesis. A string is modeled as a sum of damped sinusoidal modes.

$y(t) = \sum_{n=1}^{N} A_n e^{-\gamma_n t} \sin(n \pi x_{pickup}) \cos(\omega_n t)$

• Excitation: The pluck position $x_{pluck}$ determines the initial amplitude of each mode (Comb Filtering / Missing Fundamental).
• Damping: High-frequency modes decay faster ($\gamma_n \propto n^{1.35}$), simulating internal friction and air resistance.
• Embellished Harmonics: When “Shift” is held, the engine applies a “Virtual Finger” constraint. It suppresses modes that don’t match the harmonic series of the touched node, but intentionally leaks a “Shadow Fundamental” and sub-harmonics to add body and low-end weight to the sound.

3. Whammy Physics: Hybrid Ghost Model

The whammy bar uses a novel Hybrid Physics Engine to handle the return-to-zero behavior:

1. Ghost Linear: Simulates a perfect linear return based on the selected sensitivity (ms).
2. Ghost Spring: Simulates a mass-spring-damper system tuned to the same duration.
3. Blending: The actual output blends these two simulations based on a “bounciness” factor, allowing for a return that is both precise in timing and organic in feel.

Software Architecture

The application is structured using several classic software design patterns to manage complexity.

Design Patterns

• AudioWorklet Pattern: All synthesis logic runs on a separate high-priority audio thread to prevent UI jank (garbage collection, layout thrashing) from causing audio glitches.
• Command Pattern: Excitations (plucks, strums) are encapsulated as commands passed from the InteractionManager to the VirtualString, and then to the AudioWorklet.
• Observer Pattern: The InteractionManager observes DOM events and notifies strings. The strings observe their own physical state to update visuals.
• Facade Pattern: The InstrumentApp class provides a unified interface to the subsystems (StringComposer, InteractionManager, AudioGraph), hiding the initialization complexity.
• Factory Pattern: The StringComposer generates string ensembles based on tuning systems (Equal Temperament, Just Intonation) and layout algorithms (Fan, Parallel, Random).

Audio Signal Graph

The signal chain is designed for “Mastering-grade” loudness and clarity within the browser:

1. Sources: Polyphonic String Synthesizers (AudioWorklet).
2. Bus: Strings sum into a StringBus.
3. Dynamic EQ: Active harmonics trigger a bass boost (+15dB @ 200Hz) and high-cut to warm up the tone.
4. Reverb: Convolution Reverb (Impulse Response) on a send/return path.
5. Dynamics Chain:
   • Pre-Gain: Drives the signal.
   • Upward Expander: Increases perceived density.
   • Bus Compressor: Glues the mix together (Ratio 3.2:1).
   • Limiter: Prevents digital clipping (Ceiling -1.0 dB).

Physics Model

The core simulation solves the wave equation:

$u_{tt} = c^2 u_{xx} - 2\sigma u_t$

Where:

• $u(x,t)$ is the displacement of the string.
• $c$ is the wave speed.
• $\sigma$ is the damping coefficient.

Discretization

The string is discretized into $N$ segments. The update equation for each point $i$ at time step $n+1$ is:

$u_i^{n+1} = (2 - 2C^2)u_i^n + C^2(u_{i+1}^n + u_{i-1}^n) - u_i^{n-1}$

Where $C$ is the Courant number ($C = c \Delta t / \Delta x$).

This method accurately reproduces physical phenomena such as:

• Traveling Waves: Excitation creates two pulses traveling in opposite directions.
• Reflections: Waves invert upon reflection at fixed boundaries (bridge/nut).
• Interference: Standing waves emerge from the superposition of traveling waves.

References

1. Julius O. Smith III, Physical Audio Signal Processing. (Digital Waveguides, FDTD).
2. Karjalainen, M., Välimäki, V., & Järveläinen, H., Acoustic Guitar Synthesis. (Body resonance modeling, excitation shaping).
3. J. Woodhouse, On the synthesis of guitar plucks. (Transient analysis).
4. J.M. Adrien, Modal Synthesis. (The basis for the audio engine).
5. Francisco Esquembre, Fremont Teng, Loo Kang Wee, The Vibrating String. (Basis for the visual FDTD model).
6. Falstad, Paul. StringWave. (https://www.falstad.com/loadedstring/, accessed feb 2026)