Home▸Physics & Mechanics▸2D Spring-Mass Network

🕸️ 2D Spring-Mass Network — Build Your Own Oscillator

Build your own 2D spring-mass network: click to add masses, drag between two masses to connect a spring, then watch real Hooke's-law physics settle and oscillate.

Physics & Mechanics2DModerate60 FPS📱 Mobile-adapted⇄ 3D version

Place masses, connect them with springs, and watch real Hooke's-law physics take over. This editable 2D graph is the mathematical backbone of cloth simulation, molecular dynamics, structural engineering and computer animation.

🔬 What It Demonstrates

Each spring exerts a restoring force F = −k·(L − L0) (Hooke's law), summed per mass over every attached spring. The whole graph is a system of coupled oscillators integrated with semi-implicit Euler in small substeps for numerical stability.

🎮 How to Use

Switch to Add Mass and click empty space to place masses (click one to pin it, double-click to delete). Switch to Connect and drag from one mass to another to add a spring. Switch to Drag to grab and perturb the live network.

💡 Did You Know?

The Tacoma Narrows Bridge collapsed in 1940 because its deck acted like a spring-mass system driven at its natural resonance frequency by steady winds. Modern suspension bridges include tuned mass dampers — heavy pendulums that absorb vibration energy.

About the 2D Spring-Mass Network

This simulation is an editable graph of point masses connected by elastic springs, integrated in real time with a semi-implicit Euler scheme. Each spring applies a restoring force proportional to how far it is stretched or compressed from its rest length, following Hooke's law F = -k·(L - L0), and every mass sums the pull of every spring attached to it plus gravity. A damping term bleeds off energy so the network can settle.

Unlike a fixed demo, you build the topology yourself: click to add masses, drag between two masses to wire a spring between them, pin any mass to act as a fixed anchor, and drag live masses to pluck the network and watch waves propagate through the coupled oscillators. Spring-mass graphs like this underpin soft-body, cloth and hair simulation in games and film, as well as structural and molecular vibration models.

Frequently Asked Questions

How do I build my own network?

Switch to Add Mass mode and click anywhere on the canvas to place a mass. Switch to Connect mode and drag from one mass to another to join them with a spring. Switch to Drag mode to grab and perturb any mass in the live simulation.

What is a spring-mass system?

It is a set of point masses linked by springs. Each spring pulls or pushes its two masses back toward a rest length, and the combined forces produce oscillation, wave propagation and elastic deformation across the whole network.

What does the stiffness control do?

Stiffness is the spring constant k in Hooke's law. Higher stiffness makes springs resist stretching more strongly, so the network is firmer and oscillates faster; lower stiffness makes it floppy and slow to respond.

What does damping change?

Damping removes kinetic energy on each step, like friction or air resistance. More damping makes motion die out quickly and settle; less damping lets the network bounce and ring for longer.

What is Hooke's law?

Hooke's law states that the restoring force of an ideal spring is proportional to its displacement from rest, F = -k·(L - L0). The sign always points the force back toward the equilibrium length.

How do I pin a mass in place?

In Add Mass mode, click an existing mass to toggle it pinned. Pinned masses turn red and act as fixed boundary conditions — the rest of the network vibrates around them.

How do I delete a mass or start over?

In Add Mass mode, double-click a mass to remove it along with every spring attached to it. Use the Clear button to wipe the whole canvas, or Chain/Grid to load a ready-made topology.

Can the network become unstable?

Yes. If stiffness is very high and damping is low, the fixed time step can no longer resolve the fast oscillation, and the simulation may overshoot. Reducing stiffness or adding damping restores stability.

How is this different from the 3D Spring-Mass Network?

This version is a flat, freely editable 2D graph you build by hand. The 3D version renders preset chain, cloth and jelly-cube configurations in three dimensions with camera orbit, using the same underlying Hooke's-law physics.

Why do dragged masses pull their neighbours along?

Because the springs couple neighbouring masses, moving one stretches the springs attached to it, which immediately exerts force on the connected masses and propagates the disturbance through the network as a wave.

⚙ Under the hood

Build your own 2D spring-mass network: click to add masses, drag between two masses to connect a spring, then watch real Hooke's-law forces, gravity and damping settle the graph.

physicsspringshooke's lawoscillation2deditormechanics

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install