2016-05-01 19:30:09 -04:00
< img alt = "Matter.js" src = "http://brm.io/matter-js/img/matter-js.svg" width = "300" >
2014-02-19 09:15:05 -05:00
2014-12-03 19:05:49 -05:00
> *Matter.js* is a JavaScript 2D rigid body physics engine for the web
2014-02-19 09:15:05 -05:00
[brm.io/matter-js ](http://brm.io/matter-js )
2015-12-23 15:38:16 -05:00
[Demos ](#demos ) - [Gallery ](#gallery ) - [Features ](#features ) - [Install ](#install ) - [Usage ](#usage ) - [Examples ](#examples ) - [Docs ](#documentation ) - [References ](#references ) - [License ](#license )
2014-02-28 20:08:15 -05:00
2014-12-03 19:05:49 -05:00
[![Build Status ](https://travis-ci.org/liabru/matter-js.png?branch=master )](https://travis-ci.org/liabru/matter-js)
2014-02-19 09:15:05 -05:00
### Demos
2015-01-22 18:13:21 -05:00
< table >
< tr >
< td >
< ul >
2016-01-16 17:43:32 -05:00
< li > < a href = "http://brm.io/matter-js/demo#mixed" > Mixed Shapes< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#mixedSolid" > Solid Shapes< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#svg" > Concave SVG Paths< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#terrain" > Concave Terrain< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#concave" > Concave Bodies< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#compound" > Compound Bodies< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#newtonsCradle" > Newton's Cradle< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#wreckingBall" > Wrecking Ball< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#slingshot" > Slingshot Game< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#rounded" > Rounded Corners< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#views" > Views< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#timescale" > Time Scaling< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#manipulation" > Body Manipulation< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#compositeManipulation" > Composite Manipulation< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#raycasting" > Raycasting< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#sprites" > Sprites< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#pyramid" > Pyramid< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#car" > Car< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#catapult" > Catapult< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#gravity" > Reverse Gravity< / a > < / li >
2015-01-22 18:13:21 -05:00
< / ul >
< / td >
< td >
< ul >
2016-01-16 17:43:32 -05:00
< li > < a href = "http://brm.io/matter-js/demo#bridge" > Bridge< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#avalanche" > Avalanche< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#softBody" > Basic Soft Bodies< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#cloth" > Cloth< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#events" > Events< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#collisionFiltering" > Collision Filtering< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#chains" > Chains< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#ballPool" > Ball Pool< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#stack" > Stack< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#circleStack" > Circle Stack< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#compoundStack" > Compound Stack< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#restitution" > Restitution< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#friction" > Friction< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#airFriction" > Air Friction< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#staticFriction" > Static Friction< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#sleeping" > Sleeping< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#broadphase" > Grid Broadphase< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#beachBalls" > Beach Balls< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#stress" > Stress 1< / a > < / li >
< li > < a href = "http://brm.io/matter-js/demo#stress2" > Stress 2< / a > < / li >
2016-04-05 18:54:40 -04:00
< li > < a href = "http://brm.io/matter-js/demo#sensors" > Sensors< / a > < / li >
2015-01-22 18:13:21 -05:00
< / ul >
< br >
< / td >
< / tr >
< / table >
2014-02-19 09:15:05 -05:00
2015-12-23 15:38:16 -05:00
### Gallery
2015-12-23 18:19:39 -05:00
See how others are using matter.js physics
2015-12-23 15:38:16 -05:00
2016-05-03 15:44:30 -04:00
- [Obie Awards ](http://www.obieawards.com/2016-splash/ ) by Athletics
2016-04-04 19:16:54 -04:00
- [Leg Work Studio ](http://www.legworkstudio.com/home/recognition ) by Leg Work
2016-03-14 06:30:29 -04:00
- [Goblins and Grottos ](http://store.steampowered.com/app/389190 ) by Psychic Software
2015-12-23 15:38:16 -05:00
- [Les métamorphoses de Mr. Kalia ](http://www.lab212.org/projects/les-metamorphoses-de-mr-kalia ) by Lab212 for Google
- [Pablo The Flamingo ](http://pablotheflamingo.com/ ) by Nathan Gordon et al
2016-01-30 21:45:47 -05:00
- [#GIFMYLIVE ](http://bonhommeparis.com/en/projects/arte-gifmylive ) by Bonhomme for Arte
2015-12-23 15:38:16 -05:00
- [Adobe Analytics Live Stream ](http://adobefirehose.mediarain.com/ ) by Rain for Adobe
- [Blood Sweat & Tools Interactive ](http://bloodsweatandtools.discovery.ca/gamebench/ ) by Jam3 for Discovery
- [Hype ](http://tumult.com/hype/pro/ ) by Tumult
- [Trophy Smasher ](http://grindselect.com/trophy/game ) by Kyle Stetz for Grind Select
- [Pelada ](https://gabrielmfadt.wordpress.com/tag/matter-js/ ) by Gabriel Gianordoli
2015-12-23 17:03:41 -05:00
- [Labyrinth Game ](https://vine.co/v/OjYTwi1gdB1 ) by Jaume Sanchez Elias
2015-12-23 15:38:16 -05:00
- [Powermate and Physics ](https://vine.co/v/OjXaEzivvJe ) by Jaume Sanchez Elias
2016-05-11 18:48:38 -04:00
- [masQueLaCara ](https://www.instagram.com/p/BCFqCs6JNsq/ ) by Zach Lieberman for Art Blocks Houston
2015-12-23 15:38:16 -05:00
2014-02-19 09:15:05 -05:00
### Features
2015-12-23 10:42:20 -05:00
- Rigid bodies
- Compound bodies
- Composite bodies
- Concave and convex hulls
2014-04-01 08:48:42 -04:00
- Physical properties (mass, area, density etc.)
- Restitution (elastic and inelastic collisions)
2015-12-23 10:42:20 -05:00
- Collisions (broad-phase, mid-phase and narrow-phase)
- Stable stacking and resting
2014-04-01 08:48:42 -04:00
- Conservation of momentum
- Friction and resistance
2015-12-23 10:42:20 -05:00
- Events
2014-04-01 08:48:42 -04:00
- Constraints
- Gravity
- Sleeping and static bodies
2014-05-05 14:32:51 -04:00
- Rounded corners (chamfering)
- Views (translate, zoom)
- Collision queries (raycasting, region tests)
2014-04-01 08:48:42 -04:00
- Time scaling (slow-mo, speed-up)
- Canvas renderer (supports vectors and textures)
2014-05-05 14:32:51 -04:00
- [MatterTools ](https://github.com/liabru/matter-tools ) for creating, testing and debugging worlds
2014-04-01 08:48:42 -04:00
- World state serialisation (requires [resurrect.js ](https://github.com/skeeto/resurrect-js ))
- Cross-browser (Chrome, Firefox, Safari, IE8+)
- Mobile-compatible (touch, responsive)
2014-05-05 14:32:51 -04:00
- An original JavaScript physics implementation (not a port)
2014-02-19 09:15:05 -05:00
### Install
2015-01-22 18:13:21 -05:00
Download the [edge build (master) ](https://github.com/liabru/matter-js/blob/master/build/matter.js ) or get a [stable release ](https://github.com/liabru/matter-js/releases ) and include the script in your web page:
2014-02-19 09:15:05 -05:00
2015-01-22 18:13:21 -05:00
< script src = "matter.js" type = "text/javascript" > < / script >
2014-02-19 09:15:05 -05:00
2014-12-03 19:05:49 -05:00
You can also install using the package managers [Bower ](http://bower.io/search/?q=matter-js ) and [NPM ](https://www.npmjs.org/package/matter-js ).
2014-04-01 08:48:42 -04:00
2014-12-03 19:05:49 -05:00
bower install matter-js
npm install matter-js
2014-06-13 05:09:44 -04:00
2014-02-19 09:15:05 -05:00
### Usage
2015-12-23 15:38:16 -05:00
Visit the [Getting started ](https://github.com/liabru/matter-js/wiki/Getting-started ) wiki page for a minimal usage example.
Also see the [Rendering ](https://github.com/liabru/matter-js/wiki/Rendering ) wiki page, which also shows how to use your own game loop.
2014-02-19 09:15:05 -05:00
2015-12-23 15:38:16 -05:00
### Examples
2015-01-22 18:13:21 -05:00
2015-12-23 15:38:16 -05:00
See the [examples ](https://github.com/liabru/matter-js/tree/master/examples ) directory which contains the source for all [demos ](#demos ).
There are even more examples on [codepen ](http://codepen.io/collection/Fuagy/ ).
2014-04-01 20:01:08 -04:00
2014-02-28 20:08:15 -05:00
### Documentation
2016-01-16 17:43:32 -05:00
See the [API Documentation ](http://brm.io/matter-js/docs ) and the [wiki ](https://github.com/liabru/matter-js/wiki )
2014-02-28 20:08:15 -05:00
2014-05-10 10:52:59 -04:00
### Building and Contributing
2015-11-29 09:27:38 -05:00
To build you must first install [node.js ](http://nodejs.org/ ) and [gulp ](http://gulpjs.com/ ), then run
2014-05-10 10:52:59 -04:00
npm install
This will install the required build dependencies, then run
2015-11-29 09:27:38 -05:00
gulp dev
2014-05-10 10:52:59 -04:00
which is a task that builds the `matter-dev.js` file, spawns a `connect` and `watch` server, then opens `demo/dev.html` in your browser. Any changes you make to the source will automatically rebuild `matter-dev.js` and reload your browser for quick and easy testing.
2016-01-16 15:57:05 -05:00
Contributions are welcome, please ensure they follow the same style and architecture as the rest of the code. You should run `gulp test` to ensure `eslint` gives no errors. Please do not include any changes to the files in the `build` directory.
2014-05-10 10:52:59 -04:00
If you'd like to contribute but not sure what to work on, feel free to message me. Thanks!
2014-04-01 08:48:42 -04:00
### Changelog
2014-12-03 19:05:49 -05:00
To see what's new or changed in the latest version, see the [changelog ](https://github.com/liabru/matter-js/blob/master/CHANGELOG.md ).
2014-04-01 08:48:42 -04:00
2015-12-23 15:38:16 -05:00
### References
2014-02-19 09:15:05 -05:00
2015-12-23 10:42:20 -05:00
The engine uses the following techniques:
2014-02-19 09:15:05 -05:00
2014-04-01 08:48:42 -04:00
- Time-corrected position Verlet integrator
- Adaptive grid broad-phase detection
- AABB mid-phase detection
- SAT narrow-phase detection
- Iterative sequential impulse solver and position solver
2016-07-04 12:06:34 -04:00
- Resting collisions using resting constraints (Erin Catto, GDC08)
2014-04-01 08:48:42 -04:00
- Temporal coherence impulse caching and warming
2016-07-04 12:06:34 -04:00
- Collision pairs, contacts and impulses maintained by a pair manager
2014-04-01 08:48:42 -04:00
- Approximate Coulomb friction model using friction constraints
- Constraints solved with the Gauss-Siedel method
2016-07-04 12:06:34 -04:00
- Fixed or variable time step
- A basic sleeping strategy
2014-02-19 09:15:05 -05:00
2015-12-23 15:38:16 -05:00
For more information see my post on [Game physics for beginners ](http://brm.io/game-physics-for-beginners/ ).
2014-02-19 09:15:05 -05:00
### License
2015-12-23 10:42:20 -05:00
Matter.js is licensed under [The MIT License (MIT) ](http://opensource.org/licenses/MIT )
Copyright (c) 2014 Liam Brummitt
2014-02-19 09:15:05 -05:00
2015-12-23 10:42:20 -05:00
This license is also supplied with the release and source code.
As stated in the license, absolutely no warranty is provided.