Home▸Animals & Their World▸Spider Web (2D)

Spider Web (2D)

A 2D orb-web physics lab: a Verlet-integrated spring mesh sways in a gusting wind, snags flies that spike local vibration, tears when a strand is overstretched, and a spider patrols out from the hub to wrap whatever it catches.

Animals & Their World2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-spider-web ↗ Open standalone

This 2D companion drives the same orb-web mechanic as the 3D scene on a flat top-down canvas: the web is a Verlet-integrated spring mesh whose junctions sway under a gusting wind force, a constraint pass keeps every strand near its rest length each frame, and a strand that stretches past roughly 2.3× its rest length snaps and stops carrying force. Flies drift in from the edge of the frame, stick to the nearest strand of the capture spiral when they wander close enough, and spike local vibration that draws the spider out from the hub to wrap them — or click any thread yourself to cut it and watch the tension redistribute.

⚙ Under the hood

Verlet-integrated mass-spring web mesh with wind-driven acceleration, iterative constraint relaxation, strand tearing past a stretch threshold, fly-triggered vibration, and a spider that tracks the least-wrapped caught prey.

orb webverlet integrationspring meshprey capture

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

Is the spider web physics real or decorative?

It is a real mass-spring mesh: every junction is a Verlet-integrated particle, wind is applied as an acceleration term, and a constraint-relaxation pass pulls each connected pair back toward its rest length every frame.

Why do threads break?

A strand stops transmitting force once it stretches past roughly 2.3 times its rest length, modeling real silk's limited elasticity before it snaps.

How does the spider decide where to go?

It moves toward whichever caught fly is least wrapped, tracking the same vibration cue a real orb-weaver uses to locate prey on the web.

What did you find?

Add reproduction steps (optional)