I'm trying to simulate a rope physically correct on a website.

Having searched the web, my conclusion is that I need a physics engine like box2d?

If I have understood it right the solution is to split up an object into small segments and then to join and animate these all together. In addition, I want to combine the physics with the browser. What that means is: when I'm scrolling the website fast down, the rope has to react in a physically correct manner.

is this possible?

I'm trying to simulate a rope physically correct on a website.

Having searched the web, my conclusion is that I need a physics engine like box2d?

If I have understood it right the solution is to split up an object into small segments and then to join and animate these all together. In addition, I want to combine the physics with the browser. What that means is: when I'm scrolling the website fast down, the rope has to react in a physically correct manner.

is this possible?

• javascript
• jquery
• html
• canvas

• 1 What have you tried? This is a very specific project with little detail or evidence that you've really exhausted your resources. Start with that box2d documentation – Scrimothy Commented Oct 31, 2012 at 22:47
• You don't necessarily need a library although it may be useful, I've seen examples with just JS. Look for spring physics since that's what you'll probably be using to make the rope. – elclanrs Commented Oct 31, 2012 at 22:50
• @scrimothy. i didnt tried anything but just because I dont know if box2d is the right way. maybe someone had a similar project and solved it easier or different. – kingmauri Commented Oct 31, 2012 at 22:52
• Just admit you were being lazy, then scurry off to your corner. Come back when you've actually put some work into it. – Shmiddty Commented Oct 31, 2012 at 22:56
• @elclanrs good hint. have to try. thx. – kingmauri Commented Oct 31, 2012 at 22:57

1 Answer 1

You don't need a library at all. You can happily do this with object, component or procedural code, and an understanding of basic mechanical physics and some 2D geometry (basic calculus might help).

Doing it in an optimized fashion would require more work. Doing it in a modular and reusable fashion would require some upfront engineering.

But making a rope, and making the rope behave normally is quite straightforward.

A 2D rope would be a series of line-segments or "bones". Each bone can bend around its joints.

You can apply gravity or whatever other forces you would like to each bone.
Each bone has constraints (the other bones it's attached to, above and below).
So as you update the "rope", you update each bone, based on the constraints which came before and after.
You can create an anchor point -- pinning the top of the rope to the wall, so that regardless of how the other bones move, the top-most bone will pivot around its top joint, but will not move anywhere.

To apply physics to the middle of the hanging rope (like pulling it by the middle, and then letting go), you would use Inverse Kinematics to solve how that force against one or two joints affected each of the other attached (and constrained) joints.

Think of it less like a snake, and more like a bike chain.
The shorter each "link" in the chain, the more fluid the rope will seem, but the longer it will take to process.
The longer each "link" in the chain, the faster you can compute the changes, but the more rigid and blocky it seems as it bends.

Look up "Verlet Integration", "Kinematics" ("Forward"/"Inverse") and have a half-decent grasp of the math behind rotation and moving an object along 2D vectors...
With a little bit of mass in there, if you want to get fancy with the whip-like stuff, rather than just making waves.

The rest is just loops.

See the following for a basic example:
http://gamedev.tutsplus.com/tutorials/implementation/simulate-fabric-and-ragdolls-with-simple-verlet-integration/

And have fun.