Plucked String Modes

const N = 400;
let u, uPrev, uNext, trail;
const C = 0.5, C2 = C * C;
const damping = 0.0008;
const trailDecay = 0.18;
let dragging = false;
let dragIdx = -1;

function init() {
  u = new Float32Array(N);
  uPrev = new Float32Array(N);
  uNext = new Float32Array(N);
  trail = new Float32Array(N);
}

function pickIndex(mx, w, pad) {
  const t = (mx - pad) / (w - 2 * pad);
  let i = Math.round(t * (N - 1));
  if (i < 1) i = 1;
  if (i > N - 2) i = N - 2;
  return i;
}

function step() {
  for (let i = 1; i < N - 1; i++) {
    const a = u[i - 1] - 2 * u[i] + u[i + 1];
    let next = 2 * u[i] - uPrev[i] + C2 * a;
    next *= 1 - damping;
    uNext[i] = next;
  }
  uNext[0] = 0;
  uNext[N - 1] = 0;
  if (dragging && dragIdx >= 0) uNext[dragIdx] = u[dragIdx];
  for (let i = 0; i < N; i++) {
    uPrev[i] = u[i];
    u[i] = uNext[i];
    trail[i] = trail[i] * (1 - trailDecay) + u[i] * trailDecay;
  }
}

function applyPluck(idx, amount) {
  const w = 14;
  for (let k = -w; k <= w; k++) {
    const j = idx + k;
    if (j <= 0 || j >= N - 1) continue;
    const wt = Math.exp(-(k * k) / (w * 0.6));
    u[j] = amount * wt;
    uPrev[j] = u[j];
  }
}

function tick({ ctx, width: w, height: h, input }) {
  const pad = 24;

  if (input.mouseDown) {
    if (!dragging) {
      dragIdx = pickIndex(input.mouseX, w, pad);
      dragging = true;
    }
    const ny = (input.mouseY - h * 0.5) / (h * 0.35);
    const clamped = Math.max(-1, Math.min(1, ny));
    u[dragIdx] = clamped;
    uPrev[dragIdx] = clamped;
  } else if (dragging) {
    applyPluck(dragIdx, u[dragIdx]);
    dragging = false;
    dragIdx = -1;
  }

  step();
  step();

  ctx.fillStyle = "#06080f";
  ctx.fillRect(0, 0, w, h);

  ctx.strokeStyle = "rgba(120,180,255,0.18)";
  ctx.lineWidth = 1.2;
  ctx.beginPath();
  for (let i = 0; i < N; i++) {
    const x = pad + (i / (N - 1)) * (w - 2 * pad);
    const y = h * 0.5 + trail[i] * h * 0.35;
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();

  ctx.shadowColor = "rgba(120,220,255,0.9)";
  ctx.shadowBlur = 14;
  ctx.strokeStyle = "rgba(180,240,255,0.95)";
  ctx.lineWidth = 1.8;
  ctx.beginPath();
  for (let i = 0; i < N; i++) {
    const x = pad + (i / (N - 1)) * (w - 2 * pad);
    const y = h * 0.5 + u[i] * h * 0.35;
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();
  ctx.shadowBlur = 0;

  ctx.fillStyle = "rgba(255,255,255,0.85)";
  ctx.beginPath();
  ctx.arc(pad, h * 0.5, 3, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(w - pad, h * 0.5, 3, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = "rgba(180,200,230,0.7)";
  ctx.font = "12px monospace";
  ctx.fillText("click and drag to pluck", 12, 18);
}