Double pendulum · kat-coder-air-v2.5
Simulate a chaotic double pendulum on a canvas using the correct equations of motion, drawing the arms and a colorful fading trail of the tip.
transcript · 12 messages
Simulate a chaotic double pendulum on a canvas using the correct equations of motion, drawing the arms and a colorful fading trail of the tip.
/tmp/ws/index.html (3777 bytes)Successfully wrote 3777 bytes to /tmp/ws/index.html
/tmp/ws/index.html (2855 bytes)Successfully wrote 2855 bytes to /tmp/ws/index.html
/tmp/ws/index.html (2855 bytes)Successfully wrote 2855 bytes to /tmp/ws/index.html
{"command":"ls -la /tmp/ws/index.html"}-rw-r--r--. 1 node node 2855 Aug 1 19:54 /tmp/ws/index.html
{"path":"/tmp/ws/index.html"}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Double Pendulum</title> <style> body { margin: 0; background: #000; overflow: hidden; } canvas { display: block; } </style> </head> <body> <canvas id="c"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const W = canvas.width, H = canvas.height; const g = 1; const m1 = 10, m2 = 10; const L1 = 120, L2 = 120; // state = [theta1, omega1, theta2, omega2] let s = [Math.PI * 0.75, 0, Math.PI * 0.5, 0]; const trail = []; const MAX = 800; function derivs(s) { const [t1, w1, t2, w2] = s; const dt = t1 - t2; const sinD = Math.sin(dt), cosD = Math.cos(dt); const den = 2*m1 + m2 - m2*Math.cos(2*dt); const a1 = (-g*(2*m1+m2)*Math.sin(t1) - m2*g*Math.sin(t1 - 2*t2) - 2*sinD*m2*(w2*w2*L2 + w1*w1*L1*cosD)) / (L1*den); const a2 = (2*sinD*(w1*w1*L1*(m1+m2) + g*(m1+m2)*Math.cos(t1) + w2*w2*L2*m2*cosD)) / (L2*den); return [w1, a1, w2, a2]; } function rk4(s, h) { const k1 = derivs(s); const k2 = derivs(s.map((v,i)=>v+0.5*h*k1[i])); const k3 = derivs(s.map((v,i)=>v+0.5*h*k2[i])); const k4 = derivs(s.map((v,i)=>v+h*k3[i])); return s.map((v,i)=>v + h/6*(k1[i]+2*k2[i]+2*k3[i]+k4[i])); } function getPos() { const [t1, , t2] = s; const x1 = W/2 + L1*Math.sin(t1); const y1 = H/2 - 60 + L1*Math.cos(t1); const x2 = x1 + L2*Math.sin(t2); const y2 = y1 + L2*Math.cos(t2); return {x1,y1,x2,y2}; } let hue = 0; function loop() { // fade background ctx.fillStyle = 'rgba(0,0,0,0.08)'; ctx.fillRect(0,0,W,H); // integrate s = rk4(s, 0.25); const {x1,y1,x2,y2} = getPos(); // trail hue = (hue + 0.8) % 360; trail.push({x:x2, y:y2, h:hue}); if (trail.length > MAX) trail.shift(); // draw trail for (let i=1; i<trail.length; i++) { const a = (i/trail.length)*0.9; ctx.beginPath(); ctx.moveTo(trail[i-1].x, trail[i-1].y); ctx.lineTo(trail[i].x, trail[i].y); ctx.strokeStyle = `hsla(${trail[i].h},100%,60%,${a})`; ctx.lineWidth = 1 + (i/trail.length)*2; ctx.stroke(); } // pivot ctx.beginPath(); ctx.arc(W/2, H/2-60, 4, 0, Math.PI*2); ctx.fillStyle = '#666'; ctx.fill(); // arm 1 ctx.beginPath(); ctx.moveTo(W/2, H/2-60); ctx.lineTo(x1, y1); ctx.strokeStyle = '#aaa'; ctx.lineWidth = 3; ctx.stroke(); // arm 2 ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 3; ctx.stroke(); // bob 1 ctx.beginPath(); ctx.arc(x1, y1, 10, 0, Math.PI*2); ctx.fillStyle = '#888'; ctx.fill(); // bob 2 ctx.beginPath(); ctx.arc(x2, y2, 10, 0, Math.PI*2); ctx.fillStyle = '#fff'; ctx.fill(); requestAnimationFrame(loop); } loop(); </script> </body> </html>
Done. The file `/tmp/ws/index.html` contains a complete, self-contained double pendulum simulation: - **Correct equations of motion** for a double pendulum derived from the Lagrangian, with the standard coupled angular acceleration formulas - **RK4 integration** (4th-order Runge-Kutta) for accurate, stable physics at `dt = 0.25` - **Rainbow fading trail** — each frame the tip position is stored with a cycling hue, and old trail segments fade out via both a semi-transparent background overlay and per-segment alpha based on age - **Visuals**: black background, gray pivot, two arms, two bobs (gray inner, white outer), and a thick-to-thin rainbow trail Open the file in any browser to watch the chaos unfold.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
EVALUATION
Double pendulum simulation with colorful fading trail animates continuously; inputs don't add new interactivity but simulation runs smoothly.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.