Walker Linkage Web Simulator

2D + 3D browser simulator of the walker linkage from linkage.svg, implemented with HTML Canvas for the top pane and Three.js for the lower pane.

Features

• One-side linkage solve from fixed bar lengths and crank angle.
• Duplicated opposite side with 180° phase offset.
• Color mapping aligned with the drawing:
  • pivots = yellow
  • crank = green
  • links = black
  • body = red
• Play/pause, reset, speed slider, angle scrubber.
• Live length controls in centimeters (cm):
  • body (AB) with A/B preserved as body endpoints
  • crank (OC)
  • leg (CG) with automatic coupling to CF
  • tendon (BE) with automatic coupling to AD
  • defaults normalized to a 45 cm leg baseline while preserving original mechanism ratios
  • mirrored automatically to far side (180° phase side)
• Presets save/load for named dimension setups (persisted in browser local storage).
• Foot trajectory traces for both sides.
• Optional linkage annotation overlay (joint and link labels).
• Optional real-time 3D viewport with orbit camera and camera reset.
• Diagnostics panel with closure error and fallback counters.

File layout

• index.html: 2D + 3D viewport shell and control panel
• styles.css: Stacked view layout and styling
• src/main.js: bootstrap, animation loop, integration
• src/math.js: vector math and circle intersection
• src/geometry.js: normalized points and derived lengths
• src/kinematics.js: mechanism solve for near/far sides
• src/renderer.js: Canvas rendering pipeline
• src/renderer3d.js: Three.js scene, camera, and 3D linkage rendering
• src/trace.js: trajectory buffers
• src/ui.js: controls + diagnostics text

Run

Any static server is enough.

No build step is required. Three.js is loaded via ESM URL imports.

Example with Python:

python3 -m http.server 8676

Then open:

http://localhost:8676/

MuJoCo rigid-body track

A Python + MuJoCo scaffold is available in sim/mujoco for rigid-body walking experiments.

Quick start:

cd sim/mujoco
uv sync
uv run walker-run --seconds 10

Use uv run walker-run --viewer --seconds 30 for interactive visualization. See sim/mujoco/README.md for details.

To compare physics in the browser app with true MuJoCo playback in the 3D pane, export JSON via uv run walker-export-web --frame world --seconds 15 --out ../../artifacts/mujoco_trace.json from sim/mujoco, then load it in the "MuJoCo Import" panel.

Notes:

• Default export format is v2 (walkersim-mujoco-playback-v2) with time-indexed 3D frames.
• overlay2d is embedded in the same payload, so the 2D pane still shows foot traces.
• For legacy 2D-only payloads, use --format v1.

Model notes

• v1 is pure kinematic visualization.
• No collision/ground dynamics and no body translation.
• Side B is driven by theta + pi.
• Lower branch of each circle-circle intersection is selected to maintain leg-down posture.