Rendering physics-based ropes in melonJS (with the help of Chipmunk-js for physics)

[Jason Oster]

I'm working on a new game this month, and I thought it would be really cool to experiment with rendering ropes! The game uses Chipmunk-js for physics, and we want the ability to attach items together with ropes, so it was the perfect opportunity.

So a little background information is in order. The very first time I used a physics engine was during a 48-hour game jam last April. I created the game with Stencyl, which has Box2d support built-in. The game concept required the player to carry a power cord to plug into power outlets. The physics interactions in the game are all for simulating the cord. Being my first time using physics, and under time pressure, I decided to create the cord using a bunch of line segments connected end-to-end. Well, at least it worked... it wasn't particularly pretty, though. Here's the game: http://www.kodewerx.org/projects/tethyrd.swf So I know that's one way to draw a physics-based rope.

I came up with another idea, though. An idea that seemed too simple... it had to have been done before: draw the rope with a cubic Bézier curve! Google turned up very few interesting results with the search term "bezier rope". Mostly Blender tutorials and videos... and a single relevant but unanswered question on stack overflow: http://stackoverflow.com/questions/8233850/bezier-curve-always-the-same-length

I have no idea what they are talking about with integrating square roots and something something 6-degree polynomials. It was about this time I decided I didn't care to make the rope length accurate at all, I just wanted to approximate the length, while applying some physical forces to the rope.

After some pondering on the subject, I came to the following conclusion:

[21:04.30] <Parasyte> The idea is that I know the two end points of the curve, and when they are max distance apart, the rope is a straight line. When the points come closer together, generate the two control points such that the length of the curve is approximately the same.
[21:06.50] <Parasyte> Ideally, I think it could create a pretty nice looking rope simulation, if the control points are moved around by a 2d physics engine.
[21:08.27] <Parasyte> On the surface, it appears the control points always point down, unless there is tension (the distance between the end-points increases) or when you want to simulate the rope resting on another surface.
[21:09.21] <Parasyte> So… control points are affected by gravity, and they collide with the environment.

That's when I decided to start a jsfiddle to play around with the idea of drawing a Bézier curve with the control points affected by gravity and collisions. About an hour-and-a-half later, I have a fully working physics simulation of a rope!

The demo, including source: http://jsfiddle.net/MAKhV/3/

For an explanation of how it works, check my blog post: http://blog.kodewerx.org/2012/11/game-off-day-3.html

The demo uses my "chipMelon" plugin for melonJS 0.9.5 (forthcoming). chipMelon is currently available under GPL, but that will be changing as we get closer to the next melonJS release. :) I hope someone finds this useful! The code can be rewritten in a more modular fashion and with support for managing specific properties like rope length, adjusting the weight of the rope by using a smaller mass on the control points, maybe a custom velocity function on the control points to change how gravity effects them, etc. Final note: This is not the most performance-friendly method of rendering a rope! Drawing a cubic Bézier curve every frame is kind of a heavy operation. That's just the price to pay for perfectly smooth animation.

[Greg Houston]

That's awesome. It immediately made me think of this game:
http://www.cuttherope.ie/

And then Parachute Ninja made by the same people:
http://www.youtube.com/watch?v=9V_IHp63KWA&feature=youtu.be