Home▸Physics & Mechanics▸Cloth Simulation 2D: Catenary, Drape and Flag Flutter

🧵 Cloth Simulation 2D: Catenary, Drape and Flag Flutter

Interactive 2D cloth strip simulation: catenary sag against the closed form, draping with friction, table-edge slide and flag flutter, with live energy and stretch graphs and numeric checks.

Physics & Mechanics2DEasy60 FPS📱 Mobile-adapted💨 Air & Wind ⇄ 3D version

Details

CategoryPhysics & Mechanics

RenderingCanvas 2D

DifficultyEasy

Target FPS60

ControlsTwo mode buttons switch between dragging a node with the mouse and tearing the fabric near a spring; a pins toggle enables or disables the pinned top-row anchors and a reset button rebuilds the cloth. Four sliders control spring stiffness (0.1-1), wind strength (0-30), gravity (0-2000) and grid resolution (10-46 columns, rows scale proportionally), each rebuilding or re-parameterizing the simulation live.

clothfabriccatenaryverletmass-springwindfrictionflag2D canvas

📖 Read the articleThe maths behind Cloth Simulation 2D: Catenary, Drape and Flag Flutter

Related simulations

Cloth Wind (2D)A 2D Verlet-integrated cloth grid pinned at the top edge that billows and sags as you adjust…

Cloth WindThis simulation demonstrates the behavior of flexible materials when subjected to wind…

2D Cloth Hanging Under GravityA 2D mass-spring cloth grid that hangs under gravity, ripples in adjustable wind, and tears… ⊞ All 4131 in Physics & Mechanics →

⚙ Under the hood

Interactive 2D cloth strip simulation: catenary sag against the closed form, draping with friction, table-edge slide and flag flutter, with live energy and stretch graphs and numeric checks.

clothfabriccatenaryverletmass-springwindfrictionflag2D canvas

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