Walker Linkage Web Simulator

2D browser simulator of the walker linkage from linkage.svg, implemented with HTML Canvas and pure kinematics.

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.
• Foot trajectory traces for both sides.
• Diagnostics panel with closure error and fallback counters.

File layout

• index.html: Canvas + control panel shell
• styles.css: App 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/trace.js: trajectory buffers
• src/ui.js: controls + diagnostics text

Run

Any static server is enough.

Example with Python:

python3 -m http.server 8676

Then open:

http://localhost:8676/

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.