Four-Bar Linkage Static Web Simulator

Project Overview

The simulator is designed for students, instructors, and engineers studying Mechanism Design, Kinematics of Machinery, Machine Theory, or Mechanical Engineering Design.

This version is a pure static web application:

HTML defines the interface, controls, SVG workspace, and theory content.
CSS controls the responsive layout, visual styling, cards, buttons, sliders, status badges, and SVG appearance.
JavaScript handles link-position solving, mechanism classification, branch switching, real-time animation, and SVG drawing inside the browser.

The app can be uploaded directly to a website as three files: index.html, styles.css, and app.js.

Pane	Purpose
Left pane	Contains link-length sliders, animation controls, branch selection, Grashof index, validity index, and mechanism state output.
Right pane	Contains the SVG animation with fixed ground pivots, labels, angle arcs, and status overlays.

Quick Start

Upload these three files to the same directory on your website:

index.html
styles.css
app.js

Then open index.html in a browser. For local testing, double-click index.html or serve the directory with any static server.

python -m http.server 8000

After editing only web files, refresh the browser. A hard refresh such as Ctrl + F5 is useful when the browser caches the old CSS or JavaScript.

Mechanism Design Theory

Mechanism design studies systems of rigid or flexible bodies connected by joints so that an input motion is transformed into a desired output motion. Unlike structural design, where the primary concern is resisting loads without moving, mechanism design focuses on controlled motion generation.

A mechanism usually contains links, joints, a ground or frame, an input link, an output link, and a coupler/floating link. In planar mechanism design, the most important joint is the revolute joint, which allows one link to rotate relative to another link about a fixed point.

The four-bar linkage is the most fundamental planar closed-chain mechanism. It is frequently used to teach position analysis, velocity analysis, acceleration analysis, Grashof classification, toggle positions, singularities, motion synthesis, and coupler-curve generation.

Four-Bar Linkage Model

A planar four-bar linkage consists of four rigid links connected in a closed loop by four revolute joints. In this project, the notation is:

Symbol	Name	Description
g	Ground link	Fixed link between anchor pivots A and B.
a	Input link	Driven link from A to moving pivot C. Its input angle is α.
b	Output link	Output link from fixed pivot B to moving pivot D. Its output angle is β.
f	Floating/coupler link	Moving link connecting pivots C and D.

The GUI sliders restrict each link length to:

5\;\text{cm} \leq g,a,b,f \leq 40\;\text{cm}.

Coordinate Definition

The ground pivots are fixed in the global coordinate system:

A=(0,0), \qquad B=(g,0).

The input link rotates about pivot A with input angle α:

C = A + a \begin{bmatrix} \cos \alpha \\ \sin \alpha \end{bmatrix} = \begin{bmatrix} a\cos\alpha \\ a\sin\alpha \end{bmatrix}.

The output link rotates about pivot B with output angle β:

D = B + b \begin{bmatrix} \cos \beta \\ \sin \beta \end{bmatrix} = \begin{bmatrix} g + b\cos\beta \\ b\sin\beta \end{bmatrix}.

The floating link imposes the loop-closure constraint:

\|D-C\| = f.

Equivalently, the vector loop equation is:

\vec{AB}+\vec{BD}+\vec{DC}+\vec{CA}=0.

Using this project notation:

g \begin{bmatrix} 1 \\ 0 \end{bmatrix} + b \begin{bmatrix} \cos\beta \\ \sin\beta \end{bmatrix} - f \begin{bmatrix} \cos\gamma \\ \sin\gamma \end{bmatrix} - a \begin{bmatrix} \cos\alpha \\ \sin\alpha \end{bmatrix} =0,

where γ is the floating-link angle.

Position Solution by Circle Intersection

The browser simulation solves the mechanism geometrically. For each input angle α, point C is known. Point D must satisfy two circle constraints:

\|D-C\|=f, \qquad \|D-B\|=b.

Thus, D is obtained from the intersection of a circle centered at C with radius f and a circle centered at B with radius b.

Let:

d=\|B-C\|.

A real assembly exists only if the circle-intersection condition is satisfied:

|f-b| \leq d \leq f+b.

The distance from C to the projection point on line CB is:

x = \frac{f^2-b^2+d^2}{2d}.

The perpendicular distance from line CB to either intersection point is:

h=\sqrt{f^2-x^2}.

The two possible signs of h correspond to the two assembly branches: open branch and crossed branch. The app exposes this through the branch selector in the left pane.

Freudenstein Equation

The classical four-bar position equation can also be expressed through the Freudenstein equation. For this notation, one useful convention is:

K_1\cos\beta - K_2\cos\alpha + K_3 = \cos(\alpha-\beta),

where:

K_1=\frac{g}{a}, \qquad K_2=\frac{g}{b}, \qquad K_3=\frac{a^2-f^2+b^2+g^2}{2ab}.

This equation is useful for analytical position analysis, but the current browser simulation uses the circle-intersection method because it is direct, stable, and visually matches the SVG geometry.

Grashof Criterion

Let the four link lengths be sorted as:

s \leq p \leq q \leq l,

where s is the shortest link, l is the longest link, and p and q are the two intermediate links.

The Grashof criterion is:

s+l \leq p+q.

The simulator displays the Grashof index as:

\[G=s+l-p-q.\]

Condition	Meaning
\(G<0\)	Strict Grashof linkage. At least one link is capable of complete rotation.
\(G=0\)	Change-point linkage. The linkage may pass through a collinear singular configuration.
\(G>0\)	Non-Grashof linkage. No link can fully rotate relative to the others in the usual closed-chain assembly.

Validity Index

A four-bar mechanism can only form a closed quadrilateral if the longest link is not longer than the sum of the other three links. The simulator displays the validity index:

\[V=l-s-p-q.\]

Condition	Meaning
\(V<0\)	The selected link lengths can form a valid closed four-bar quadrilateral.
\(V=0\)	The mechanism is at the limiting collinear case.
\(V>0\)	The longest link is too long; the mechanism cannot close for any assembly.

Excess Quantities T1, T2, and T3

The simulator also reports three excess quantities:

\[T_1=g+f-b-a,\]

\[T_2=b+g-f-a,\]

\[T_3=f+b-g-a.\]

These quantities are useful in four-bar classification because their signs indicate how the ground, input, output, and floating links compare in possible inversions. The browser app shows these values in the left pane so that the visual mechanism state can be connected to the algebraic classification.

Crank, Rocker, 0-Rocker, and π-Rocker

A crank is a link that can rotate through a full 360° cycle relative to the ground link. A rocker cannot complete a full revolution; it oscillates between two angular limits.

State	Meaning
crank-crank	Both input and output links can rotate fully.
crank-rocker	The input link can rotate fully; the output link oscillates.
rocker-crank	The input link oscillates; the output link can rotate fully.
rocker-rocker	Both input and output links oscillate.

Some teaching references use more detailed rocker labels such as 0-rocker and π-rocker. A 0-rocker has a feasible angular interval associated with the zero-angle side of the reference direction, while a π-rocker has a feasible interval associated with the 180° or π-radian side.

In this static JavaScript implementation, the displayed state is computed numerically by sampling feasible input and output angles over one full cycle. If an angle covers the full range, the corresponding link is classified as a crank. Otherwise, it is classified as a rocker.

Toggle Positions and Singular Configurations

A four-bar linkage reaches a toggle position when two or more links become collinear. At such configurations, the velocity relationship between input and output may become singular, and a small input motion may produce very large or very small output motion depending on the configuration.

Mathematically, singular behavior occurs when the Jacobian of the loop-closure equations loses rank. If the loop-closure equations are written as:

F(\alpha,\beta,\gamma)=0,

then a singularity may occur when:

\det\left(\frac{\partial F}{\partial(\beta,\gamma)}\right)=0.

In the browser simulation, invalid or near-singular configurations appear when the circle-intersection solution becomes impossible or nearly tangent:

h \approx 0.

Real-World Applications

Four-bar linkages are widely used because they provide complex motion using simple revolute joints and rigid links.

Automotive suspension: control arms and linkage systems guide wheel motion.
Windshield wipers: crank-rocker mechanisms convert motor rotation into oscillating wiper motion.
Robotic grippers: parallel and approximate-parallel jaw mechanisms often use four-bar geometry.
Excavators and loaders: bucket and boom linkages guide tool orientation.
Walking mechanisms: coupler curves can approximate foot trajectories.
Bicycle suspension: multi-link rear suspension systems often contain four-bar substructures.
Aircraft and machine tools: linkages transmit controlled angular motion in compact assemblies.
Medical and rehabilitation devices: linkage mechanisms can guide ergonomic motion paths.

Web Application Features

Responsive two-pane layout.
Scrollable settings pane on smaller screens.
Sliders for g, a, b, and f.
Real-time SVG animation.
Fixed ground pivots A and B.
Ground link g remains fixed and horizontal.
Moving labels for links a, b, and f.
Input angle display α and output angle display β.
Play/Pause animation.
Branch selector for open and crossed assemblies.
Grashof / non-Grashof status.
Validity status.
Mechanism state: crank-crank, crank-rocker, rocker-crank, or rocker-rocker.
MathJax-rendered formulas for the theory section.

Static Project Structure

fourbar-linkage-static-js/
├── index.html
├── styles.css
└── app.js

Code Explanation

`index.html`

This file defines the left control pane, all sliders and numeric value displays, Play/Pause button, branch controls, Grashof/validity/mechanism-state badges, SVG canvas, MathJax configuration, and the full educational theory content below the animation pane.

`styles.css`

This file controls typography, layout, responsive behavior, slider styling, buttons, cards, status badges, theory article formatting, tables, code blocks, and SVG visual elements.

`app.js`

This file contains the simulation logic: reading slider values, updating numeric displays, solving the linkage position by circle intersection, drawing links and joints in SVG, keeping the ground pivots fixed, classifying Grashof and non-Grashof states, classifying crank/rocker behavior by numerical sampling, and animating the input angle.

Troubleshooting

CSS or JavaScript changes do not appear

The browser may be caching old files. Use a hard refresh such as Ctrl + F5, or temporarily add a query string:

<link rel="stylesheet" href="styles.css?v=2">
<script src="app.js?v=2"></script>

The ground link rotates during animation

In a correct four-bar simulation, the ground link must not rotate. The ground pivots are fixed:

A=(0,0), \qquad B=(g,0).

If the ground appears to rotate, the SVG transform is probably being recomputed from moving links instead of fixed ground anchors. This version anchors A and B to stable screen coordinates and scales the mechanism around the fixed ground link.

Math formulas do not render

Make sure the MathJax script in index.html is reachable. If your website blocks CDN scripts, download MathJax and replace the CDN URL with a local path.

Educational Use

This project can be used in a mechanism design course to demonstrate four-bar topology, open and crossed assemblies, input-output angle relation, Grashof classification, validity of link lengths, crank and rocker behavior, motion limits, toggle positions, coupler motion, and the relationship between algebraic indices and visual kinematics.

Choose a Grashof mechanism and identify which link is the shortest.
Fix different links conceptually and predict crank-rocker behavior.
Move the sliders until G = 0 and observe change-point behavior.
Move the sliders until V > 0 and observe invalid assembly behavior.
Compare open and crossed branches for the same link lengths.
Record input angle α and output angle β at several configurations.

Future Improvements

Velocity and acceleration analysis.
Coupler curve tracing.
Export animation frames.
Export CSV table of α, β, and joint coordinates.
Force and torque analysis.
Transmission angle display.
Singularity detection with warnings.
Local MathJax bundle for fully offline hosting.
Additional static examples and presets.

Full linkage model

Four-Bar Linkage Web Simulator