The Sympathy
The story behind The Sympathy
Brief art-deco × triumph × keyboard-rhythm × sympathetic resonance
Inspired by Sympathetic resonance on Wikipedia
Built with Canvas 2D (cabinet, forks, shockwaves, sunburst) · Web Audio API (additive bell synthesis, ConvolverNode plate reverb) · GSAP (door-open, title bloom) · Monoton (Google Fonts) · Cormorant SC
Techniques Additive bell synthesis (fundamental + octave + fifth-above-octave + major-third-two-octaves) · Simple-integer ratio sympathy matching (2:1, 3:2, 4:3, 5:4) · Delayed-onset sympathetic envelopes · Keyboard-as-instrument (12 keys mapped chromatically A₃→G♯₄) · Critically-damped lateral fork wobble · Chord detection within a 2-second rolling window · Radial gold-flood climax bloom with 8-second plate-reverb opening
Direction A 1929 Paris instrument-maker’s catalogue plate rendered in Canvas 2D, benchmarked against Cassandre, Erté, and the Chrysler spire. Monoton does the climactic word in gold foil; Cormorant SC whispers the frequencies.
Result A black-lacquer cabinet of twelve chromium tuning forks. You strike keys and forks ring. When the harmonic ratios line up, silent forks begin to tremble on their own without being touched. Find A₃ + C♯₄ + E₄ inside two seconds and the whole cabinet blooms into a gold-flooded SYMPATHY.
The Story
Sympathetic resonance is one of those physics that you cannot refuse to believe. You strike a tuning fork in your hand. Across the room, a second identical fork begins to sing by itself. You can stop it with your thumb. Nothing connects the two objects except the air and a shared frequency.
The phenomenon is old. Pythagoras is supposed to have noticed it by listening to blacksmiths’ anvils; the 1673 Helmholtz-style experiments systematised it; the sitar and the viola d’amore and the piano’s sustain pedal are instruments built to exploit it. Silence, under this law, is just a state the room hasn’t found the right note for.
The brief was art-deco × triumph × keyboard-rhythm × sympathetic resonance — four nouns to realise together. The art-deco POV pulled the visual register toward Cassandre’s chromium machines, Erté’s jewelled ornaments on black velvet, and the stacked arcs of the Chrysler spire at night. The keyboard-rhythm medium said keys and timing are the mechanic; the keyboard is the instrument. Triumph named the emotional arc: the piece has to land on a climax.
What we built is a cabinet you play. Twelve mirror-polished tuning forks sit in two rows inside a brass case on black lacquer. Each fork is tuned to a semitone from A₃ to G♯₄. Twelve keys on the keyboard — the Q and A rows — each strike a specific fork. Strike one and it rings; it also wakes any neighbour that stands in a simple harmonic ratio to it (a fourth, a fifth, an octave, a major third). Hidden inside the cabinet is a specific three-note chord — the A-major triad, A₃ + C♯₄ + E₄. Find those three keys inside a two-second window and the cabinet sings the chord back to you with every one of its forks at once, under a gold flood, beneath a blooming SYMPATHY title.
The Take
The interaction is the metaphor. Sympathetic resonance is the phenomenon of one body triggering another without contact; the experience is the phenomenon of your keystrokes triggering forks that then trigger their siblings. You aren’t adjusting parameters. You are performing an acoustic physics.
The arc has three discoveries. First — that the keyboard strikes forks one-to-one. Second — that some forks wake each other without being played, and the pattern obeys simple integer ratios (fifths and fourths are loudest; major thirds whisper). Third — that the cabinet has a secret chord that lights the whole case at once and names itself in gold. Thirty seconds in feels different from five seconds in because you have learnt what the cabinet wants.
Typography does real work. Cormorant SC small-caps type in beside each ringing fork: A₃ · 220 Hz, E₄ · 329.63 Hz — specimen-plate style. When the chord fires, Monoton — the striped chromium-marquee face that echoes the forks themselves — blooms the word SYMPATHY in gold-foil across the cabinet. The letters are the resonance. The decay of the text tracks the decay of the sound.
Silence would have defeated this piece. The sonic decision was full-score, per-key additive synthesis: each fork is a bell voice built from a fundamental plus its octave (×0.35), the fifth-above-octave (×0.18), and a two-octaves-up major third (×0.08), wrapped in a 5-ms attack and a 3-second exponential release. Sympathetic voices share the same harmonic stack at −9 dB, but with a 120 ms delay-onset ramp — so you hear the sympathy arrive a moment after the strike, the way a real struck fork reaches across the room to wake its partner. A low brass drone at 58 Hz with a detuned 117 Hz sine under it gives the chamber presence. A ConvolverNode plate reverb stays closed until the climax, then opens to 0.25 wet for eight seconds before sealing again — the room gets audibly bigger for the one moment that matters.
The Tech
Canvas 2D, not WebGL
The cabinet is a Cassandre-style flat graphic: chromium gradients, brass housing, hard highlight stripes, no airbrush. Canvas 2D is the right brush — a ShaderMaterial here would be overkill and would smear the precision. The entire piece is ~500 lines of Canvas 2D + Web Audio + 30 lines of GSAP. The forks, the sunburst, the shockwave rings, the gold climax flood — all 2D paths and gradients.
Each fork is drawn as a single closed path: tops of both tines (rounded), inner faces going down, a small concave-down arc between them at the bridge line, and a large convex-down arc that wraps under the outside of the whole fork — one continuous outline of a real tuning-fork silhouette. A brass stem and ball weight drop below. The whole shape is filled with a horizontal chromium gradient (#F3F5F8 → #D5DBE3 → #7E8A99 → #B8C1CC) and finished with a thin dark edge stroke and a white highlight stripe on the lit side of each tine. Lateral wobble on strike is applied only to the top of the shape — the base of the fork doesn’t move, because in a real tuning fork the node is at the stem.
Sympathy math
On init, we compute every pair of forks (i, j) and check whether max(freq_i, freq_j) / min(freq_i, freq_j) is within ±2 % of {2, 1.5, 4/3, 1.25, 3} — octave, fifth, fourth, major third, and octave + fifth. Pairs that match get a strength (fifths strongest, thirds quietest) and go into a SYMPATHY_PAIRS list. On each strike, we loop through pairs originating at the struck fork and trigger sympathetic voices on the partners, plus visual halos proportional to strength.
Because the twelve forks cover only one octave minus a semitone (A₃ to G♯₄), most intra-cabinet sympathies are fourths, fifths, and major thirds. That’s exactly what you want — you can hear the consonant intervals rouse each other, and dissonant intervals stay silent.
Additive bell synthesis
Real tuning forks have a nearly-pure fundamental plus a very faint second partial; bells have rich inharmonic spectra. We split the difference — our fork voice is four sine partials stacked (1, 2, 3, and 5 × fundamental) with descending amplitude, shaped by a 5-ms linear attack and a 3-second exponential release envelope. Smooth, metallic, recognisably “fork,” but with enough overtone to feel like it fills the cabinet.
// fork voice, simplified
const partials = [
{ mult: 1.0, gain: 1.0 }, // fundamental
{ mult: 2.0, gain: 0.35 }, // octave
{ mult: 3.0, gain: 0.18 }, // fifth above
{ mult: 5.0, gain: 0.08 }, // major third two octaves up
];
// envelope: 5ms linear attack, 3s exponential decay
voiceGain.gain.linearRampToValueAtTime(0.5, now + 0.005);
voiceGain.gain.exponentialRampToValueAtTime(0.0001, now + 3.0);Sympathy voices use the same stack at −9 dB and replace the 5-ms attack with a 120-ms ramp so the sympathetic onset has a palpable “lag” — the way a real fork-to-fork sympathetic response takes time for the sound pressure to excite the resonant mode of the second body.
Chord detection without keystroke history
We keep a rolling list of strikes, each tagged with its key and timestamp, and we discard anything older than 2000 ms on every append. On each strike, we check whether the struck-key set contains all three climax keys (q, t, s — the A₃, C♯₄, and E₄ forks). If yes, we trigger climax: all twelve forks play at full amplitude with a 15-ms stagger, the reverbWet gain ramps to 0.25 over 300 ms and back to 0 over 8 s, a sixth-harmonic-heavy “climax bell” rings on A₃, and the DOM SYMPATHY title blooms via GSAP’s expo.out (900 ms in, 4 s hold, 1.8 s out). After full decay, the flag resets — the cabinet is playable again.
Critically-damped visual wobble
A struck fork’s top tines displace laterally and decay. We compute the wobble each frame as amp × sin(ω t + φ) × fork.w × 0.07, where ω is a per-fork visual frequency in the range 9–16 Hz (high-pitch forks wobble faster, slowly scaled). The amplitude itself decays as exp(-elapsed × 0.8) — a critically-damped second-order envelope, not the ad-hoc pow(1-damp, dt*60) that over-damps to zero. The base of the fork stays put; only the tips move.
Enter sequence
The cabinet starts closed. Over the first ~3 seconds the doors slide open with a cubic-bezier(0.4, 0, 0.2, 1) curve, a gold sunburst draws itself behind the cabinet clockwise, the STRIKE A KEY prompt types in, and the C₄ fork (centre-top of the cabinet) pulses a single gold halo as the invitation. The threshold between landing and participating is deliberate — the curtain rises on a specific object of craft before you are asked to play it.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.