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

 by   liabru JavaScript Version: 0.19.0 License: MIT

kandi X-RAY | matter-js Summary

kandi X-RAY | matter-js Summary

matter-js is a JavaScript library typically used in Institutions, Learning, Education, Gaming, Game Engine, WebGL applications. matter-js has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i tooqingmatter-js' or download it from GitHub, npm.

Matter.js is a JavaScript 2D rigid body physics engine for the web. Demos ・ Gallery ・ Features ・ Plugins ・ Install ・ Usage ・ Examples ・ Docs ・ Wiki ・ References ・ License.

            kandi-support Support

              matter-js has a medium active ecosystem.
              It has 14712 star(s) with 1964 fork(s). There are 240 watchers for this library.
              There were 1 major release(s) in the last 12 months.
              There are 159 open issues and 920 have been closed. On average issues are closed in 742 days. There are 52 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of matter-js is 0.19.0

            kandi-Quality Quality

              matter-js has 0 bugs and 0 code smells.

            kandi-Security Security

              matter-js has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              matter-js code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              matter-js is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              matter-js releases are not available. You will need to build from source code and install.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.
              matter-js saves you 35 person hours of effort in developing the same functionality from scratch.
              It has 54 lines of code, 0 functions and 89 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed matter-js and discovered the below as its top functions. This is intended to give you an instant insight into matter-js implemented functionality, and help decide if they suit your requirements.
            • Obtain a module .
            • Define this object
            • close one
            • handles
            • inject 1
            • inner function
            • inbound set
            • perform a n
            • recursive function
            • Compute the q .
            Get all kandi verified functions for this library.

            matter-js Key Features

            No Key Features are available at this moment for matter-js.

            matter-js Examples and Code Snippets

            No Code Snippets are available at this moment for matter-js.

            Community Discussions


            React won't draw anything in the canvas in useEffect
            Asked 2022-Mar-24 at 00:36

            I building a react website with matter.js. I am using the useEffect hook to render stuff to the canvas with matter.js (I found most of this code here). However, when I try to draw anything else to the canvas, nothing appears. Everything matter.js-related works.



            Answered 2022-Mar-24 at 00:36

            Currently, you're drawing one time, up front, on the same canvas that MJS wipes per frame. So, you draw your circle, then MJS wipes the canvas immediately when it renders its first frame. You never attempt to draw again as the engine and renderer run onward.

            I see a few solutions (at least!). Which is most appropriate depends on your specific use case.

            1. Draw on the canvas on each frame inside the afterRender callback for the render object. This is the simplest and most direct solution from where you are now and I provide an example below.
            2. Add a second transparent canvas on top of the one you're providing to MJS. This is done with absolute positioning. Now you can do whatever you want in this overlay without interference from MJS.
            3. Run MJS headlessly, which gives you maximum control, as the MJS built-in renderer is mostly intended for protoyping (it's a physics engine, not a graphics engine). Once you're headless, you can render whatever you want, whenever you want, however you want. I have many demos of headless rendering in my other answers, both to the plain DOM and with React and p5.js.

            As an aside, this doesn't appear related to React or useEffect in any way; the same problem would arise even if you were injecting a plain canvas in vanilla JS.

            Also, keep in mind that whatever you draw is totally unrelated to MJS other than the fact that it happens to be on the same canvas. Don't expect physics to work on it, unless you're using coordinates from a body MJS knows about.

            Although you haven't provided a full component, here's a minimal proof-of-concept of the afterRender approach mentioned above:



            Matter.Query.region not returning any collisions even though the bound is clearly intersecting other bodies
            Asked 2022-Mar-24 at 00:20

            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.




            Answered 2022-Mar-24 at 00:20

            The bounds object doesn't appear to be properly created. The purple p5 vertices you're rendering may be giving you a false sense of confidence, since those aren't necessarily related to what MJS sees.

            It's actually a pretty simple fix, passing an array of vertices instead of individual arguments:



            Is there a way to draw a matter.js composite with p5?
            Asked 2021-Sep-22 at 02:38

            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



            Answered 2021-Sep-22 at 02:38

            I think the main issue with your code was that you weren't adding the Composite to the world. Here's a working example with a few other tweaks:



            How to apply physics to complex shapes? (matter.js + p5.js)
            Asked 2021-Aug-04 at 19:43

            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!




            Answered 2021-Aug-04 at 19:43

            The root issue here is that matter.js positions objects based on their center of mass rather than the origin of the coordinate system that your vertices are in, and it is clear that the origin of the coordinate system for you blob vertices is not its center of mass since all of your vertices are positive. You can calculate the center of mass for your blob and then use that offset before drawing:



            How to draw a semicircle with matter.js?
            Asked 2021-Jul-03 at 00:27

            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.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!



            Answered 2021-Jul-03 at 00:21


            How to connect matterjs to html?
            Asked 2021-Jul-01 at 15:34

            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 👇



            Answered 2021-Jul-01 at 06:56

            You can use CDN in HTML follow this web site

            or you can add this



            Why do MatterJS physics coordinates have offset with DOM elements?
            Asked 2021-May-20 at 15:04

            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



            Answered 2021-May-20 at 15:04

            The problem is that when you set your x,y positions for the box, you didn't take into account the heights. So the displayed positions didn't match the actual positions.

            The only line I've really changed is = `translate(${pos.x}px, ${pos.y}px) rotate(${degrees}deg)`;.

            The 10-pixel discrepancy was caused because the 60px-deep base was being displayed 30px (half the depth) too low, while the 40px-deep boxes were being displayed 20px too low - net 10px above the base. It all looked OK when I tried setting the heights to 1px, which was how I discovered the bug.



            I cant use matter js on codepen
            Asked 2021-Apr-30 at 21:54
            CodePen matter js error

            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:



            Answered 2021-Jan-26 at 22:02

            Don't import it in your JS section, just go to the settings and add it as external script.



            Minimal Matter.js example : is not a function
            Asked 2021-Apr-14 at 10:18

            I literally copied the code from the getting started section of the Matter.js library but an Uncaught TypeError occurs: " 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.



            Answered 2021-Apr-14 at 10:18

            You are using wrong version of matter-js library, try with latest version. I just tried with 0.15.0, it's working fine.

            matter-js >= 0.10.0 has the support Please make sure the version which you are using for supported features.



            Loading Vue component based on (changeable) variable
            Asked 2021-Mar-14 at 18:05

            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 being defined in data as data() {return {goTo: {page: "p1"}}}. The problem seems to be the reactivness of 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".



            Answered 2021-Mar-14 at 18:05

            this is not available in . Everything "inside" this, is available.

            In addition to the above and per your update,


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install matter-js

            You can install using package managers npm and Yarn using:.


            See the API Documentation and the wiki.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i matter-js

          • CLONE
          • HTTPS


          • CLI

            gh repo clone liabru/matter-js

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link