Matter-js: question about the coordinate system of matter.js

[chenzhutian]

I am a little bit confuse about the coordinate system of matter.js.
It seems that the (0,0) in matter.js is not the top-left point of canvas.
So what's the original point in matter.js?

[chenzhutian]

It seems that the original point of each body is the mass center, rather than the top-left point. This is different from the default setting in HTML

[p3pp8]

So, what can we do to synch HTML objects with MatterJS rigid bodies?, i'm working on a demo that overrides the default render which renders to canvas to just move HTML elements such as DIVs, but i'm facing the same problem, i've just realized that rigid bodies are centered about their center of mass, but is there any way to update the reference point of rigid bodies or we just have to translate theme accordingly to their center of mass and synch theme to what we see as HTML elements?

Thanx

[liabru]

The point (0,0) is the top left. You're correct that the origin of each body is its center of mass, as this is the most natural for a physics engine. You'll need to find the 'top-left' offset yourself after body creation (e.g. Vector.sub(body.bounds.min, body.position)), then you'll need make sure to rotate it by the body.angle when you use it.

Another method would be to set body.position to be the same as body.bounds.min (not the object, just .x and .y) after creation. This would have the effect of moving the centre of mass, if that's what you're after.

See this similar discussion. As for DOM rendering, here's one example way to do it.

[p3pp8]

Thanx Liam, i gonna try it and let you know, i've already solved it translating the bodies after creation by Vector.sub(body.bounds.max,body.position) that should have same results as using min bounds. I wanna try it by translating center of mass as you suggest. Of course for physics engines working with center of mass is the right choice, i understand.

Thanx so much for your answer!

[p3pp8]

Ok, so i've tested my code moving the center of mass for bodies as you suggested but something strange happens, i've updated position and positionPrev properties, not the objects but only .x .y with bounds.min.x and y but bodies seems to have a big mass they accelerate down passing through static objects. Very strange...

Thanx!

PS: I'm using latest MatterJS release that is 0.9.1

[liabru]

So you did something like:

body.position.x = body.bounds.min.x;
body.position.y = body.bounds.min.y;
body.positionPrev.x = body.bounds.min.x;
body.positionPrev.y = body.bounds.min.y;

And it doesn't work?

[p3pp8]

Nope, it's exactly what i've done and sadly all bodies fall down as if they have a big mass or there was a huge gravity, they also pass through static bodies... Anyway i'll give it another try, in case i've made something wrong, but the code is really simple...
Currently i've solved by translating bodies by body.bounds.max-body.position using Body.translate after body creation and all seems to work as it should be.

Thanx!

[liabru]

Hopefully my last post helped you resolve your issue, so closing this. Feel free to reply if you need more help.