javascript2dphysicsmatter.js

Notch doesn't get displayed in concave shape in matter.js

I need to make this shape in matter.js:

enter image description here

This is what I tried (I took the points from Figma and inserted them into matter.js):

const logoBottom = Matter.Bodies.fromVertices(
    150,
    150,
    [
        [
            Matter.Vector.create(13.06, 22.53),
            Matter.Vector.create(66.94, 22.53),
            Matter.Vector.create(58.24, 37.54),
            Matter.Vector.create(39.03, 37.54),
            Matter.Vector.create(48.64, 54.1),
            Matter.Vector.create(40, 69),
        ],
    ],
    { isStatic: true }
);

However, the notch on the side doesn't get displayed and I don't know why.

Solution

  • Based on the comments, it sounds like you missed that poly-decomp needs to be added.

    With poly-decomp:

    const engine = Matter.Engine.create();
const runner = Matter.Runner.create();
const render = Matter.Render.create({element: document.body, engine});
const logoBottom = Matter.Bodies.fromVertices(
  150,
  150,
  [
    [
      Matter.Vector.create(13.06, 22.53),
      Matter.Vector.create(66.94, 22.53),
      Matter.Vector.create(58.24, 37.54),
      Matter.Vector.create(39.03, 37.54),
      Matter.Vector.create(48.64, 54.1),
      Matter.Vector.create(40, 69),
    ],
  ],
  {isStatic: true},
);
Matter.Composite.add(engine.world, logoBottom);
Matter.Render.run(render);
    <script src="https://cdn.jsdelivr.net/npm/poly-decomp@0.2.1/build/decomp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.min.js"></script>

    Without poly-decomp:

    const engine = Matter.Engine.create();
const runner = Matter.Runner.create();
const render = Matter.Render.create({element: document.body, engine});
const logoBottom = Matter.Bodies.fromVertices(
  150,
  150,
  [
    [
      Matter.Vector.create(13.06, 22.53),
      Matter.Vector.create(66.94, 22.53),
      Matter.Vector.create(58.24, 37.54),
      Matter.Vector.create(39.03, 37.54),
      Matter.Vector.create(48.64, 54.1),
      Matter.Vector.create(40, 69),
    ],
  ],
  {isStatic: true},
);
Matter.Composite.add(engine.world, logoBottom);
Matter.Render.run(render);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.min.js"></script>

    I'm not sure what version of MJS you're using, but this gives me the following warning:

    matter-js: Bodies.fromVertices: Install the 'poly-decomp' library and use Common.setDecomp or provide 'decomp' as a global to decompose concave vertices.

    Related GH issues: #449, #15, #487.