Double pendulum · particle-1

Let me write the simulation.

Equations of motion for double pendulum with equal masses m, lengths L:

θ1'' = (-g(2 sinθ1) - sin(θ1-2θ2)... Standard:

For m1=m2=m, l1=l2=L:
θ1'' = [ -g(2 sinθ1 + sin(θ1-2θ2)) - 2 sin(θ1-θ2)(θ2'^2 L + θ1'^2 L cos(θ1-θ2)) ] / (L(2 - cos(2θ1-2θ2)))

Hmm let me use the standard general form:

θ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:
denom = L(3 - cos(2θ1-2θ2))
θ1'' = ( -g*3 sinθ1 - g sin(θ1-2θ2) - 2 sin(θ1-θ2)(θ2'^2 L + θ1'^2 L cos(θ1-θ2)) ) / denom
θ2'' = 2 sin(θ1-θ2)( θ1'^2 L*2 + g*2 cosθ1 + θ2'^2 L cos(θ1-θ2) ) / denom

Integrate with RK4, dt = 0.002 s substeps.

Trail: fading trail — draw line segments with alpha proportional to age. Bounded max points ~ 2400 (maybe 2-3 seconds of trail). Use per-segment alpha.

Canvas: full window with fixed world scale. Lengths L=1 m, total span 2 m. Scale so pendulum fits ~ 0.42 of min dimension? Pendulum swings from pivot; max reach 2L = 2 m. Scale = min(w,h)*0.4 / 1? Actually radius 2L=2 → scale*2 = 0.4*min → scale = 0.2*min. Place pivot at center-ish, maybe at 0.35*h. Let's set pivot at (w/2, h*0.35) and scale = Math.min(w*0.32, h*0.30) ... radius 2L must fit: need scale*2 < min distance. Let's compute scale = min(w,h)*0.20, radius = 0.4*min. Pivot at (w/2, h/2) maybe. Then bottom reach = h/2 + 0.4*min. If min = h, bottom = 0.9h, ok. Let's pivot at (w/2, h*0.42), scale = Math.min(w*0.22, h*0.22). Then reach = 0.44h. Bottom = 0.86h. Fine. Top reach = 0.42h - 0.44h <0 slightly negative but that's only if the pendulum is straight up which happens initially at 120°: y = pivot + L cos(θ) with cos120 = -0.5 → 0.42h - 0.22h*... wait scale*1*0.5 = 0.11h, fine. Actually max up reach is 2L*scale = 0.44h only in full vertical configuration at 180°, which may happen in energy-wise chaotic motion. Let's use scale = min(w*0.22, h*0.20) and pivot y = h*0.44 → reach 0.40h, top = 0.04h. Good.

I'll also add energy readout maybe, small info panel. Reset button, pause/resume.

Let me write clean code with state {th1, w1, th2, w2}.

Trail: store points with positions and age; max length based on fade time — use array of points, each with x,y, remove when older than trailLife (e.g. 4s). Draw as segments with alpha = (1 - age/life). Simplify: store points, each frame push current bob position. Limit length to e.g. 1500 points. Use globalCompositeOperation 'lighter' maybe for color, but keep simple: hue shifts along age.

Use colors: hue based on age.

Also draw glow-ish. Keep it simple but pretty: dark background, gradient trail.

Physics: use substeps dependent on frame delta clamped. Accumulate time, fixed dt=1/1000? RK4 with dt=0.002 is fine. On each frame, simulate elapsed time but cap elapsed at 0.05s to avoid huge jumps. Better: cap accumulated steps.

Trail sampling: push a point each frame (not every substep) — trail density depends on frame rate but fine; push point if distance from last > 0.5px or every frame.

Better: sample trail during simulation at fixed intervals (e.g., every 8 substeps) so trail consistent regardless of frame rate and pauses. I'll collect trail points in sim loop at fixed sim-time interval (0.008s), then draw. Trail life 4 s → 500 points.

Let me write it.

dt_fixed = 0.001, and each frame advance at most 0.05 s (50 steps). Use real time accumulate.

Actually for accurate playback at 60fps, each frame ~16.7ms → 17 steps of 1ms. RK4 fine.

Draw: line segments with alpha. Fading trail with hue mapping index.

Also display energy? optional. Add a subtle "trail" toggle? Not needed.

Implement RK4:

function derivs(state) -> [w1, a1, w2, a2].

Let me write.

For trail drawing performance: 500 points, fine.

Add pivot: draw a small circle and a mount. Bobs radius ~ 0.05*scale? Use fixed r = 8-12 px scaled relative to scale: r = Math.max(5, scale*0.045).

Now write index.html.

Also HUD with stats: time, pause state, energy maybe.

Let me write the code.

```js
const cvs = document.getElementById('c');
const ctx = cvs.getContext('2d');
let W,H,DPR;
function resize(){
  DPR = Math.min(window.devicePixelRatio||1, 2);
  W = cvs.clientWidth; H = cvs.clientHeight;
  cvs.width = Math.round(W*DPR); cvs.height = Math.round(H*DPR);
  ctx.setTransform(DPR,0,0,DPR,0,0);
}
```

Params: L=1, m=1, g=9.81, th1=120°, th2=-10°, w1=w2=0.

derivs:

```js
function derivs(s){
  const [t1,w1,t2,w2] = s;
  const d = t1-t2;
  const den = 2*L*L*(m1+m2 - m2*Math.cos(2*d)); // careful
```
Use general formulas:
θ1'' = (-g(2m1+m2)sinθ1 - m2 g sin(θ1-2θ2) - 2 sin(d) m2 (w2² L2 + w1² L1 cos d)) / (L1(2m1+m2 - m2 cos 2d))
θ2'' = (2 sin d (w1² L1 (m1+m2) + g(m1+m2) cosθ1 + w2² L2 m2 cos d)) / (L2(2m1+m2 - m2 cos 2d))

With all =1: denom = L*(3 - cos2d).

RK4 step.

Draw trail with quadratic smoothing? Just polylines segments.

Colors: hue from 50 (yellow) to 320? Use hue = (200 + 140*(1 - age)) or map t along trail. I'll compute hue per segment based on its age fraction: hue = 180 + 140*f where f = age frac, giving cyan→magenta. Use hsla with alpha.

Also fade faster at tail.

Trail also fades when paused? No—keep static while paused (age based on sim time so it freezes). Good: compute age by insertion order index relative to sim time; store t (sim time). When paused, sim time doesn't advance → trail stays.

Max trail: TRAIL_LIFE = 3.5 s.

Store trail points {x,y,t}; prune points with t < simTime - TRAIL_LIFE, also cap count.

Draw with lineWidth 2-3 varying by age.

Also add a soft glow using shadowBlur on trail? shadowBlur is expensive for many segments; skip or use moderate. Skip.

HUD: in HTML overlay, a button and keyboard space/R.

Let's write.

Also handle pause on visibility change? not needed.

Write file now.

Drawing pendulum:
pivot px = W/2, py = H*0.44.
scale = Math.min(W*0.22, H*0.20) * 2? Let me define: world max radius = 2 (units). Want radius in px = 0.42*min(W,H) maybe. scale = 0.42*Math.min(W,H)/2 = 0.21*min. With pivot at H*0.44, reach 0.42*min. If W>H, min=H → reach 0.42H, bottom = 0.86H ok, top = 0.02H ok. Good: scale = 0.21*Math.min(W,H). But if W small (narrow window), min=W → reach 0.42W horizontally, fine. Use scale = 0.20*Math.min(W,H) for safety.

x = px + scale*L*sin(θ), y = py + scale*L*cos(θ).

Add subtle grid or background gradient, pivot shadow.

HUD numbers: update time and energy? show simulation time, and angle values maybe. Keep light.

Let me write the file.

The pivot is at y=0.44H = 352, but the upper bob appears at y=280, and the top of the circle is at 352-264=88. Wait, pivot drawn at (600, 352) and upper bob at (740,280)? The rendering looks like the pivot is on the left at (600,352) and there's a bob at (740,280)? Actually two circles: one at (600,352) with a ring (the pivot), and one at (740,280) which is the upper bob. Hmm but the pivot appears to be at left. Angle θ1=115° means sin=0.906, cos=-0.42 → x1=+0.906, y1=-0.42 → screen (600+0.906*264*... wait scale = 0.2*min(1200,800)=160. x1 = 160*0.906=145 → 745, y=352-67=285. Yes upper bob at (745,285). Pivot at (600,352). Good, correct. The rods are constant.

The rendering looks right but the shape seems off - the rod from pivot to upper bob at 115° should point up-right: yes it does. Then θ2 = -12° relative to vertical downward: x2 = x1 + 160*sin(-12°)=745-33=712, y2=285+156=441. Bob at (712,441) ✓.

Wait, in the image the cyan bob is at ~(710,438) ✓.

Now check motion over time. Let's wait a bit and screenshot again, check trail.

Also I notice trail is barely visible at 0.06s. Let's sample at later times.

Motion works, trail fades, energy constant (0.149). But hue mapping makes older trail green/dark rather than fading out brightly. At age 0.5-0.9 the trail becomes dark green (low luminance). Let me improve: keep hue range 185→300 and luminance 60→45, but add alpha falloff stronger so it's subtle. Currently old part appears as a dark green line rather than fading—because opacity formula multiplies (1-age)^1.6 with 0.85, at age 0.9 → 0.008 alpha, so it should be nearly invisible. But the visible dark green suggests... hmm the whole trail life is 4s and the loop is ~1s, so old trail should be invisible. The visible faded green is likely the trail from ~1-3s ago with alpha ~0.2 → looks greenish gray. That's a bit ugly. Use hue keep toward cyan-violet and higher luminance: hue = 185 + 115*age (cyan→violet), lum 62→52. And reduce trail life to 3s.

Also thin old trail. Let's tune: fade = (1-age)^2.2, alpha 0.9*fade, hue 190→310, lum 62→55.

Also maybe add slight color variation with speed? Not needed.

Let me also verify pause/resume and reset. Update color code first.

Initial pose shows θ1=120, θ2=-10, time 0.00. Good.

Now test pause: click Pause, screenshot, wait, screenshot again to confirm frozen. Then resume, check time advancing. Then reset and confirm trail cleared and pose restored.

Trail colors much nicer now (cyan→violet). Paused: button shows Resume. Let's verify time frozen after sleep and screenshot, and that trail is static.

Frozen exactly (time 6.88, same pose, trail unchanged). Resume and check time advances.

Resume works, time advancing, button "Pause". Interesting: trail's old part stays visible (since it's only 6.94s, trail from 3.2s window—old segment at 6.88 appears as faint blue). Fine.

Now test Reset while running.

Reset works: initial pose (120°, -10°), trail cleared, time 0, button "Pause".

One thing to consider: will the motion ever reach outside the visible canvas vertically? Pivot y=0.44H, max radius = 0.4*min(W,H). With H=800, W=1200: reach = 320px, pivot y=352, so top reach = 32px > 0. Fine. Bottom reach = 672 < 800. Fine.

Check resize small window? Optional.

Let me verify long-run stability by evaluating via a quick node simulation using the same equations to ensure it doesn't blow up in 60s. I could use the browser: run at speed? Instead just simulate in node with the RK4 equations copied. Let's do quickly to check energy conservation over 60s.

Excellent stability: 120s simulated energy drift 2.8e-8. Good.

Check console for errors—none reported. Check narrow viewport layout by resizing browser? The browser tool has fixed viewport. Fine.

One improvement: canvas resize when stage size changes handled. Good.

Final check of screenshot at a later time for coupled trail. Already verified. Done.

Report.