const canvasRef = useRef(null);

const particlesRef = useRef(null);

const rafRef = useRef(null);

const audioRef = useRef({ ctx: null, osc: null, gain: null });

const [m, setM] = useState(3);

const [n, setN] = useState(5);

const [vibration, setVibration] = useState(0.018);

const [particleCount, setParticleCount] = useState(8000);

const [running, setRunning] = useState(true);

const [soundOn, setSoundOn] = useState(false);

const [trail, setTrail] = useState(0.18);

const baseHz = 110;

const frequencyHz = Math.round(baseHz * Math.sqrt(m * m + n * n));

const currentPreset = PRESETS.find(p => p.m === m && p.n === n);

const seedParticles = useCallback(() => {

const arr = new Float32Array(particleCount * 2);

for (let i = 0; i < particleCount; i++) {

arr[i * 2] = Math.random();

arr[i * 2 + 1] = Math.random();

}

particlesRef.current = arr;

}, [particleCount]);

useEffect(() => { seedParticles(); }, [seedParticles]);

useEffect(() => {

const canvas = canvasRef.current;

if (!canvas) return;

const ctx = canvas.getContext('2d');

canvas.width = PLATE;

canvas.height = PLATE;

ctx.fillStyle = '#1a1411';

ctx.fillRect(0, 0, PLATE, PLATE);

const tick = () => {

const arr = particlesRef.current;

if (!arr) { rafRef.current = requestAnimationFrame(tick); return; }

ctx.fillStyle = `rgba(26,20,17,${trail})`;

ctx.fillRect(0, 0, PLATE, PLATE);

if (running) {

for (let i = 0; i < arr.length; i += 2) {

const px = arr[i], py = arr[i + 1];

const amp = Math.abs(chladni(px, py, m, n));

const step = vibration * (amp + 0.002);

const angle = Math.random() * Math.PI * 2;

let nx = px + Math.cos(angle) * step;

let ny = py + Math.sin(angle) * step;

if (nx < 0) nx = -nx; else if (nx > 1) nx = 2 - nx;

if (ny < 0) ny = -ny; else if (ny > 1) ny = 2 - ny;

arr[i] = nx; arr[i + 1] = ny;

}

}

ctx.fillStyle = '#efe5cc';

for (let i = 0; i < arr.length; i += 2) {

ctx.fillRect(arr[i] * PLATE, arr[i + 1] * PLATE, 1, 1);

}

rafRef.current = requestAnimationFrame(tick);

};

rafRef.current = requestAnimationFrame(tick);

return () => cancelAnimationFrame(rafRef.current);

}, [m, n, vibration, running, trail]);

useEffect(() => {

const a = audioRef.current;

if (!soundOn) {

if (a.osc) {

try { a.gain.gain.setTargetAtTime(0, a.ctx.currentTime, 0.05); } catch {}

try { a.osc.stop(a.ctx.currentTime + 0.2); } catch {}

a.osc = null;

}

return;

}

if (!a.ctx) {

const Ctor = window.AudioContext || window.webkitAudioContext;

a.ctx = new Ctor();

}

if (a.ctx.state === 'suspended') {

a.ctx.resume().catch(() => {});

}

if (!a.osc) {

a.osc = a.ctx.createOscillator();

a.gain = a.ctx.createGain();

a.gain.gain.value = 0;

a.osc.type = 'sine';

a.osc.frequency.value = frequencyHz;

a.osc.connect(a.gain).connect(a.ctx.destination);

a.osc.start();

a.gain.gain.setTargetAtTime(0.06, a.ctx.currentTime, 0.05);

} else {

a.osc.frequency.setTargetAtTime(frequencyHz, a.ctx.currentTime, 0.05);

}

}, [soundOn, frequencyHz]);

useEffect(() => () => {

const a = audioRef.current;

if (a.osc) { try { a.osc.stop(); } catch {} }

if (a.ctx) { try { a.ctx.close(); } catch {} }

}, []);

const handleDownload = () => {

const canvas = canvasRef.current;

const link = document.createElement('a');

link.download = `chladni_${m}-${n}_${Date.now()}.png`;

link.href = canvas.toDataURL('image/png');

link.click();

};

const randomize = () => {

setM(2 + Math.floor(Math.random() * 7));

setN(2 + Math.floor(Math.random() * 7));

seedParticles();

};

return (

<div className="cp">

<style>{CSS}</style>

<Seo

title="Chladni Plate · Resonance Laboratorium | Fezcodex"

description="Vibrate a square plate at modal frequencies and watch sand settle along the nodal lines. Faithful to Ernst Chladni's 1787 acoustic experiment."

keywords={['chladni', 'cymatics', 'standing waves', 'physics', 'visualizer', 'sand', 'nodal lines']}

/>

<div className="cp__edge-title">Resonantia · Plate № CXIV</div>

<div className="cp__shell">

{/* — top hairline band — */}

<header className="cp__band">

<Link to="/apps" className="cp__sigil">

<span className="cp__sigil-mark">f</span>

<span>← Index</span>

</Link>

<div className="cp__band-center">Acta Phonica · Liber I</div>

<div>02·V·MMXXVI</div>

</header>

{/* — masthead — */}

<section className="cp__mast">

<div>

<div className="cp__eye">Plate № CXIV — figurae sonorae</div>

<h1 className="cp__title">

Resonance

<em>Laboratorium</em>

</h1>

</div>

<p className="cp__lede">

<span className="cp__lede-drop">E</span>

rnst Chladni dusted square plates with fine sand, drew a violin bow

across the edge, and made standing waves visible. Grains fled the

antinodes and settled on the silent nodal lines — geometry from

sound itself.

</p>

</section>

{/* — workspace — */}

<section className="cp__work">

{/* LEFT — modal selectors */}

<div className="cp__rail">

<div className="cp__card">

<div className="cp__card-num">

<span>i. modal index</span>

<span>m × n</span>

</div>

<div className="cp__pad-row">∙ m</div>

<div className="cp__pad">

{[1,2,3,4,5,6,7,8].map(v => (

<button key={`m${v}`} data-on={m===v} onClick={() => setM(v)}>{v}</button>

))}

</div>

<div className="cp__pad-row" style={{ marginTop: 16 }}>∙ n</div>

<div className="cp__pad">

{[1,2,3,4,5,6,7,8].map(v => (

<button key={`n${v}`} data-on={n===v} onClick={() => setN(v)}>{v}</button>

))}

</div>

</div>

<div className="cp__card">

<div className="cp__card-num">

<span>ii. catalogue</span>

<span>cum nomine</span>

</div>

<div className="cp__matrix">

{PRESETS.map(p => (

<button key={p.label} onClick={() => { setM(p.m); setN(p.n); seedParticles(); }}>

<span>{p.name}</span>

<span>{p.label}</span>

</button>

))}

</div>

</div>

</div>

{/* CENTER — the plate */}

<div className="cp__stage">

<div className="cp__stage-ticks">

{Array.from({ length: 21 }).map((_, i) => <span key={i} />)}

</div>

<div className="cp__plate-wrap">

<span className="cp__plate-corner tl" />

<span className="cp__plate-corner tr" />

<span className="cp__plate-corner bl" />

<span className="cp__plate-corner br" />

<canvas ref={canvasRef} className="cp__plate" />

</div>

<div className="cp__plaque">

<span><span className="cp__plaque-led" />{running ? 'vibrating' : 'silenced'}</span>

<span className="cp__plaque-mode">

figura ({m}, {n}){currentPreset && ` · ${currentPreset.name}`}

</span>

<span style={{ textAlign: 'right' }}>

<span className="cp__plaque-hz">{frequencyHz}</span> hz

</span>

</div>

<div className="cp__actions">

<button onClick={() => setRunning(r => !r)} data-on={running}>

{running ? '❚❚ hold' : '▶ bow'}

</button>

<button onClick={() => setSoundOn(s => !s)} data-on={soundOn}>

{soundOn ? '♪ tone' : '✕ mute'}

</button>

<button onClick={seedParticles}>re-dust</button>

<button onClick={randomize}>↻ roll</button>

<button onClick={handleDownload}>↓ plate</button>

</div>

</div>

{/* RIGHT — readouts & physics */}

<div className="cp__rail">

<div className="cp__read">

<span className="cp__read-eye">eigenfrequency</span>

<span className="cp__read-val">{frequencyHz}<small>Hz</small></span>

<span className="cp__read-cap">f ∝ √(m² + n²)</span>

</div>

<div className="cp__read">

<span className="cp__read-eye">sand grains</span>

<span className="cp__read-val">{(particleCount/1000).toFixed(1)}<small>k</small></span>

<span className="cp__read-cap">quartz · 1px walk</span>

</div>

<div className="cp__card">

<div className="cp__card-num">

<span>iii. apparatus</span>

<span>iii.</span>

</div>

<div className="cp__sld">

<div className="cp__sld-row"><span>vibration</span><span>{vibration.toFixed(3)}</span></div>

<input type="range" min="0.001" max="0.06" step="0.001"

value={vibration} onChange={e => setVibration(+e.target.value)} />

</div>

<div className="cp__sld">

<div className="cp__sld-row"><span>quartz</span><span>{particleCount}</span></div>

<input type="range" min="1000" max="20000" step="500"

value={particleCount} onChange={e => setParticleCount(+e.target.value)} />

</div>

<div className="cp__sld">

<div className="cp__sld-row"><span>persistence</span><span>{trail.toFixed(2)}</span></div>

<input type="range" min="0.02" max="1" step="0.01"

value={trail} onChange={e => setTrail(+e.target.value)} />

</div>

</div>

</div>

</section>

{/* — colophon — */}

<section className="cp__colophon">

<div>

<h3>method</h3>

<p>

Each grain executes a random walk whose step length scales with

the local amplitude of the standing wave. Where the wave vanishes

— the nodal lines — the grain settles and the figure emerges.

</p>

<div className="cp__formula">

χ(x,y) = cos nπx · cos mπy − cos mπx · cos nπy

</div>

</div>

<div>

<h3>marginalia</h3>

<p>

Pairs (m,n) and (n,m) yield congruent figures rotated by a quarter

turn. Equal indices m = n produce diagonal lattices; coprime

indices produce lace-like asymmetry. Try (3, 7) at low vibration

for the canonical Chladni rose.

</p>

</div>

<div>

<h3>colophon</h3>

<p>

Set in Cormorant Garamond &amp; JetBrains Mono. After Chladni's

<span className="cp__serif-i"> Entdeckungen über die Theorie des Klanges</span>,

Leipzig 1787. Pressed in the Fezcodex laboratory, anno MMXXVI.

</p>

<div className="cp__sign">— f.</div>

</div>

</section>

</div>

</div>

);