Make a rope using box2d in javascript

Rope
In this experiment we shall make a rope like thing in box2d. There is no rope like structure that box2d supports directly. But if multiple small units are connected together at their edges using a revolutejoint, then it was act somewhat like a rope.
Lets take a look

You can move any part of the rope using your mouse. Now in this rope, higher the number of parts in the rope more realistic would the rope like behaviour. But more objects mean more processing for box2d as well.
Source

/**
Make a rope in box2d in javascript
Silver Moon (m00n.silv3r@gmail.com)
*/
var b2Vec2 = Box2D.Common.Math.b2Vec2
, b2AABB = Box2D.Collision.b2AABB
, b2BodyDef = Box2D.Dynamics.b2BodyDef
, b2Body = Box2D.Dynamics.b2Body
, b2FixtureDef = Box2D.Dynamics.b2FixtureDef
, b2World = Box2D.Dynamics.b2World
, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
, b2DebugDraw = Box2D.Dynamics.b2DebugDraw
, b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef
, b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef
;

var world;
var ctx;
var canvas_width;
var canvas_height;
var mouse_pressed = false;
var mouse_joint = false;
var mouse_x, mouse_y;
var canvas_width_m, canvas_height_m;

//box2d to canvas scale , therefor 1 metre of box2d = 30px of canvas :)
var scale = 30;

//Draw a world, this method is called in a loop to redraw the world
function draw_world(world, context)
{
//convert the canvas coordinate directions to cartesian coordinate direction by translating and scaling
ctx.save();
ctx.translate(0 , canvas_height);
ctx.scale(1 , -1);
world.DrawDebugData();
ctx.restore();

//write some text
ctx.textAlign = 'right';
ctx.fillStyle = '#fff';
ctx.font = 'bold 15px arial';
ctx.fillText('Rope using...

Read full post here
Make a rope using box2d in javascript