LinkSynth

Background

LinkSynth is a fully in-browser 4-bar linkage simulator, with a focus on mechanism synthesis, rather than purely simulation and/or analysis.

There are many linkage simulators/calculators available, but the large majority focus on visualizing and sometimes analyzing a specific configuration defined by the user. This is great when you already know exactly what your desired linkage will look like and/or are ok with a purely iterative, trial and error process for achieving the final design.

Certainly, sometimes the type or "family" of mechanism needed is already known, and so the end state can be reasonably developed with a few rounds of fine tuning. However, the design of a new mechanism generally begins with a list of functional requirements (i.e. what must this thing actually do), and it may not be immediately clear what kind of linkage configuration (if any) can fulfill those requirements. In these cases, a synthesis approach can be much more efficient. This approach starts with the requirements (coupler link positions/velocities/etc, coupler curve path geometry, relationship between the angles of the input and output links, etc), and establishes one or more linkage solutions that will satisfy them.

There are well established synthesis methods for linkage design for a wide variety of functional requirements. The synthesis features of this tool are primarily based on those detailed in Kinematics and Design of Planar Mechanisms by C.H. Chiang. 

How To...

Road Map

Dragging

  • Drag elements to arrange links and joints to desired configuration
  • Dragging the input link allows manual actuation of the linkage

Double Clicks

 

  • Double click on (non fixed) links to toggle between binary and ternary state (aka show/hide third joint/point)
    • Double clicking the fixed link will "invert" the linkage (aka mirror it over the fixed link line)
  • Double click on (non fixed) joints to show/hide trace lines
    • Double clicking the fixed joints will show/hide the fixed link
  • Double click in blank space to fit view to the current linkage

Hover

  • Hover over links to show link name and length
  • Hover over joints to show joint coordinates
    • Note: The fixed joint of the input link is always (0,0)

Reset Default Linkage

   
  • Return to the default linkage configuration

Animate Actuation (Play button):

   
  • Click play to drive the input link and actuate the linkage
  • Click the Reverse arrow to change the actuation direction

Toggle Open/Crossed

   
  • Swap between the "Open" and "Crossed" solutions for the current configuration
  • Click the Crossover button to enable/disable the ability to crossover between open and crossed configurations during actuation
    • The coupler path visual will update to show the reachable range

Swap Input/Output

   
  • Changes which link is the input/driving link, and which is the output/driven

Cycle Cognates

   
  • Every valid 4-bar coupler curve has three distinct solutions (link lengths/arrangements) that can achieve that same curve
  • Clicking this button cycles through the 3 "cognates" for the current coupler curve

Node Mode

  • This is a synthesis method that allows the user to define a set of "nodes" through which the coupler curve must pass
  • A node is a point where the curve crosses its self (i.e. there are two coupler point solutions for the same input angle)
  • A the nodes can be specified as a "Crunode" (loop) or a "Cusp"
  • A 4-bar coupler curve has three Nodes (some may be "imaginary")
    • This tool currently supports the selection of up to two nodes (eventually three), which can be a mix of crunodes and cusps
  • The nodes may be dragged to change their location, which will automatically update the linkage configuration to match
  • The linkage can be actuated while in Node mode. Clicking a node will snap the linkage to that point

Undo/Redo

Fit View

Dark/Light Mode

Code

General

Vibe Factor: Zero(?)

The process by which I originally learned JavaScript (while building a previous project) included frequent use of AI chatbots (asking "how to do (xyz) in javascript", etc), so it's likely that all of my js code is contaminated to some degree with AI coding idiosyncrasies. That said, this project was fully coded by hand with zero use of AI coding agents, and minimal use of chatbots. This is about as close to zero vibe factor as this Mechanical Engineer is capable of 🙃.

Change Log

Latest Release:

7/16/2026:

This is the first "published" version of this tool. Major changes/updates will be documented here.

Planned Upgrades/Additions:

  • Fix remaining edge/corner cases where node mode fails...
  • Implement 3 node synthesis (currently limited to 2)
  • Additional Synthesis methods
    • Coupler path points synthesis (eventually combo with nodes)
    • Symmetric coupler curve synthesis
    • Position / Body guidance synthesis
    • Function generation
  • Add direct user input for specific values (link length, joint/node coordinates
  • Add user defined input/output link angle limits 
  • Global linkage manipulation
    • Scale
    • Rotate
  • Animations:
    • Playback speed adjust
    • Actuate via slider
  • Save/export
    • Save a sharable link and/or file
    • Save GIF of animation