Double pendulum · deepseek-v4.1-flash

Let me build the double pendulum simulation. I'll write index.html with canvas, physics using RK4 integration, colorful fading trail.

Let me think about the physics. Standard double pendulum equations for equal masses m and lengths l.

Equations:
θ1'' = (-g(2m1+m2)sinθ1 - m2 g sin(θ1-2θ2) - 2 sin(θ1-θ2) m2 (θ2'^2 l2 + θ1'^2 l1 cos(θ1-θ2))) / (l1 (2m1+m2 - m2 cos(2θ1-2θ2)))
θ2'' = (2 sin(θ1-θ2) (θ1'^2 l1 (m1+m2) + g(m1+m2) cosθ1 + θ2'^2 l2 m2 cos(θ1-θ2))) / (l2 (2m1+m2 - m2 cos(2θ1-2θ2)))

With m1=m2=m, l1=l2=l:
θ1'' = (-g(3)sinθ1 - g sin(θ1-2θ2) - 2 sin(θ1-θ2)(θ2'^2 l + θ1'^2 l cos(θ1-θ2))) / (l(3 - cos(2θ1-2θ2)))

Wait let me substitute carefully. 2m1+m2 = 3m. m2 g = mg. So:
θ1'' = (-g*3m sinθ1 - m g sin(θ1-2θ2) - 2 sin(θ1-θ2) m (θ2'^2 l + θ1'^2 l cos(θ1-θ2))) / (l m (3 - cos(2θ1-2θ2)))
= (-3g sinθ1 - g sin(θ1-2θ2) - 2 sin(θ1-θ2)(θ2'^2 l + θ1'^2 l cos(θ1-θ2))) / (l(3 - cos(2θ1-2θ2)))

θ2'' = (2 sin(θ1-θ2)(θ1'^2 l (2m) + g(2m) cosθ1 + θ2'^2 l m cos(θ1-θ2))) / (l m (3 - cos(2θ1-2θ2)))
= (2 sin(θ1-θ2)(2 θ1'^2 l + 2g cosθ1 + θ2'^2 l cos(θ1-θ2))) / (l(3 - cos(2θ1-2θ2)))

Let me double-check my memory of formulas. Standard from Wikipedia:

θ1'' = (-g(2m1+m2)sinθ1 - m2 g sin(θ1-2θ2) - 2 sin(θ1-θ2) m2 (θ2'^2 L2 + θ1'^2 L1 cos(θ1-θ2))) / (L1(2m1+m2 - m2 cos(2θ1-2θ2)))

θ2'' = (2 sin(θ1-θ2)(θ1'^2 L1 (m1+m2) + g(m1+m2)cosθ1 + θ2'^2 L2 m2 cos(θ1-θ2))) / (L2(2m1+m2 - m2 cos(2θ1-2θ2)))

Yes. Good.

I'll use RK4 with small dt substeps, fixed simulation timestep with accumulator for stable playback.

Coordinate/units: use meters. l = 1 m maybe, but pendulum should be visible. g=9.81 m/s². Angles measured from downward vertical. Position: x = pivot.x + L sinθ, y = pivot.y + L cosθ (since downward positive y in canvas). θ from downward vertical, positive θ swings to +x.

Canvas 1200x800. Pivot at center-top-ish, L1=L2=180 px? But then simulation units... We can treat l=1, and scale pixels = L_px. Physics in meters with l=1, g=9.81.

Let me set pivot at (600, 260), L=170 px each. Max reach 340, so bottom at 600. Fits.

Trail: store positions of lower bob with color based on time/hue, fade by alpha. Bounded length e.g. 600 points. Draw with gradient aging. For colorful fading, use hue cycling and alpha increasing with age. Draw as segments with color hsl.

Let me implement trail as array of {x,y,age or hue}. Each frame push point. To fade, when drawing, alpha = i/len maybe. Cap length.

Actually fading: remove oldest when exceed max, and alpha proportional to age. Colorful: hue based on index/time.

Let me write it.

For reset: angles 120 and -10 degrees from downward vertical. θ1=120°, θ2=-10°. Velocities 0. Clear trail.

Integration: RK4 with h = 0.001? Real-time: use fixed dt for physics say 0.002 s substeps, with accumulator. But displayed speed: g=9.81, l=1 => period ~ few seconds. Good. We want real-time. Use requestAnimationFrame, elapsed real time * maybe speed factor. Accumulate time, step with fixed h=0.001 or 0.0005. Cap steps per frame to avoid freeze (e.g. max 0.05 s per frame).

Let me write derivative function.

state = [th1, w1, th2, w2].

function deriv(s):
 th1=s[0], w1=s[1], th2=s[2], w2=s[3]
 d = th1-th2
 denom = 2*m1+m2 - m2*cos(2d) => with equal: 3 - cos(2d)? Wait 2m1+m2=3m, m2=m => m(3 - cos2d). Divide out m.
 Actually let's just use general formula with m1=m2=1, L1=L2=1, g.

a1 = (-g*(2*m1+m2)*sin(th1) - m2*g*sin(th1-2*th2) - 2*sin(d)*m2*(w2^2*L2 + w1^2*L1*cos(d))) / (L1*(2*m1+m2 - m2*cos(2*d)))
a2 = (2*sin(d)*(w1^2*L1*(m1+m2) + g*(m1+m2)*cos(th1) + w2^2*L2*m2*cos(d))) / (L2*(2*m1+m2 - m2*cos(2*d)))

Good.

Now let me write the file. I'll make it nice with a dark background, glow.

Buttons: Pause/Resume, Reset. Keyboard space maybe.

Let me code.

Trail drawing: I'll draw segments with lineWidth and strokeStyle hsl. For each consecutive pair, alpha = (i/n)^2 * maxAlpha, hue = (baseHue + i*... ) % 360. Simpler: maintain trail points with their own hue assigned at creation cycling over time. Then alpha based on position in array.

I'll cap trail to e.g. 900 points and store hue per point.

Actually fading trail: as new points added, older points should fade. If I assign alpha = index/len, oldest is faint. Good.

Let me use lineTo segments and stroke each.

Let me write.

Total length constant: positions computed from angles; always.

I'll display energy or angles maybe. Optional. Keep minimal but add info.

Let me write file now.

For performance, RK4 at h=0.001, 120fps ~ 60 steps/frame, fine.

Accumulator: acc += Math.min(dt, 0.05). while(acc >= h){ step(h); acc -= h; }

Trail push per frame (not per substep) to keep bounded and visually smooth. Push lower bob pos each animation frame. Also we need trail to be bounded.

Let me set trail max 700.

Colorful: hue = (performance.now()*0.05) % 360 or increment. I'll use a hue variable advancing.

Draw order: trail (fading), rods, bobs, pivot.

Background maybe slightly transparent clear each frame (full clear). Trail drawn from stored points so fine.

Let me write.

Let me write index.html.

Now let's run the browser and inspect.

The pendulum renders. But I notice the trail isn't visible much in this initial frame (just started). Also the initial pose: θ1=120, θ2=-10. The screenshot shows already moving. Let me check the trail after some time. Also the energy display: E = 0.149 J — that seems odd. Let's compute initial energy. θ1=120°, θ2=-10°. y1 = -cos(120)=0.5, y2 = 0.5 - cos(-10)= 0.5-0.985=-0.485. V = 9.81*1*(0.5) + 9.81*1*(-0.485)= 9.81*(0.015)=0.147. So E≈0.147, and it stays ~0.149. Good, conserved.

Now let me verify trail motion with motion frames. Let me wait and screenshot.

Also concern: the trail rendering over time. Let me check motion.

The simulation works, colorful fading trail is visible, energy conserved at 0.149 J, rods connected. The pendulum is a bit small and drifts around; that's expected for chaotic double pendulum. Energy conservation confirms stability.

Now let me test pause/resume and reset. Let me click pause, take screenshot, check it freezes. Then reset.

Note: there's an issue with the trail rendering after pause due to the background fill with alpha 0.32 continuing to darken, which is fine — trail stays.

Let me click Pause button. Coordinates approx (47, 32).

Button now says "Resume", so paused. Let me verify it's frozen by checking state after a moment. I'll take another screenshot after some time. Actually the browser tool's actions are discrete; let me just inspect again to see if angles unchanged.

Paused - angles unchanged at -89.0/-25.8, ω same. Good. The trail persists. Now test reset. Click Reset. Reset should restore θ1=120, θ2=-10, clear trail. Note reset also sets paused=false and button back to Pause. Let me click.

Interesting - after reset, the angles are near 120/-10 (good) but the trail from the previous state is still visible! The screenshot shows both the old faint trail AND the new pendulum at initial position. Why? Because the reset() sets trail=[] and lastTime=null and paused=false, then the reset button handler calls draw(). The subsequent frame() continues. But the old trail in the screenshot appears as the bright green/blue/orange path. Wait, the new pendulum is at top right with θ1≈119, θ2≈-10. The old trail remains.

Hmm. The trail should be cleared. But we see the old trail. Let me think.

Ah I see the bug: The background is drawn with alpha 0.32, but the trail array is cleared. Yet the old trail persists visually because... no, draw() redraws only from trail array. If trail is empty, no trail lines drawn. The old rendered pixels would be overwritten by background fill only partially per frame (alpha 0.32), so old pixels fade over ~many frames. So immediately after reset, the old trail is still faintly visible due to the alpha-blended background not fully clearing.

Actually the screenshot after reset shows a fairly bright trail. Hmm, but the reset handler calls draw() once; the old trail stays because background fill is only 32% opaque. Over subsequent frames it fades. This is a visual artifact — reset should completely clear the trail visually. Better to fully clear the canvas on reset with a full opaque background.

Also more generally, the trail's fading relies on the background alpha wash, but the trail is redrawn each frame from array. The old residual is because we never fully clear. Actually if we redraw trail from array each frame, and background is a translucent wash, the trail persists as accumulated. But if trail array is cleared, the accumulated old trail pixels fade out gradually via the wash. For an immediate clear on reset, I should do a full opaque clear.

Let me fix: add a `clearScreen()` that fills opaque background, call in reset handler before draw, and on resize. Also maybe use full clear each frame? No—the translucent wash gives the glow/fade. But actually since I redraw the trail from array with computed alpha, the persistent accumulation isn't necessary; it just adds glow. Fine.

But wait: there's a subtle issue. The old trail is visible because it accumulated over time and the wash is slow. On reset we want immediate clear. Let me fix by clearing fully in reset.

Also the reset's initial trail point: reset clears trail, then handler draws (no trail point yet if paused?). Actually reset sets paused=false, then handler calls draw() but doesn't add a trail point. Next frame adds one. Fine.

Let me add a helper to fully clear, and call on reset.

Also note the test showed after reset angles were 119.3/-10.3 rather than exactly 120/-10 because time already advanced (a frame ran between click and screenshot). That's expected. The underlying reset sets exactly.

Let me also double check: on reset, should the pendulum be paused? The requirement: "Reset restores the stated initial conditions and clears the trail." Doesn't say pause. Keeping it running is fine. But to make the starting pose clearly visible, maybe reset should pause? Not required. I'll leave running but the initial pose is momentary. Actually many would prefer reset to keep running. Fine.

Let me fix the clear issue. Add function clearScreen and call in reset handler.

Actually better: in the reset button handler and keydown R, call a function doReset() that clears fully. Let me edit.

Also I realize the trail rendering with alpha and source-over accumulates glow but each frame the same segments redrawn over washed background; the net effect is a fading trail. Good.

Let me make the background clear fully at reset.

Now reload and test reset clearing. Let me reload, let it run a bit, click reset, and screenshot.

Now let me let it run, then reset and confirm clear. Let me use motion to run a bit.

Now click reset and immediately screenshot to verify trail cleared.

Trail cleared on reset, initial pose restored (θ1≈120, θ2≈-10). 

Now let me also verify pause/resume after the fix. Click pause then resume. And spacebar. Quick check. Also check the trail is present while running after reset. It showed a short trail near bottom bob in earlier screenshot.

Let me test pause via spacebar and resume, plus verify exact starting angles by pausing quickly after reset. Actually not needed. Let me just test the pause/resume toggle once more quickly.

I already tested pause earlier (worked). The fix didn't touch pause. Good.

One thing: the trail color/glow accumulation. Fine.

Let me verify there are no console errors. Console only shows the sandbox warning, no errors.

Let me do a final motion to confirm trail builds again after reset and motion continues. Already saw earlier. I'll do a quick check.

I think we're good. Let me quickly verify the file is self-contained (no external refs). grep for http.

No external resources. Let me do one final quick pause/resume via spacebar to confirm the keyboard control.

Paused via spacebar (button shows "Resume"). Wait, but the trail now shows a large accumulated trail after only ~1 second? Hmm, actually the pendulum had been running since reset for a while (the earlier reset click, then grep, then this), so it accumulated. Fine.

Entertainment: the trail now shows many loops because MAX_TRAIL=900 and each frame adds one point; at 60fps that's 15 seconds. But between reset and now probably ~15s elapsed. Good.

Everything works. Let me write a brief report.

Actually one consideration: The requirement says "trail of the lower bob" and "bounded fading trail". Yes.

Let me finalize. Resume not needed. Done.

Let me confirm file present.