I've been experimenting with the excellent PhysicsJS library, especially constraints and collisions. What I'm trying to achieve is a polygon which can spin about a fixed rotation point. As a real world example, imagine a wide shelf nailed to a wall with just one long nail through the very center, so that it spins round maybe half or one revolution when something off-center drops on it from above.

Here is an example fiddle: /

and the code:

Physics(function (world) {
var renderer = Physics.renderer('canvas', {
    el: 'viewport',
    width: 500,
    height: 400
});
world.add(renderer);

var nail = Physics.body('circle', {
    x: 250,
    y: 200,
    radius: 5,
    mass: 1,
    fixed: true
});
world.add(nail);

var shelf = Physics.body('convex-polygon', {
    x: 250,
    y: 200,
    vertices: [{
        x: -100,
        y: -10
    }, {
        x: 100,
        y: -10
    }, {
        x: 100,
        y: 10
    }, {
        x: -100,
        y: 10
    }],
    mass: 100,
    restitution: 0.5
});
world.add(shelf);

var ball = Physics.body('circle', {
    x: 175,
    y: 50,
    radius: 20,
    mass: 10
});
world.add(ball);

world.add(Physics.integrator('verlet', {
    drag: 0.003
}));

var verletConstraints = Physics.behavior('verlet-constraints', {
    iterations: 2
});
verletConstraints.distanceConstraint(shelf, nail, 1);
world.add(verletConstraints);

world.add(Physics.behavior('constant-acceleration'));
world.add(Physics.behavior('body-collision-detection'));
world.add(Physics.behavior('body-impulse-response'));
world.add(Physics.behavior('sweep-prune'));
world.add(Physics.behavior('verlet-constraints'));

var bounds = Physics.aabb(0, 0, 500, 400);

world.add(Physics.behavior('edge-collision-detection', {
    aabb: bounds,
    restitution: 0.01
}));

Physics.util.ticker.subscribe(function (time, dt) {
    world.step(time);
});

world.render();

Physics.util.ticker.start();

world.subscribe('step', function () {
    world.render();
});
});

I define a fixed circle for the nail and a non-fixed polygon for the shelf and add a distance constraint linking the polygon to the circle. As you can see, there are 2 problems. Firstly, the shelf immediately drops down slightly until its top edge is flush with the top of the nail, rather than remaining evenly positioned around the nail. Secondly, when the ball drops onto the shelf, the shelf goes crazy spinning round endlessly, despite having mass and various restitution settings tried. Adjusting its position slightly, sometimes it can even detach pletely and fly off.

Am I on the right track using constraints in this way, or is there a simpler solution?

I've been experimenting with the excellent PhysicsJS library, especially constraints and collisions. What I'm trying to achieve is a polygon which can spin about a fixed rotation point. As a real world example, imagine a wide shelf nailed to a wall with just one long nail through the very center, so that it spins round maybe half or one revolution when something off-center drops on it from above.

Here is an example fiddle: http://jsfiddle/2HRGW/41/

and the code:

Physics(function (world) {
var renderer = Physics.renderer('canvas', {
    el: 'viewport',
    width: 500,
    height: 400
});
world.add(renderer);

var nail = Physics.body('circle', {
    x: 250,
    y: 200,
    radius: 5,
    mass: 1,
    fixed: true
});
world.add(nail);

var shelf = Physics.body('convex-polygon', {
    x: 250,
    y: 200,
    vertices: [{
        x: -100,
        y: -10
    }, {
        x: 100,
        y: -10
    }, {
        x: 100,
        y: 10
    }, {
        x: -100,
        y: 10
    }],
    mass: 100,
    restitution: 0.5
});
world.add(shelf);

var ball = Physics.body('circle', {
    x: 175,
    y: 50,
    radius: 20,
    mass: 10
});
world.add(ball);

world.add(Physics.integrator('verlet', {
    drag: 0.003
}));

var verletConstraints = Physics.behavior('verlet-constraints', {
    iterations: 2
});
verletConstraints.distanceConstraint(shelf, nail, 1);
world.add(verletConstraints);

world.add(Physics.behavior('constant-acceleration'));
world.add(Physics.behavior('body-collision-detection'));
world.add(Physics.behavior('body-impulse-response'));
world.add(Physics.behavior('sweep-prune'));
world.add(Physics.behavior('verlet-constraints'));

var bounds = Physics.aabb(0, 0, 500, 400);

world.add(Physics.behavior('edge-collision-detection', {
    aabb: bounds,
    restitution: 0.01
}));

Physics.util.ticker.subscribe(function (time, dt) {
    world.step(time);
});

world.render();

Physics.util.ticker.start();

world.subscribe('step', function () {
    world.render();
});
});

I define a fixed circle for the nail and a non-fixed polygon for the shelf and add a distance constraint linking the polygon to the circle. As you can see, there are 2 problems. Firstly, the shelf immediately drops down slightly until its top edge is flush with the top of the nail, rather than remaining evenly positioned around the nail. Secondly, when the ball drops onto the shelf, the shelf goes crazy spinning round endlessly, despite having mass and various restitution settings tried. Adjusting its position slightly, sometimes it can even detach pletely and fly off.

Am I on the right track using constraints in this way, or is there a simpler solution?

• javascript
• constraints
• physicsjs

Share Improve this question Follow asked Nov 19, 2013 at 8:19 Tom W HallTom W Hall 5,28344 gold badges3131 silver badges3535 bronze badges 8

• The shelf is spinning wildly because it's colliding with the nail and PhysicsJS is trying to resolve the collision. – Snowball Commented Nov 19, 2013 at 8:37
• OK - but is this the correct overall approach? If so, what needs to be adjusted? If not, could you provide an example? – Tom W Hall Commented Nov 19, 2013 at 8:41
• 1 Here's a patch to conditionally disable collision response on bodies: gist.github./anonymous/86c0ba8b4f1f85b11f0e . It also takes care of the 'slightly off center' issue. – Snowball Commented Nov 19, 2013 at 9:05
• 1 Overall, the approach is fine. You just reached a deficiency in PhysicsJS--it's a relatively new library, after all. If you don't want to go through the trouble of patching PhysicsJS yourself, here's one with the patch from my last ment applied: gist.github./anonymous/5716ef7004dc4fa20173 – Snowball Commented Nov 19, 2013 at 9:09
• Thanks for that, bined with sokie's point about the mass, that's perfect - now I can get the shelf to either slowly swing round while the ball rolls off (using a low ball mass setting), or spin round wildly (with a high ball mass). I'll leave this question open for another day or so just in case there are other alternative approaches to consider. Thanks heaps! – Tom W Hall Commented Nov 19, 2013 at 9:35

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 7

As other users have mentioned, this is a current limitation of PhysicsJS. It's being worked out:

• scoping of collisions https://github./wellcaffeinated/PhysicsJS/issues/30
• constraints https://github./wellcaffeinated/PhysicsJS/issues/5

In the mean time, instead of patching the library, why not create a custom pin constraint behavior. For a simple pin constraint behavior that pins the body centroid to a target position, it's quite easy. Here's a jsFiddle of your example with a custom pin constraint manager defined at the beginning.

http://jsfiddle/wellcaffeinated/2HRGW/50/

// create a behavior to handle pin constraints
Physics.behavior('pin-constraints', function( parent ){
    return {
        init: function( opts ){
            parent.init.call( this, opts );
            this.pins = [];
        },

        add: function( body, targetPos ){
            this.pins.push({
                body: body,
                target: Physics.vector( targetPos )
            });
        },

        behave: function( data ){

            var pins = this.pins
                ,pin
                ;

            for (var i = 0, l = pins.length; i < l; i++){
                pin = pins[ i ];
                // move body to correct position
                pin.body.state.pos.clone( pin.target );
            }
        }
    };
});

Your overall implementation is correct. The only thing you got wrong is the mass of the convex-polygon, 100 is a wild value. A mass of around 0.2 should be enough for that object.