matter-js | a 2D rigid body physics engine for the web ▲● ■ | Game Engine library

I'm trying to use Matter.Query.region to see if the character in my game is grounded. But, when I try to run region with a bounds object that I created (displayed with the dots shown in the game), it doesn't come up with any collisions even though it is clearly intersecting other bodies.

Code:

I recently saw the matter.js on the coding train channel from 2017, I've managed to replicate the examples shown on those videos but now I wanted to do something more advanced. There is a Composite module called stack in the documentation used to create a soft body in the matter.js demos but I wonder if there is a way to draw this using p5 instead.

This is what I've gotten so far, any help is appreciated

I've been trying to make a ball pit sim using matter.js + p5.js to use as an interactive website background.

With some help from Mr Shiffman's video I've managed to get it working well with circle shapes, but I want to take it to the next level and use custom blob shapes (taken from the client's logo) and apply the same physics to them.

I've been able to get the custom shapes to render using a combination of p5's Beginshape() and matter's bodies.fromVertices. It sort of works as you can see but the physics is very weird, and the collisions don't seem to match even though I used the same vertices for both.

I think it may be to do with this quote from the p5 docs

Transformations such as translate(), rotate(), and scale() do not work within beginShape().

but I don't know what I can do to get around this as I need them to be able to translate / rotate for the physics to work...

Any ideas? help much appreciated!

I am playing with the matterjs library, it's awesome!

I am trying to figure out how I can draw a semicircle like these:

I tried with Bodies.circle, Bodies.rectangle and Bodies.polygon but with no luck.

It seems like a pretty simple shape but I don't know if it is possible to draw a semicirle with the library.

Any recommendation would be great!

I have recently downloaded matterjs using npm using the command npm install matter-js.

I use vscode for my html project. I have a folder called Node. And another folder ( which is automatically generated ) called node-modules.

The folder node-modules is not inside Node folder.

The matter-js module is present inside node-modules.

Now inside my Node folder I created a file called index.html and added this line 👇

I'm running a MatterJS physics simulation by adding boxes to the physics engine, and at the same time creating a DOM element with the same dimensions.

Then, I'm looping through the physics boxes to get their coordinates. I then use those coordinates to position the corresponding DOM element. This seems to work correctly, except that my static "ground" box seems to have a 10 pixel invisible radius around it?

My boxes are 40x40 pixels. The ground is at 400 pixels. The boxes stop falling at 350 pixels. So why the 10 pixels discrepancy?

Here is an example of the issue in CodePen

EDIT: if I render the same boxes in a canvas, the discrepancy isn't there. Codepen Canvas

Hello, I am trying to use Matter JS on codepen, I firstly received the error that the variable Matter was not defined, I already fixed this but another error came.

Code Preview:

I literally copied the code from the getting started section of the Matter.js library but an Uncaught TypeError occurs: "Engine.run is not a function". I searched everywhere on the web but nothing helps. As a precaution, I added an event listener to run the code once everything is loaded.

total newbie with Vue.js here, so sorry if I'm missing something obvious.

I want to load components based on the content of a variable - so if the content of my variable changes, I want the component to change accordingly. I have all components imported (e.g. import Project1 from "@/components/Project1";), which again is saved in components: {'p1': Project1}

I use with goTo.page being defined in data as data() {return {goTo: {page: "p1"}}}. The problem seems to be the reactivness of goTo.page. I update it via this.$set(this.goTo, "page", "p2");. When running, i get the error Uncaught TypeError: Cannot read property 'page' of undefined, which I honestly don't understand, since its initialized with "p1".