EN 
Українська
Polski
Español
Deutsch
日本語
Italiano
Português (BR)
Français
العربية
Nederlands
中文
한국어
हिन्दी
Türkçe
Tiếng Việt
Русский
Bahasa Indonesia
فارسی
বাংলা
ไทย
Filipino
Kiswahili
اردو
Bahasa Melayu
தமிழ்
עברית
Ελληνικά
ਪੰਜਾਬੀ
አማርኛ
မြန်မာဘာသာ
ខ្មែរ
ქართული
नेपाली
Монгол хэл
Հայերեն
සිංහල
ລາວ
Čeština
Română
Magyar
Български
Svenska
Dansk
Suomi
Norsk
Slovenčina
Hrvatski
Српски
Slovenščina
Lietuvių
Latviešu
Eesti
Íslenska
Shqip
Македонски
Bosanski
Malti
Azərbaycanca
Қазақша
O'zbekcha
Тоҷикӣ
Кыргызча🤸 2D Ragdoll Physics — Constraint-Based Rigid Body
Interactive 2D ragdoll built from real rigid segments and a Verlet constraint solver: distance constraints hold the bones together, iterative angle-hinge constraints stop elbows and knees bending the wrong way. Drag any limb and watch the whole chain react.
🤸 2D Ragdoll Physics — Verlet Solver with Joint Limits
A flat 2D companion to the 3D ragdoll simulation: a 16-point, 19-bone humanoid solved every frame with Verlet integration, distance constraints and hinge angle limits, drawn on a plain canvas.
🔬 What It Demonstrates
Verlet integration stores position and previous position instead of velocity. Each frame, an iterative solver enforces every bone's rest length and clamps the elbow, knee, neck and spine angles into a real range, so the body folds like a jointed character rather than a stretchy blob.
🎮 How to Use
Drag any joint to pull the whole ragdoll along the constraint chain. Watch it interact with the floor and platforms. Tune Gravity, Damping, Iters and Bounce, or hit Drop to spawn it mid-air.
💡 Why Add Angle Limits?
Distance constraints alone only fix bone length, not bend direction — an elbow made of two sticks can flip completely backward. The hinge constraint here measures the live angle between adjacent bones and rotates the far bone back inside its allowed range whenever it swings too far.
About the 2D Ragdoll Physics Simulation
This is a flat 2D companion to the 3D ragdoll simulation, using the same technique — 16 point masses linked by 19 fixed-length bones, advanced with Verlet integration and solved with an iterative constraint pass — but rendered on a plain canvas instead of a WebGL rigid body. On top of the distance constraints, six hinge angle constraints (both elbows, both knees, the neck and the spine) measure the live angle between adjacent bones every solver pass and rotate the far bone back inside its allowed range whenever it swings too far, so the joints bend the way a real body's joints do instead of folding through themselves.
The Gravity slider scales the downward acceleration applied each substep, Damping bleeds off implied velocity for stability, Iters sets how many times the solver passes over every bone and hinge per frame (more passes mean stiffer, more accurate joints), and Bounce controls how much energy survives a floor or platform impact. Drag any joint to pull the whole chain toward the pointer, or hit Drop to spawn the ragdoll mid-air.
Frequently Asked Questions
How is this different from the 3D ragdoll simulation?
Both use the same 16-point, 19-bone skeleton advanced with Verlet integration and an iterative distance-constraint solver. This version renders everything as flat 2D shapes on a plain canvas rather than a WebGL rigid body you can orbit, and it adds explicit hinge angle limits at the elbows, knees, neck and spine.
What stops the elbow or knee from bending the wrong way?
A Hinge constraint measures the signed angle between the two bones meeting at that joint every solver pass. If the angle has swung outside the joint's allowed range, the far bone is rotated back to the boundary angle around the joint, at the same fixed length. Distance constraints alone cannot do this — they only fix how long a bone is, not the angle it makes with its neighbour.
Why does dragging one hand move the whole body?
The point under your pointer is pinned to the cursor. Every solver pass, the distance constraints along the arm, spine, hip and legs try to keep every bone at its rest length, so pulling one point drags its neighbours, and their neighbours, transmitting the motion along the whole constraint chain.
What do the four physics sliders change?
Gravity scales the per-substep downward pull. Damping (0.90–1.00) multiplies the implied velocity each step, so lower values calm the ragdoll faster. Iters (2–20) sets how many times the distance and hinge constraints are solved per frame — more passes give stiffer bones and tighter joint limits. Bounce (0–0.9) is the fraction of velocity reflected on hitting the floor or a platform.
Is the hinge limit anatomically exact?
No — it is a simplified single-axis hinge, not a full biomechanical joint model. Each hinge allows a wide "flex" swing (about 150° for elbows and knees) and a narrow "hyperextension" swing (about 8°) in the opposite direction, detected automatically from the ragdoll's resting pose, which is enough to stop the pretzel folding a pure distance-constraint chain allows while still looking natural.
How does the ragdoll collide with the floor and platforms?
After each integration substep, every point is checked against the canvas edges and the rectangular platforms. A point that has penetrated a surface is pushed back to the boundary, and its previous position is adjusted so its implied velocity reverses and is scaled by the Bounce value.
What is the role of the substeps?
The loop runs three substeps per displayed frame, each with its own integration and full constraint solve. Splitting a frame into smaller steps reduces how far a fast-moving point travels before its constraints are re-checked, which keeps the solver stable and stops limbs from tunnelling through the floor.
What do the readouts at the bottom mean?
Head vel is the magnitude of the head joint's implied velocity in pixels per frame. Constraint error sums the absolute length deviation across every bone, showing how far the solver still is from a perfect solution. Hinge corrections reports the largest angle correction applied on the final solver pass, in radians. Solver shows the iteration count times the substep count — the total constraint passes applied every frame.
Interactive 2D ragdoll built from real rigid segments and a Verlet constraint solver: distance constraints hold the bones together, iterative angle-hinge constraints stop elbows and knees bending the wrong way. Drag any limb and watch the whole chain react.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install