Creating bodies from vertices

[danielgoodwin97]

Example

https://codesandbox.io/s/wizardly-shtern-k18neb?file=/src/index.js

I recommend opening the preview in a separate window as the example is not responsive.

General

I'm currently having some issues with creating bodies from vertices.

I am trying to create polygons that represent letters but I am having issues with both creating them using Bodies.fromVertices and Body.create({ vertices: object }) and then combining these bodies into one body using Body.create({ parts: array }).

• matter-js @ 0.18.0
• poly-decomp @ 0.3.0

Bodies.fromVertices

The issue I am having with this method is that when creating letters which have multiple polygons it is creating the other polygons of centre.

For example - if I am creating an e which has the main curved polygon and the polygon to represent the hole in the middle. It creates them both and they are "grouped" together, however, they are off-centre from one another which results in the screenshot below.

Body.create

The issue that I am having with this method is that the bodies created like this are not able to be interacted with the mouse if they only have one polygon to them.

For example - if I am creating an e again, it will line up as expected when I combine the body parts (because I am using a work-around you can find in the sandbox link provided) but the main (first) polygon is unable to be clicked on and interacted with the mouse. However, the polygons on the inside of the main shape are able to be clicked on (so the hole in the "e" is able to be interacted with).

This however breaks when a letter with only a single polygon is created and therefore cannot be interacted with at all.

Combining the two

I thought that maybe if those weren't working, I could combine both the methods to perhaps get this to work.

However, when I use the same method I am using with Body.create but instead using Bodies.fromVertices I am getting a result that isn't using concave vertices.

This is supposed to be an e.

Conclusion

I am sure I'm doing something wrong here or that there is a much better way to be doing this - but I couldn't help shake the feeling that this felt like buggy behaviour.

I've had a look at some of the other issues on this repository but I was unable to find anything relating to the Body.create({ vertices: object }) method presenting this sort of behaviour.

[liabru]

I think poly-decomp might only support "simple" (non-self intersecting) polygons without holes - could that be part of the issue?

If you need something like that you may need to switch to some other approach like triangulation with a different library.

Worth looking at and copying the source from Bodies.fromVertices as it's mostly just a utility that sets up using the core body.parts functionality.