[Solved] Updating Object Vertices about matter-js HOT 6 CLOSED

I think the issue is that you need to pass your new rect.vertices through the Matter.Vertices.create method afterwards see the docs.

This is because each vertex object, as well as x and y, needs some additional references which are added by Matter.Vertices.create.

So try something like

rect.vertices = [
                {x: startPos.x, y: startPos.y},
                {x: endPos.x, y: startPos.y},
                {x: endPos.x, y: endPos.y},
                {x: startPos.x, y: endPos.y},
        ];
Matter.Vertices.create(rect.vertices, rect);

EDIT: seems I forgot to add a return to Matter.Vertices.create, so for now it actually just works in-place on the array, I'll add a return value soon

Also, I just realised there are a lot more things you need to do since you're doing this after creation.
The best way is to copy the code for the method Matter.Body.scale.

This isn't very clean so I'll look at creating a new method for setting body vertices

from matter-js.

Thank you very much! I was wondering what all the vertices methods were for. I will continue testing and see if I can get something half-decent.

EDIT:
Fiddle
By adding the Matter.Vertices.create method and using the code from scale, the exception is fixed, but the body has many oddities. I assume this has something to do with the fact that the body's position is not at the center? (I'm not even sure where it is)

...
...
rect.vertices = [
    {x: startPos.x, y: startPos.y},
    {x: (endPos.x), y: startPos.y},
    {x: (endPos.x), y: (endPos.y)},
    {x: startPos.x, y: (endPos.y)},
];
...
...
BodyUpdate(rect);
Engine.render(engine);  

function BodyUpdate(body){
        Vertices.create(body.vertices, body);
// update properties
        body.axes = Axes.fromVertices(body.vertices);
        body.area = Vertices.area(body.vertices);
        body.mass = body.density * body.area;
        body.inverseMass = 1 / body.mass;

        // update inertia (requires vertices to be at origin)
        Vertices.translate(body.vertices, { x: -body.position.x, y: -body.position.y });
        body.inertia = Vertices.inertia(body.vertices, body.mass);
        body.inverseInertia = 1 / body.inertia;
        Vertices.translate(body.vertices, { x: body.position.x, y: body.position.y });

        // update bounds
        Bounds.update(body.bounds, body.vertices, body.velocity);
}
...
...

from matter-js.

If you enable the render option showPositions you can see the body position is wrong (its still at (0,0)).

I think if you use Matter.Vertices.centre to find the centroid of the new vertices, then set the body.position.x and body.position.y values equal to the centroid (and the same for body.positionPrev vector too) it may be part of the solution. Make sure you copy the values for x and y so you don't break any references to body.position!

from matter-js.

That seems to've done the trick! Except adding objects during the simulation can be a bit strange with the inertia, but I don't plan on adding objects during the simulation anyhow.

http://jsfiddle.net/FNYB9/6/

I'm testing Box2Dweb with my project, but it's not going that well, so I'll probably still stick with this.

Thank you very much!

from matter-js.

Great!

Except adding objects during the simulation can be a bit strange with the inertia, but I don't plan on adding objects during the simulation anyhow.

I think that's actually because of the MouseConstraint - you may want to temporarily remove it from the world on the mousedown event and adding it back on the mouseup.

This thread has brought up some good ideas I'll implement make this sort of thing easier. I also think I'll add some enabled flags so you can easier disable things but for now you'll need to do the above.

Cheers

from matter-js.

Thank you very much! This is still easier than Box2D's method >_>

from matter-js.