Double Pendulum Simulator

// Double Pendulum — the real Lagrangian equations of motion, not an approximation.
// Click anywhere to re-drop it from that angle.
//
// Everything in the params object below is a live control. The playground
// patches that exact object while the loop runs, so slider moves land on the
// very next frame; the Object.assign fallback means the file still works
// pasted into a blank page.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const params = window.params = Object.assign({
  m1: 1,              // upper bob mass
  m2: 1,              // lower bob mass
  l1: 1,              // upper arm length, in arbitrary units
  l2: 1,              // lower arm length, same units
  gravity: 9.81,
  damping: 0,         // per-second velocity bleed; 0 = conservative system
  speed: 1,
  trail: 500,         // tip positions kept for the trace
  ghost: true,        // second pendulum, started 0.0001 rad away
  armColor: '#e6ecff',
  trailColor: '#4be0ff',
  ghostColor: '#ff4f8b',

  // Written by panZoom below.
  zoom: 1, panX: 0, panY: 0, interactive: false,
}, window.params);

let w = 0, h = 0, dpr = 1;
function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  w = canvas.width = Math.floor(canvas.clientWidth * dpr);
  h = canvas.height = Math.floor(canvas.clientHeight * dpr);
}
resize();
// ResizeObserver rather than window.onresize: it fires once right after layout
// settles (so the canvas is never measured at zero) and again on every panel
// resize, which a window listener would miss entirely.
new ResizeObserver(resize).observe(canvas);

// Opt-in drag-to-pan / wheel-to-zoom. It only writes params.zoom/panX/panY —
// applying them is the demo's job, down in draw().
window.panZoom && window.panZoom(canvas, params);

function make(a1, a2) {
  return { a1: a1, a2: a2, v1: 0, v2: 0, tip: [] };
}

const START = Math.PI * 0.75;
let real = make(START, START);
let ghost = make(START + 1e-4, START);   // one ten-thousandth of a radian apart

// The standard Lagrangian solution for a planar double pendulum. Both angular
// accelerations share the same denominator, which only vanishes for a massless
// upper bob — so m1 has a floor of 0.1 in the control.
function accel(p) {
  const m1 = params.m1, m2 = params.m2;
  const l1 = params.l1, l2 = params.l2, g = params.gravity;
  const d = p.a1 - p.a2;
  const den = 2 * m1 + m2 - m2 * Math.cos(2 * d);

  const a1 = (
    -g * (2 * m1 + m2) * Math.sin(p.a1)
    - m2 * g * Math.sin(p.a1 - 2 * p.a2)
    - 2 * Math.sin(d) * m2 * (p.v2 * p.v2 * l2 + p.v1 * p.v1 * l1 * Math.cos(d))
  ) / (l1 * den);

  const a2 = (
    2 * Math.sin(d) * (
      p.v1 * p.v1 * l1 * (m1 + m2)
      + g * (m1 + m2) * Math.cos(p.a1)
      + p.v2 * p.v2 * l2 * m2 * Math.cos(d)
    )
  ) / (l2 * den);

  return [a1, a2];
}

// Semi-implicit Euler at a fixed small step, subdivided per frame. A chaotic
// system amplifies integration error as fast as it amplifies everything else,
// so the step size is decoupled from the frame rate on purpose.
const SUB = 12;
function step(p, dt) {
  const a = accel(p);
  p.v1 += a[0] * dt;
  p.v2 += a[1] * dt;
  const k = 1 - params.damping * dt;
  p.v1 *= k;
  p.v2 *= k;
  p.a1 += p.v1 * dt;
  p.a2 += p.v2 * dt;
}

function joints(p, cx, cy, scale) {
  const x1 = cx + Math.sin(p.a1) * params.l1 * scale;
  const y1 = cy + Math.cos(p.a1) * params.l1 * scale;
  return [x1, y1, x1 + Math.sin(p.a2) * params.l2 * scale, y1 + Math.cos(p.a2) * params.l2 * scale];
}

const rgb = (hex) => [
  parseInt(hex.slice(1, 3), 16),
  parseInt(hex.slice(3, 5), 16),
  parseInt(hex.slice(5, 7), 16),
];

function trace(pts, hex, alpha) {
  if (pts.length < 2) return;
  const c = rgb(hex);
  ctx.lineWidth = 1.6 * dpr;
  ctx.lineCap = 'round';
  // One stroke per segment so each can carry its own alpha: the trace fades
  // toward the oldest sample, which is what reads as motion rather than a wire.
  for (let i = 1; i < pts.length; i++) {
    const a = (i / pts.length) * alpha;
    ctx.strokeStyle = 'rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',' + a + ')';
    ctx.beginPath();
    ctx.moveTo(pts[i - 1][0], pts[i - 1][1]);
    ctx.lineTo(pts[i][0], pts[i][1]);
    ctx.stroke();
  }
}

function arms(p, cx, cy, scale, hex, alpha) {
  const j = joints(p, cx, cy, scale);
  ctx.globalAlpha = alpha;
  ctx.strokeStyle = hex;
  ctx.lineWidth = 2.5 * dpr;
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.lineTo(j[0], j[1]);
  ctx.lineTo(j[2], j[3]);
  ctx.stroke();

  ctx.fillStyle = hex;
  ctx.beginPath();
  ctx.arc(j[0], j[1], Math.sqrt(params.m1) * scale * 0.07 + 2 * dpr, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(j[2], j[3], Math.sqrt(params.m2) * scale * 0.07 + 2 * dpr, 0, Math.PI * 2);
  ctx.fill();
  ctx.globalAlpha = 1;
}

canvas.addEventListener('pointerdown', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = (e.clientX - rect.left) * dpr - (w / 2 + params.panX);
  const y = (e.clientY - rect.top) * dpr - (h * 0.36 + params.panY);
  const a = Math.atan2(x, y);
  real = make(a, a);
  ghost = make(a + 1e-4, a);
});

function frame() {
  if (!w || !h) { requestAnimationFrame(frame); return; }

  const dt = (0.016 * params.speed) / SUB;
  for (let i = 0; i < SUB; i++) {
    step(real, dt);
    if (params.ghost) step(ghost, dt);
  }

  // Length is normalised so the arms always fit, however you set l1 and l2.
  const scale = (Math.min(w, h) * 0.40 * params.zoom) / (params.l1 + params.l2);
  const cx = w / 2 + params.panX;
  const cy = h * 0.36 + params.panY;

  const jr = joints(real, cx, cy, scale);
  real.tip.push([jr[2], jr[3]]);
  while (real.tip.length > params.trail) real.tip.shift();

  if (params.ghost) {
    const jg = joints(ghost, cx, cy, scale);
    ghost.tip.push([jg[2], jg[3]]);
    while (ghost.tip.length > params.trail) ghost.tip.shift();
  }

  ctx.fillStyle = '#05030a';
  ctx.fillRect(0, 0, w, h);

  if (params.ghost) {
    trace(ghost.tip, params.ghostColor, 0.5);
    arms(ghost, cx, cy, scale, params.ghostColor, 0.4);
  }
  trace(real.tip, params.trailColor, 0.9);
  arms(real, cx, cy, scale, params.armColor, 1);

  ctx.fillStyle = 'rgba(255,255,255,0.35)';
  ctx.beginPath();
  ctx.arc(cx, cy, 3 * dpr, 0, Math.PI * 2);
  ctx.fill();

  requestAnimationFrame(frame);
}
frame();