// Chladni Drift — particles settling on nodal lines of a vibrating plate let parts = []; const NUM = 14000; const MODES = [[1,2],[2,3],[3,4],[1,4],[2,5],[3,5],[4,5],[1,3],[2,4],[3,6],[5,6],[4,7],[2,7],[5,7],[1,6]]; let mi = 0; let tick = 0; const PERIOD = 420, HOLD = 300; let plate, px0, py0; let buckets = []; const COLS = [ 'rgba(255,248,226,0.55)', 'rgba(255,206,130,0.30)', 'rgba(236,126,96,0.17)', 'rgba(138,100,206,0.11)', 'rgba(62,76,165,0.07)' ]; function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(1); layout(); for (let i = 0; i < NUM; i++) parts.push({ x: Math.random(), y: Math.random() }); for (let b = 0; b < COLS.length; b++) buckets.push([]); background(6, 7, 12); textFont('monospace'); } function layout() { plate = Math.min(width, height) * 0.86; px0 = (width - plate) / 2; py0 = (height - plate) / 2; } function windowResized() { resizeCanvas(windowWidth, windowHeight); layout(); background(6, 7, 12); } function mousePressed() { mi = (mi + 1) % MODES.length; tick = HOLD; } function draw() { const ctx = drawingContext; // slow fade so figures accumulate as light ctx.globalCompositeOperation = 'source-over'; noStroke(); fill(6, 7, 12, 26); rect(0, 0, width, height); // ---- mode interpolation ---- let k = constrain(map(tick, HOLD, PERIOD, 0, 1), 0, 1); k = k * k * (3 - 2 * k); // smoothstep const a = MODES[mi], b = MODES[(mi + 1) % MODES.length]; const n = lerp(a[0], b[0], k); const m = lerp(a[1], b[1], k); const trans = (k > 0 && k < 1) ? Math.sin(Math.PI * k) : 0; tick++; if (tick >= PERIOD) { tick = 0; mi = (mi + 1) % MODES.length; } // ---- update grains ---- for (let i = 0; i < buckets.length; i++) buckets[i].length = 0; const kn = Math.PI * n, km = Math.PI * m; const mx = (mouseX - px0) / plate, my = (mouseY - py0) / plate; const mouseOn = mouseX > 0 && mouseY > 0 && mouseX < width && mouseY < height; for (let i = 0; i < NUM; i++) { const p = parts[i]; const v = Math.sin(kn * p.x) * Math.sin(km * p.y) + Math.sin(km * p.x) * Math.sin(kn * p.y); const amp = Math.abs(v) * 0.5; const s = 0.0005 + amp * 0.042 * (1 + 2.2 * trans); const ang = Math.random() * Math.PI * 2; p.x += Math.cos(ang) * s; p.y += Math.sin(ang) * s; if (mouseOn) { const dx = p.x - mx, dy = p.y - my; const d2 = dx * dx + dy * dy; if (d2 < 0.0125 && d2 > 1e-7) { const f = (0.0028 / (d2 + 0.0012)); p.x += dx * f; p.y += dy * f; } } // reflect at plate edges if (p.x < 0) p.x = -p.x; else if (p.x > 1) p.x = 2 - p.x; if (p.y < 0) p.y = -p.y; else if (p.y > 1) p.y = 2 - p.y; let bi = amp < 0.02 ? 0 : amp < 0.07 ? 1 : amp < 0.2 ? 2 : amp < 0.45 ? 3 : 4; const arr = buckets[bi]; arr.push(px0 + p.x * plate, py0 + p.y * plate); } // ---- render additively, grouped by brightness ---- ctx.globalCompositeOperation = 'lighter'; for (let bi = buckets.length - 1; bi >= 0; bi--) { const arr = buckets[bi]; if (!arr.length) continue; ctx.fillStyle = COLS[bi]; const sz = bi === 0 ? 1.6 : 1.2; for (let j = 0; j < arr.length; j += 2) ctx.fillRect(arr[j], arr[j + 1], sz, sz); } // ---- frame & label ---- ctx.globalCompositeOperation = 'source-over'; noFill(); stroke(255, 255, 255, 22); strokeWeight(1); rect(px0 - 0.5, py0 - 0.5, plate + 1, plate + 1); noStroke(); fill(255, 236, 200, 150); textSize(12); textAlign(LEFT, TOP); text('mode n=' + nf(n, 1, 2) + ' m=' + nf(m, 1, 2), px0, py0 - 22); textAlign(RIGHT, TOP); fill(255, 236, 200, 80); text('click: next harmonic', px0 + plate, py0 - 22); }

Claude Opus 5

Chladni Drift