Matter-js: Force drag of specific body

[alexgarces]

Hello,
first of all, thanks for this awesome library! The best one since box2D, in my opinion.

I would like to have a body being always dragged by the mouse, but I didn't find the way of doing it. I unsuccessfully tried to do a custom MouseConstraint, but it didn't work.

Thanks.

[liabru]

Make a copy of Matter.MouseConstraint then change these lines to something like:

 constraint.pointA = mouse.position;
 constraint.bodyB = mouseConstraint.body = body;
 constraint.pointB = { x: mouse.position.x - body.position.x, y: mouse.position.y - body.position.y };
 constraint.angleB = body.angle;

Where body is the Matter.Body you want to keep attached to the mouse.

[Shadowstep33]

Where do we actually apply the copied MouseConstraint instance?

Your demos do a great job of showing what Matter.js can do, but I find them very difficult to parse as there seems to be a decent bit of background knowledge of Matter.js needed. A lot of the workings seem to just be implied (for example, in https://github.com/liabru/matter-js/blob/master/examples/manipulation.js what is the demo parameter that gets passed in to Example.manipulation? What is Example?)

This was the missing component I needed for it to make sense: https://github.com/liabru/matter-js/blob/master/demo/js/Demo.js

[liabru]

@Shadowstep33 sorry for this! The demo runner is pretty complicated, it's hard to separate out a lot of the pieces without a lot of repetition. But I suppose repetition is actually a good thing when it comes to examples. I'll think about what I can do to make them clearer.

[Shadowstep33]

no worries! It mostly was just that I didn't look through Demo.js prior. I think if you were to add some in-line comments that possibly referenced other code that is being utilized that would be a huge help

[liabru]

Closing since the examples were recently updated to be fully self-contained.

[meeps123]

@alexgarces

I also needed to make the mouse "force drag" a Rectangle body. I replaced lines 98-130 like @liabru said, but made a few tweaks:

MouseConstraint.update = function(mouseConstraint, bodies) {
    var mouse = mouseConstraint.mouse,
            constraint = mouseConstraint.constraint,
            body = Composite.allBodies(engine.world)[0]; // this is where I find my target Body

        constraint.pointA =  mouse.position;
        constraint.bodyB = mouseConstraint.body = body;
        // removing declaration of constraint.pointB worked
        constraint.angleB = body.angle;
}

@Shadowstep33 as for where to implement this custom instance, I just overrided MouseConstraint.update() in the same file as the original MouseConstraint I used:

var MouseConstraint = Matter.MouseConstraint;

var mouseConstraint = MouseConstraint.create(engine, {
    element: c,
    constraint: {
        render: {
            visible: true
        },
        stiffness: 0.0001
    }
});

MouseConstraint.update = function(mouseConstraint, bodies) {
    var mouse = mouseConstraint.mouse,
            constraint = mouseConstraint.constraint,
            body = Composite.allBodies(engine.world)[0];

        constraint.pointA =  mouse.position;
        constraint.bodyB = mouseConstraint.body = body;
        constraint.angleB = body.angle;
}

However, I noticed that the MouseConstraint always pulls my Body towards (0,0) if I reload the page without moving the mouse, i.e. not triggering mousemove. If I move the mouse and reload the page, it works fine. I've tried to programmatically trigger mousemove with Events.trigger() after running both the engine and the renderer, but with no luck:

Events.trigger(mouseConstraint, "mousemove", {mouse: mouseConstraint.mouse, body: Composite.allBodies(engine.world)[0]});

Does anyone know why this happens? Thanks.

[liabru]

Hmm could be a bug of some kind, do you have a jsfiddle @meeps123 ?

[meeps123]

I put my code here in https://jsfiddle.net/L5zhauzt/5/.

To see the bug, run the fiddle and make sure the cursor is not hovering over the result panel.
The MouseConstraint pulls the circular body to the top left of the screen.

My code starts at line 9277.

[liabru]

I think you need to instead attach the body to the mouse constraint only after a mouse over event has happened and also detach the body on the mouse out event?

[meeps123]

I fixed it. Thanks a lot!

[KumarAbhirup]

Hey, @meeps123, please let us all know how did you fix it?