2016-05-02 00:30:09 +01:00
< img alt = "Matter.js" src = "http://brm.io/matter-js/img/matter-js.svg" width = "300" >
2014-02-19 14:15:05 +00:00
2014-12-04 00:05:49 +00:00
> *Matter.js* is a JavaScript 2D rigid body physics engine for the web
2014-02-19 14:15:05 +00:00
[brm.io/matter-js ](http://brm.io/matter-js )
2015-12-23 20:38:16 +00:00
[Demos ](#demos ) - [Gallery ](#gallery ) - [Features ](#features ) - [Install ](#install ) - [Usage ](#usage ) - [Examples ](#examples ) - [Docs ](#documentation ) - [References ](#references ) - [License ](#license )
2014-03-01 01:08:15 +00:00
2014-12-04 00:05:49 +00:00
[![Build Status ](https://travis-ci.org/liabru/matter-js.png?branch=master )](https://travis-ci.org/liabru/matter-js)
2014-02-19 14:15:05 +00:00
### Demos
2015-01-22 23:13:21 +00:00
< table >
< tr >
< td >
< ul >
2016-01-16 22:43:32 +00: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 23:13:21 +00:00
< / ul >
< / td >
< td >
< ul >
2016-01-16 22:43:32 +00: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 23:54:40 +01:00
< li >< a href = "http://brm.io/matter-js/demo #sensors " > Sensors</ a ></ li >
2015-01-22 23:13:21 +00:00
< / ul >
< br >
< / td >
< / tr >
< / table >
2014-02-19 14:15:05 +00:00
2015-12-23 20:38:16 +00:00
### Gallery
2015-12-23 23:19:39 +00:00
See how others are using matter.js physics
2015-12-23 20:38:16 +00:00
2016-05-03 20:44:30 +01:00
- [Obie Awards ](http://www.obieawards.com/2016-splash/ ) by Athletics
2016-04-05 00:16:54 +01:00
- [Leg Work Studio ](http://www.legworkstudio.com/home/recognition ) by Leg Work
2016-03-14 10:30:29 +00:00
- [Goblins and Grottos ](http://store.steampowered.com/app/389190 ) by Psychic Software
2015-12-23 20:38:16 +00: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-31 03:45:47 +01:00
- [#GIFMYLIVE ](http://bonhommeparis.com/en/projects/arte-gifmylive ) by Bonhomme for Arte
2015-12-23 20:38:16 +00: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 22:03:41 +00:00
- [Labyrinth Game ](https://vine.co/v/OjYTwi1gdB1 ) by Jaume Sanchez Elias
2015-12-23 20:38:16 +00:00
- [Powermate and Physics ](https://vine.co/v/OjXaEzivvJe ) by Jaume Sanchez Elias
2016-05-11 23:48:38 +01:00
- [masQueLaCara ](https://www.instagram.com/p/BCFqCs6JNsq/ ) by Zach Lieberman for Art Blocks Houston
2015-12-23 20:38:16 +00:00
2014-02-19 14:15:05 +00:00
### Features
2015-12-23 15:42:20 +00:00
- Rigid bodies
- Compound bodies
- Composite bodies
- Concave and convex hulls
2014-04-01 13:48:42 +01:00
- Physical properties (mass, area, density etc.)
- Restitution (elastic and inelastic collisions)
2015-12-23 15:42:20 +00:00
- Collisions (broad-phase, mid-phase and narrow-phase)
- Stable stacking and resting
2014-04-01 13:48:42 +01:00
- Conservation of momentum
- Friction and resistance
2015-12-23 15:42:20 +00:00
- Events
2014-04-01 13:48:42 +01:00
- Constraints
- Gravity
- Sleeping and static bodies
2014-05-05 19:32:51 +01:00
- Rounded corners (chamfering)
- Views (translate, zoom)
- Collision queries (raycasting, region tests)
2014-04-01 13:48:42 +01:00
- Time scaling (slow-mo, speed-up)
- Canvas renderer (supports vectors and textures)
2014-05-05 19:32:51 +01:00
- [MatterTools ](https://github.com/liabru/matter-tools ) for creating, testing and debugging worlds
2014-04-01 13:48:42 +01: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 19:32:51 +01:00
- An original JavaScript physics implementation (not a port)
2014-02-19 14:15:05 +00:00
### Install
2015-01-22 23:13:21 +00: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 14:15:05 +00:00
2015-01-22 23:13:21 +00:00
< script src = "matter.js" type = "text/javascript" > < / script >
2014-02-19 14:15:05 +00:00
2014-12-04 00:05:49 +00: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 13:48:42 +01:00
2014-12-04 00:05:49 +00:00
bower install matter-js
npm install matter-js
2014-06-13 10:09:44 +01:00
2014-02-19 14:15:05 +00:00
### Usage
2015-12-23 20:38:16 +00: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 14:15:05 +00:00
2015-12-23 20:38:16 +00:00
### Examples
2015-01-22 23:13:21 +00:00
2015-12-23 20:38:16 +00: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-02 01:01:08 +01:00
2014-03-01 01:08:15 +00:00
### Documentation
2016-01-16 22:43:32 +00:00
See the [API Documentation ](http://brm.io/matter-js/docs ) and the [wiki ](https://github.com/liabru/matter-js/wiki )
2014-03-01 01:08:15 +00:00
2014-05-10 15:52:59 +01:00
### Building and Contributing
2015-11-29 14:27:38 +00:00
To build you must first install [node.js ](http://nodejs.org/ ) and [gulp ](http://gulpjs.com/ ), then run
2014-05-10 15:52:59 +01:00
npm install
This will install the required build dependencies, then run
2015-11-29 14:27:38 +00:00
gulp dev
2014-05-10 15:52:59 +01: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 20:57:05 +00: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 15:52:59 +01:00
If you'd like to contribute but not sure what to work on, feel free to message me. Thanks!
2014-04-01 13:48:42 +01:00
### Changelog
2014-12-04 00:05:49 +00: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 13:48:42 +01:00
2015-12-23 20:38:16 +00:00
### References
2014-02-19 14:15:05 +00:00
2015-12-23 15:42:20 +00:00
The engine uses the following techniques:
2014-02-19 14:15:05 +00:00
2014-04-01 13:48:42 +01: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 17:06:34 +01:00
- Resting collisions using resting constraints (Erin Catto, GDC08)
2014-04-01 13:48:42 +01:00
- Temporal coherence impulse caching and warming
2016-07-04 17:06:34 +01:00
- Collision pairs, contacts and impulses maintained by a pair manager
2014-04-01 13:48:42 +01:00
- Approximate Coulomb friction model using friction constraints
- Constraints solved with the Gauss-Siedel method
2016-07-04 17:06:34 +01:00
- Fixed or variable time step
- A basic sleeping strategy
2014-02-19 14:15:05 +00:00
2015-12-23 20:38:16 +00:00
For more information see my post on [Game physics for beginners ](http://brm.io/game-physics-for-beginners/ ).
2014-02-19 14:15:05 +00:00
### License
2015-12-23 15:42:20 +00:00
Matter.js is licensed under [The MIT License (MIT) ](http://opensource.org/licenses/MIT )
Copyright (c) 2014 Liam Brummitt
2014-02-19 14:15:05 +00:00
2015-12-23 15:42:20 +00:00
This license is also supplied with the release and source code.
As stated in the license, absolutely no warranty is provided.