Search code examples
matter.js

Unable to position fromVertices in Matter.js

I have a demo here:

https://codepen.io/EightArmsHQ/pen/ExOGgoE/898e7ae5b9ac6ebf7dcf2a7300c4a0cc

I am trying to position two triangles like so:

enter image description here

I used the following dimensions for the triangles:

const funnelHeight = 100;
const funnelWidth = (this.sizes.w - pipe) / 2;

The left therefore has a center point of

funnelWidth / 2, this.sizes.h - funnelHeight / 2

Here is where I get confused. So from this point, I draw the points of the triangle:

const leftFunnel = [
  {x: -funnelWidth / 2, y: - funnelHeight / 2},
  {x: funnelWidth / 2, y: funnelHeight / 2},
  {x: -funnelWidth / 2, y: funnelHeight / 2},
];

Then add it:

this.leftFunnel = Bodies.fromVertices(funnelWidth / 2, this.sizes.h - funnelHeight / 2, leftFunnel , { isStatic: true});

However it is being positioned at a distance away from the edges of the canvas:

enter image description here

What am I doing wrong?

Edit

I have made some progress. If I set the shape up as a rectangle, it works perfectly. So the issue is matter is setting up the centre of gravity, and I am incorrectly placing the object at that point, not the centre of the area it takes up.

Solution

  • It is right as you mentioned in your edited message - you should also take into consideration the center of mass, because from that point position of body gets calculated. By using the Vertices.centre method, you may find that point and use it as offset:

    const Vertices = Matter.Vertices;

//...

const center = Vertices.centre(leftFunnel)

this.leftFunnel = Bodies.fromVertices(
  funnelWidth / 2 + center.x,
  funnelWidth / 2 + center.y,
  leftFunnel,
  { isStatic: true }
);