Damped Oscillator Regimes

// Three damped mass-on-spring oscillators side-by-side:
//   col 0: underdamped (zeta < 1) -> rings then decays
//   col 1: critically damped (zeta = 1) -> fastest non-oscillatory return
//   col 2: overdamped (zeta > 1) -> sluggish exponential return
//   col 3: user-scrubbed -> mouseX maps to zeta in [0, 2.4]
// ODE: x'' + 2 zeta w0 x' + w0^2 x = 0. Velocity-Verlet for stable damping.
// All masses start at x = X0, v = 0. Plot x(t) below each mass.
const W0 = 2.8;                     // rad/s natural frequency
const X0 = 1.0;                     // normalized initial displacement
const SUBSTEPS = 4;
const TRAIL_LEN = 240;
const ZETAS = [0.18, 1.0, 1.8, 0.6];  // last is scrub default
const HUES = [205, 145, 28, 320];
const LABELS = ["under", "critical", "over", "scrub"];
const COLS = 4;

let x, v, trail, head, t0;

function reset() {
  for (let i = 0; i < COLS; i++) { x[i] = X0; v[i] = 0; }
  for (let i = 0; i < COLS; i++)
    for (let j = 0; j < TRAIL_LEN; j++) trail[i * TRAIL_LEN + j] = X0;
  head = 0;
  t0 = performance.now() / 1000;
}

function init() {
  x = new Float32Array(COLS);
  v = new Float32Array(COLS);
  trail = new Float32Array(COLS * TRAIL_LEN);
  reset();
}

function stepOne(i, zeta, dt) {
  // x'' = -w0^2 x - 2 zeta w0 v
  const a = -W0 * W0 * x[i] - 2 * zeta * W0 * v[i];
  const xNew = x[i] + v[i] * dt + 0.5 * a * dt * dt;
  // semi-implicit accel update using new x and old v predicted
  const vMid = v[i] + 0.5 * a * dt;
  const aNew = -W0 * W0 * xNew - 2 * zeta * W0 * vMid;
  const vNew = vMid + 0.5 * aNew * dt;
  x[i] = xNew;
  v[i] = vNew;
}

function tick({ ctx, dt, width, height, input }) {
  if (input.consumeClicks().length > 0) reset();

  // Scrub last column with mouseX -> zeta in [0, 2.4]
  const mx = Math.max(0, Math.min(width, input.mouseX || 0));
  const scrubZ = (mx / Math.max(1, width)) * 2.4;
  ZETAS[3] = scrubZ;

  const h = Math.min(dt, 1 / 30) / SUBSTEPS;
  for (let s = 0; s < SUBSTEPS; s++)
    for (let i = 0; i < COLS; i++) stepOne(i, ZETAS[i], h);

  for (let i = 0; i < COLS; i++) trail[i * TRAIL_LEN + head] = x[i];
  head = (head + 1) % TRAIL_LEN;

  // Background
  const bg = ctx.createLinearGradient(0, 0, 0, height);
  bg.addColorStop(0, "#0a0f1c");
  bg.addColorStop(1, "#02040a");
  ctx.fillStyle = bg;
  ctx.fillRect(0, 0, width, height);

  const colW = width / COLS;
  const sceneH = Math.max(140, height * 0.55);
  const plotY0 = sceneH + 4;
  const plotH = Math.max(40, height - plotY0 - 26);
  const railTop = 18;
  const railBot = sceneH - 12;
  const railH = railBot - railTop;
  // Amplitude range for masses: x in [-X0, X0] -> y around middle.
  // We use one-sided: rest at center, deflection both ways.
  const center = railTop + railH * 0.5;
  const ampPx = railH * 0.42;

  for (let i = 0; i < COLS; i++) {
    const cx = colW * (i + 0.5);
    const hue = HUES[i];
    const zeta = ZETAS[i];

    // Column separator
    if (i > 0) {
      ctx.strokeStyle = "rgba(255,255,255,0.06)";
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(i * colW, 6);
      ctx.lineTo(i * colW, height - 6);
      ctx.stroke();
    }

    // Rail: vertical guide line at column center
    ctx.strokeStyle = "rgba(255,255,255,0.10)";
    ctx.setLineDash([3, 4]);
    ctx.beginPath();
    ctx.moveTo(cx, railTop);
    ctx.lineTo(cx, railBot);
    ctx.stroke();
    ctx.setLineDash([]);

    // Ceiling anchor
    ctx.fillStyle = "rgba(180,200,230,0.55)";
    ctx.fillRect(cx - 18, railTop - 4, 36, 4);
    for (let k = -2; k <= 2; k++) {
      ctx.strokeStyle = "rgba(180,200,230,0.45)";
      ctx.beginPath();
      ctx.moveTo(cx - 18 + k * 8, railTop);
      ctx.lineTo(cx - 22 + k * 8, railTop - 5);
      ctx.stroke();
    }

    // Equilibrium tick on the rail
    ctx.strokeStyle = "rgba(255,255,255,0.25)";
    ctx.beginPath();
    ctx.moveTo(cx - 10, center);
    ctx.lineTo(cx + 10, center);
    ctx.stroke();

    // Mass position
    const massY = center + x[i] * ampPx;

    // Spring as zigzag from ceiling to mass
    const segs = 14;
    const x1 = cx, y1 = railTop;
    const x2 = cx, y2 = massY - 12;
    const dxs = (x2 - x1), dys = (y2 - y1);
    ctx.strokeStyle = `hsla(${hue}, 75%, 70%, 0.85)`;
    ctx.lineWidth = 1.4;
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    const swing = 7;
    for (let s = 1; s < segs; s++) {
      const t = s / segs;
      const sgn = s % 2 === 0 ? 1 : -1;
      ctx.lineTo(x1 + dxs * t + swing * sgn, y1 + dys * t);
    }
    ctx.lineTo(x2, y2);
    ctx.stroke();

    // Mass (box)
    const r = 14;
    const grad = ctx.createRadialGradient(cx, massY, 2, cx, massY, r * 2.4);
    grad.addColorStop(0, `hsla(${hue}, 95%, 78%, 0.95)`);
    grad.addColorStop(0.5, `hsla(${hue}, 85%, 55%, 0.45)`);
    grad.addColorStop(1, `hsla(${hue}, 80%, 40%, 0)`);
    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(cx, massY, r * 2.4, 0, Math.PI * 2);
    ctx.fill();

    ctx.fillStyle = `hsl(${hue}, 90%, 60%)`;
    ctx.fillRect(cx - r, massY - r * 0.75, r * 2, r * 1.5);
    ctx.strokeStyle = "rgba(255,255,255,0.35)";
    ctx.lineWidth = 1;
    ctx.strokeRect(cx - r + 0.5, massY - r * 0.75 + 0.5, r * 2 - 1, r * 1.5 - 1);
    ctx.fillStyle = "rgba(255,255,255,0.55)";
    ctx.fillRect(cx - r + 3, massY - r * 0.75 + 3, r * 0.6, 3);

    // Plot pane below
    const px0 = i * colW + 6;
    const py0 = plotY0;
    const pw = colW - 12;
    const ph = plotH;

    ctx.fillStyle = "rgba(255,255,255,0.03)";
    ctx.fillRect(px0, py0, pw, ph);
    ctx.strokeStyle = "rgba(255,255,255,0.08)";
    ctx.lineWidth = 1;
    ctx.strokeRect(px0 + 0.5, py0 + 0.5, pw - 1, ph - 1);
    // zero line
    ctx.strokeStyle = "rgba(255,255,255,0.18)";
    ctx.beginPath();
    ctx.moveTo(px0, py0 + ph / 2);
    ctx.lineTo(px0 + pw, py0 + ph / 2);
    ctx.stroke();

    // Trail
    ctx.strokeStyle = `hsl(${hue}, 90%, 65%)`;
    ctx.lineWidth = 1.4;
    ctx.beginPath();
    for (let j = 0; j < TRAIL_LEN; j++) {
      const idx = (head + j) % TRAIL_LEN;
      const val = trail[i * TRAIL_LEN + idx];
      const xx = px0 + (j / (TRAIL_LEN - 1)) * pw;
      const yy = py0 + ph / 2 + Math.max(-1, Math.min(1, val)) * (ph / 2 - 2);
      if (j === 0) ctx.moveTo(xx, yy); else ctx.lineTo(xx, yy);
    }
    ctx.stroke();

    // Labels
    ctx.fillStyle = `hsla(${hue}, 90%, 80%, 0.95)`;
    ctx.font = "11px system-ui, sans-serif";
    ctx.fillText(LABELS[i], px0 + 6, py0 + 13);
    ctx.fillStyle = "rgba(220,230,245,0.7)";
    ctx.font = "10px monospace";
    ctx.fillText(`zeta=${zeta.toFixed(2)}`, px0 + 6, py0 + 26);
  }

  // Footer
  ctx.fillStyle = "rgba(220,230,245,0.55)";
  ctx.font = "11px monospace";
  const t = performance.now() / 1000 - t0;
  ctx.fillText(
    `w0=${W0.toFixed(2)} rad/s  x0=${X0.toFixed(2)}  t=${t.toFixed(1)}s  (move mouse to scrub last col, click to reset)`,
    8, height - 7
  );
}