Four-Bar Linkage Synthesizer
Designing mechanisms from a target path
Overview
A framework-free web tool that solves the inverse kinematics problem: given the points a coupler must pass through, it synthesizes physically valid four-bar linkages that trace them. Built for ME252.
The problem
Four-bar linkages are usually taught forwards: pick the link lengths and see the path. The hard, useful direction is the inverse: given the path a point must trace, find a mechanism that achieves it. Doing that by hand is tedious, and naive solutions are often physically invalid, they cannot fully rotate or they assemble on the wrong branch.
Approach
- Solve the inverse problem: given precision points a coupler point must pass through, synthesize four-bar linkages that hit them.
- 4-point synthesis via the point-position-reduction method using parametric center-point circles.
- 5-point synthesis via Burmester theory (the tracing-paper construction).
- A differential-evolution optimizer refines candidates numerically, kept off the main thread so the canvas never freezes.
Architecture
- Pure HTML5 Canvas and vanilla JavaScript with zero frameworks, in a glassmorphism dark UI.
- Heavy numerical search runs in a background worker to keep the interface responsive.
- Interactive canvas: click to place precision points, drag to edit, or freehand-draw a curve that auto-samples points.
- Every candidate is classified (crank-rocker, double-crank, and so on) and validated before it is shown.
Challenges solved
Rejecting physically invalid linkages
A synthesized linkage is useless if it cannot fully rotate or assembles on the wrong branch.
Grashof-condition verification guarantees rotatability and branch-defect detection eliminates wrong-assembly-branch solutions, so every result shown is actually buildable.
Keeping the UI fluid during a heavy search
Differential evolution over linkage parameters is compute-heavy and would otherwise freeze the page.
Offloading the search keeps the canvas interactive while the optimizer iterates in the background.
Performance & optimizations
- Analytical construction (center-point circles, Burmester) seeds the search with exact solutions before numerical refinement.
- Green-to-red error visualization surfaces precision error per point at a glance.
- A multi-solution explorer lets you browse up to 20 alternative linkages for the same target.
What I learned
- The inverse kinematics problem is where the real engineering and the interesting math live.
- Validating for Grashof and branch defects matters as much as hitting the target points.
- You can build a genuinely fast, framework-free interactive tool with just Canvas and plain JavaScript.
Future work
- Full-cycle motion animation of the synthesized mechanism.
- Path-generation synthesis for more than five points via optimization alone.
- Shareable links that encode the precision points and the chosen solution.