PhysicsJS - Creating rope & attach something at the end of it

canvas, html5-canvas, javascript, physicsjs

Solution

You can add a box and attach it to the end of the rope:

var box = Physics.body('rectangle', {
    x: i
    ,y: 50 - (i-fpos)
    ,width: 60
    ,height: 60
    ,styles: { fillStyle: '#fff' }
});

rigidConstraints.distanceConstraint( basket[ l - 1 ], box, 2 );

world.add(box);

Which results in something like this: http://jsfiddle.net/REGCU/14/ But unfortunately at this time there isn't yet a way to handle adding constraints to the edge of the box as you've drawn.

It's an outstanding issue: https://github.com/wellcaffeinated/PhysicsJS/issues/5

Problem

Question #1: I'm new to PhysicsJS, and i tried to create a rope with idea of "Basket of verlet constraints" something like this: JSFiddle as you see, this rope is not acting natural! (friction, rope wight, stability time & ...) and by increasing the length of rope, it got worse! first i think, by increasing the mass of ropes particles, it will slow down faster but ... ``` var basket = []; var fpos = window.innerWidth / 2; var epos = window.innerHeight / 2; for ( var i = fpos; i < fpos + epos; i += 5 ){ l = basket.push( Physics.body('circle', { x: i ,y: 50 - (i-fpos) ,radius: 1 ,restitution: 0 ,mass: 1000 ,conf: 1 ,hidden: true }) ); rigidConstraints.distanceConstraint( basket[ l - 1 ], basket[ l - 2 ], 2 ); } ``` Question #2: after fixing that, how can i crate this: (attaching a rectangular box at the end of rope)

Original source