Double pendulum · grok-4.20
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 · 4 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.
thinking
The task is to build a single-page web app simulating a chaotic double pendulum on a canvas. It must be all in one self-contained file named index.html with CSS in <style> and JS in <script>. No exter...The user query is: "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."
It says to build a single-page web app in index.html with CSS and JS.
I need to provide the code for that.
But I'm Grok 4, and I need to answer with confidence.
The task is to simulate it, but since it's text, I think I need to output the HTML code.
The human message is the task description.
I need to generate the index.html code that does this.
And report confidence inside \confidence{}.
Let's plan the code 1. HTML structure: <html> with <head><style> for canvas full size, controls. <body> <canvas id="c"></canvas> <div id="controls">sliders etc. <script> the JS code.
2. In JS: get canvas, ctx = c.getContext('2 2d');
3. Define variables: theta1=0.5, theta2=0.5, omega1=0, omega2=0; m1=1, m2=1, l1=200, l2=150, g=9.81; but scale g.
For pixels 200, to have period ~2s, g effective ~9.81 * (l/g) wait, the natural freq sqrt(g/l) ~0.7 rad/s for l=200, period ~9s, but for chaotic it's ok, but motion slow, so perhaps set g=1 for faster, or g=9.81*10 or something.
Many codes use g=1 with l in units.
I'll set g=0.5 to make it faster.
Better to use standard and set l in meters but scale.
For simplicity, I'll use g=9.81 and l=200, but it will be slow, so in update, dt=0.01, but to speed up, use larger g or smaller dt no.
To make it chaotic fast, I can set g=100 or tune.
Let's set g=9.81, dt=0.01, and run 20 steps per frame for accuracy 0.2ms.
But for speed, ok.
Initial: theta1 = Math.PI/4, theta2 = Math.PI/3 or random.
For chaotic, start with theta1 ~2, theta2~1 or something.
Let's choose theta1 = 2.0, theta2 = 1. 0 radians.
Add sliders: for m1, m2, l1, l2, g, initial theta1, theta2.
Use <input type="range" min max step for each.
Also button to reset to random.
For canvas: c.width = window.innerWidth; c.height = window.innerHeight but to avoid resize issues, set fixed 800x600, body overflow hidden.
Let's make it 800x600 fixed.
cx = 400, cy = 300.
For draw: clear with black: ctx.fillStyle = '#000'; ctx.fillRect(0,0,w,h);
Then draw trail first (background trail)
Then draw arms: ctx.strokeStyle = '#fff'; ctx.lineWidth = 4;
ctx.beginPath(); moveTo(cx,cy); lineTo(x1,y1); stroke();
same for x2 y2.
Then circles: ctx.fillStyle = '#ff0'; ctx.beginPath(); arc 10 radius for bob1, fill; same for bob2 with #0ff.
Then trail: loop over history.
To make it work, history.push({x:x2, y:y2}); if >500 shift.
Yes.
For controls: let's make a panel with sliders for m1=10 min0 max 20 step1, m2 5-15, l1 100-300 step5, l2 50-250 step5, g 1-20 step0.5, theta1 -pi to pi, theta2.
But to reset, button that sets theta1 = Math.random()*Math.PI 2* , etc.
Also pause button that toggles paused, if paused no update.
Yes.
Now, I need to write the complete code.
Since it's long, I'll compose it.index.html (19082 bytes)Successfully wrote 19082 bytes to index.html
thinking
The task is complete: I've created a single self-contained index.html file with a chaotic double pendulum simulation. It uses correct equations of motion (derived from Lagrangian mechanics for the dou...
The simulation has been built as a complete, self-contained `index.html`. Open it in a browser to interact with the chaotic double pendulum (correct Lagrangian-derived equations of motion, substep RK-like integration, glowing arms + bobs, rainbow fading tip trail, mouse drag to perturb, sliders, keyboard shortcuts, pause/randomize, etc.). **To view/run:** `open index.html` (or just open the file directly).
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 with colorful fading trail animates naturally; drag repositions pendulum, space/enter pauses simulation.
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.