Matter-js: Bodies going through each other. (fromVertices?)

[LimeWub]

Hello and thanks for this great library :)

I am working on a mini-project which combines PIXI with matter, and it's going pretty well; However, some of the bodies created fromVertices never collide with each other. They always pass through others (even bodies of the same type).
It's definitely not a PIXI problem, as the same happens both with Matter Rendering and PIXI.

I cannot for the life of me understand what is going on, I've tried toggling a bunch of properties to no avail.
Meanwhile collisions work just fine for the rectangle object. It's just some of the SVG made shapes that seem unhappy.

Could someone with more experience using the engine have a look at this please?
Not sure if it's a bug or if I'm just being silly.

Replication

Link: https://codepen.io/LimeWub/pen/NELyLB
Steps:

• Click around on the top canvas (Pixi.js)
• Notice the elements are getting created in both the Pixi and the debug Matter Render canvas (bottom)
• Appart from the squiggly line vector, all other elements pass through each other

Note: The bottom/debug canvas has mouse interactions so you can drag the objects around.
Note2: To toggle the rectangle object creation instead of the shape, uncomment line 61 (and comment line 54)

Appreciate any pointers I can get :) Thank you ^^

[marwan38]

I'm facing an issue with fromVertices, not the same, but I assume it is somewhat related.
If for example a ground is draw out by using fromVertices, and friction is set to max(1), friction does not apply to the lines draw from vertice to vertice but only the vertices themselves.

[liabru]

It's just some of the SVG made shapes that seem unhappy.

I've noticed this too and I've not been able to track down the cause, it could be something in in Svg.pathToVertices or in fromVertices, it's a pretty complex process so it's a tricky one. At some point I'd like to deprecate Matter.SVG in favour of a plugin that uses some specialist SVG libraries, because it was originally only really intended to be a proof of concept.

[tizzle]

I was running into the exact same issue and i found that if you have an array of vertices you work from, make sure you don't have two points in the array with the exact same coordinates. I was using some algorithm to offset a path and that duplicated the start point at the end of the array. I simply spliced the last item of the array away and voila!

Hope this might help you!

[liabru]

Thanks for the info, it's definitely possible that sometimes this kind of thing happens with fromVertices, I guess it would need testing and possibly some sort of 'cleanup' type function.

[LimeWub]

Just popping in to confirm what @tizzle said fixes this problem :)

Ended up chaining a deduplication function like so when I was using pathToVertices and it just worked.
My code including the cleanup looks like this:

const vertices = Matter.Svg.pathToVertices(pathElement, 1).filter(
  (v, index, self) =>
    index === self.findIndex((s) => ~~s.x === ~~v.x && ~~s.y === ~~v.y)
);

where ~~ is just a faster way to do 'Math.floor' (Which btw is not needed - I just prefer less vertices).

Mad props to @tizzle and the deduplication hack from StackOverflow as well as @liabru for this lib ^^

We can probably close this issue now, unless you want to keep open as a reminder to potentially add a cleanup in pathToVertices itself (?)