Newton's Cradle

// Newton's cradle. Five identical pendulums hang in contact. When the leftmost
// (or two leftmost) ball is pulled back and released, it swings down and the
// click of contact transfers all momentum through the resting line to the
// rightmost ball(s) — perfect 1D elastic collision between equal masses.

const N = 5;
const G = 9.81;            // m/s^2
const L = 1.0;             // string length (m)
const R = 0.085;           // ball radius (m); spacing 2R so balls touch
const DAMPING = 0.0008;    // mild air drag per second
let balls;                 // { th, w } per ball (angle, angular velocity)
let drag;                  // { idx, mx, my } | null
let layout;                // pivotXs, pivotY, scale (px / m)
let lastWidth, lastHeight;

function computeLayout(width, height) {
  // bar near top, balls hang below; fit so a 60-degree swing stays in canvas
  const usableH = height * 0.78;
  const usableW = width * 0.86;
  const sFromH = usableH / (L + R + 0.05);
  const sFromW = usableW / ((N - 1) * 2 * R + 2 * L * Math.sin(Math.PI / 3));
  const scale = Math.min(sFromH, sFromW);
  const pivotY = height * 0.12;
  const totalW = (N - 1) * 2 * R * scale;
  const startX = (width - totalW) / 2;
  const pivotXs = new Float32Array(N);
  for (let i = 0; i < N; i++) pivotXs[i] = startX + i * 2 * R * scale;
  return { pivotXs, pivotY, scale };
}

function init({ width, height }) {
  balls = [];
  for (let i = 0; i < N; i++) balls.push({ th: 0, w: 0 });
  drag = null;
  layout = computeLayout(width, height);
  lastWidth = width; lastHeight = height;
}

function ballPos(i) {
  const px = layout.pivotXs[i], py = layout.pivotY, s = layout.scale;
  const th = balls[i].th;
  return { x: px + Math.sin(th) * L * s, y: py + Math.cos(th) * L * s };
}

function nearestDraggableBall(mx, my) {
  // pickable: the leftmost ball that's currently part of the resting cluster
  // (so user can pull 1 or 2 from the left). We test against the left two.
  const s = layout.scale;
  for (const i of [0, 1]) {
    const p = ballPos(i);
    const dx = mx - p.x, dy = my - p.y;
    const rPx = R * s;
    // generous touch target: at least 22 px
    const hit = Math.max(rPx + 8, 24);
    if (dx * dx + dy * dy <= hit * hit) return i;
  }
  return -1;
}

function stepPhysics(dt) {
  // 1) Free-swing pendulum integration for balls not at rest in contact.
  //    Each ball is independent until contacts are resolved.
  for (let i = 0; i < N; i++) {
    const b = balls[i];
    // semi-implicit Euler with substeps already handled by caller
    const a = -(G / L) * Math.sin(b.th);
    b.w += a * dt;
    b.w *= Math.max(0, 1 - DAMPING);
    b.th += b.w * dt;
  }

  // 2) Resolve contacts left-to-right and right-to-left.
  //    Adjacent balls i and i+1 are in contact when their angular positions
  //    are equal AND they would interpenetrate (b[i].th > b[i+1].th means the
  //    left ball is swinging right into the right ball). On contact between
  //    equal masses, swap angular velocities.
  // We iterate a few times to propagate impulses through chains.
  for (let pass = 0; pass < 4; pass++) {
    let changed = false;
    for (let i = 0; i < N - 1; i++) {
      const a = balls[i], b = balls[i + 1];
      // contact band: angle gap is essentially zero (balls touching)
      // The geometry: when both swing as pendulums of equal length from
      // pivots 2R apart, they touch exactly when th_left == th_right.
      const gap = b.th - a.th;
      if (gap <= 1e-3) {
        // approaching velocity (a moving right faster than b)
        const rel = a.w - b.w;
        if (rel > 0) {
          // elastic exchange for equal masses
          const tmp = a.w; a.w = b.w; b.w = tmp;
          // separate by a hair to avoid sticking
          if (gap < 0) {
            const fix = -gap * 0.5;
            a.th -= fix; b.th += fix;
          }
          changed = true;
        }
      }
    }
    for (let i = N - 2; i >= 0; i--) {
      const a = balls[i], b = balls[i + 1];
      const gap = b.th - a.th;
      if (gap <= 1e-3) {
        const rel = a.w - b.w;
        if (rel > 0) {
          const tmp = a.w; a.w = b.w; b.w = tmp;
          if (gap < 0) {
            const fix = -gap * 0.5;
            a.th -= fix; b.th += fix;
          }
          changed = true;
        }
      }
    }
    if (!changed) break;
  }

  // 3) Hard positional clamp: middle three balls cannot stray from 0 unless
  //    they're carrying real velocity. This keeps the resting line stable.
  for (let i = 1; i < N - 1; i++) {
    if (Math.abs(balls[i].th) < 1e-3 && Math.abs(balls[i].w) < 1e-3) {
      balls[i].th = 0; balls[i].w = 0;
    }
  }
}

function drawBar(ctx, width) {
  const py = layout.pivotY;
  const x0 = layout.pivotXs[0] - 40;
  const x1 = layout.pivotXs[N - 1] + 40;
  // posts
  ctx.fillStyle = "#3a4458";
  ctx.fillRect(x0 - 8, py - 6, 6, 18);
  ctx.fillRect(x1 + 2, py - 6, 6, 18);
  // bar with gradient
  const g = ctx.createLinearGradient(0, py - 8, 0, py + 6);
  g.addColorStop(0, "#7a8499");
  g.addColorStop(0.5, "#cdd5e4");
  g.addColorStop(1, "#4a546a");
  ctx.fillStyle = g;
  ctx.fillRect(x0, py - 6, x1 - x0, 10);
  ctx.fillStyle = "rgba(0,0,0,0.25)";
  ctx.fillRect(x0, py + 3, x1 - x0, 1);
}

function drawBall(ctx, x, y, rPx) {
  // shadow
  ctx.fillStyle = "rgba(0,0,0,0.32)";
  ctx.beginPath();
  ctx.ellipse(x + 2, y + rPx * 0.95, rPx * 0.9, rPx * 0.28, 0, 0, Math.PI * 2);
  ctx.fill();
  // body — chrome gradient
  const g = ctx.createRadialGradient(x - rPx * 0.35, y - rPx * 0.4, rPx * 0.1, x, y, rPx);
  g.addColorStop(0, "#f4f7ff");
  g.addColorStop(0.35, "#b8c2d4");
  g.addColorStop(0.75, "#6c7689");
  g.addColorStop(1, "#2c3343");
  ctx.fillStyle = g;
  ctx.beginPath();
  ctx.arc(x, y, rPx, 0, Math.PI * 2);
  ctx.fill();
  // rim
  ctx.strokeStyle = "rgba(20,24,32,0.7)";
  ctx.lineWidth = 1;
  ctx.stroke();
  // specular
  ctx.fillStyle = "rgba(255,255,255,0.9)";
  ctx.beginPath();
  ctx.ellipse(x - rPx * 0.4, y - rPx * 0.5, rPx * 0.18, rPx * 0.1, -0.5, 0, Math.PI * 2);
  ctx.fill();
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== lastWidth || height !== lastHeight) {
    layout = computeLayout(width, height);
    lastWidth = width; lastHeight = height;
  }

  // background
  const bg = ctx.createLinearGradient(0, 0, 0, height);
  bg.addColorStop(0, "#0b1322");
  bg.addColorStop(1, "#04060d");
  ctx.fillStyle = bg;
  ctx.fillRect(0, 0, width, height);

  // floor glow
  const fg = ctx.createRadialGradient(width / 2, height + 60, 20, width / 2, height + 60, width * 0.7);
  fg.addColorStop(0, "rgba(80,110,170,0.18)");
  fg.addColorStop(1, "rgba(0,0,0,0)");
  ctx.fillStyle = fg;
  ctx.fillRect(0, height * 0.55, width, height * 0.45);

  // --- input: drag handling -------------------------------------------------
  // Click-to-grab the leftmost (or 2nd) ball.
  const clicks = input.consumeClicks();
  if (!drag && clicks.length > 0) {
    const c = clicks[0];
    const idx = nearestDraggableBall(c.x, c.y);
    if (idx >= 0) {
      drag = { idx };
      // freeze entire system on grab
      for (let i = 0; i < N; i++) { balls[i].w = 0; }
    }
  }

  if (drag) {
    if (input.mouseDown) {
      // Position the dragged ball (and any to its left) at angle implied by mouse.
      const idx = drag.idx;
      const px = layout.pivotXs[idx], py = layout.pivotY, s = layout.scale;
      let dx = input.mouseX - px;
      let dy = input.mouseY - py;
      if (dy < 1) dy = 1; // can't pull above pivot (string would go slack)
      let th = Math.atan2(dx, dy);
      // clamp to a sensible swing range
      const maxAng = Math.PI / 2.4; // ~75 deg
      if (th < -maxAng) th = -maxAng;
      if (th > 0) th = 0; // can only pull LEFT (negative angle)
      // also enforce string length: if cursor is far, ball still constrained
      balls[idx].th = th;
      balls[idx].w = 0;
      // any balls to the left of idx move with it (rigid contact while held)
      for (let i = 0; i < idx; i++) { balls[i].th = th; balls[i].w = 0; }
      // balls to the right stay at rest
      for (let i = idx + 1; i < N; i++) { balls[i].th = 0; balls[i].w = 0; }
    } else {
      drag = null;
    }
  } else {
    // physics step (substepped for stability)
    const SUB = 6;
    const h = Math.min(dt, 1 / 30) / SUB;
    for (let k = 0; k < SUB; k++) stepPhysics(h);
  }

  // --- draw -----------------------------------------------------------------
  drawBar(ctx, width);

  const rPx = R * layout.scale;
  const py = layout.pivotY;

  // strings
  ctx.strokeStyle = "rgba(210,220,235,0.55)";
  ctx.lineWidth = 1;
  for (let i = 0; i < N; i++) {
    const p = ballPos(i);
    const px = layout.pivotXs[i];
    // V-hanging cradle strings (two strings per ball, angled to the bar)
    ctx.beginPath();
    ctx.moveTo(px - 10, py);
    ctx.lineTo(p.x, p.y);
    ctx.moveTo(px + 10, py);
    ctx.lineTo(p.x, p.y);
    ctx.stroke();
    // pivot dot
    ctx.fillStyle = "#1c2434";
    ctx.fillRect(px - 11, py - 1, 22, 3);
  }

  // balls (back to front by y for nicer occlusion)
  const order = [0, 1, 2, 3, 4].sort((a, b) => ballPos(a).y - ballPos(b).y);
  for (const i of order) {
    const p = ballPos(i);
    drawBall(ctx, p.x, p.y, rPx);
  }

  // HUD: total kinetic + potential energy as a sanity readout
  let E = 0;
  for (let i = 0; i < N; i++) {
    const b = balls[i];
    const v = b.w * L;
    const h = L * (1 - Math.cos(b.th));
    E += 0.5 * v * v + G * h;
  }
  ctx.fillStyle = "rgba(200,210,230,0.55)";
  ctx.font = "12px monospace";
  ctx.fillText("drag the leftmost ball back, release to swing", 12, height - 28);
  ctx.fillText(`E = ${E.toFixed(3)} J/kg   (conserved through collisions)`, 12, height - 12);

  // grab hint when idle
  if (!drag) {
    const p0 = ballPos(0);
    const t = (performance.now() / 1000) % 2;
    if (t < 1.2) {
      const a = 0.35 + 0.25 * Math.sin(t * Math.PI / 1.2);
      ctx.strokeStyle = `rgba(120,200,255,${a})`;
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      ctx.arc(p0.x, p0.y, rPx + 6, 0, Math.PI * 2);
      ctx.stroke();
    }
  }
}