Seamlessly integrate matter.js with p5.js
The aim of this library is to make it simple to use matter.js, a JavaScript based physics engine, in your p5.js sketches. matter.js has a lot of options. This means that it is highly customizable, but also sometimes overwhelming. p5-matter hides some of this complexity (without reducing the overall power) so that you can quickly start adding realistic physics interactions to your creations. We automatically deal with the messy stuff, like configuring and maintaining the environment, so that you can focus on the important stuff, like making an awesome game.
p5-matter makes the interplay between p5.js and matter.js more natural. The API will feel more intuitive for someone with a p5.js background. Default rendering of physical objects is provided in p5.js. We resolve the places where p5.js and matter.js clash, such as the positioning system for rectangles for you. p5-matter also supports features that do not exist in matter.js; “signs” are text that respond to collisions and other physics phenomena.
Use our starter template to get p5-matter up and running as quickly as possible. The template includes all the dependencies, p5.js, matter.js, and p5-matter, and comes with a small demo program. You can run it by unzipping the download and opening the index.html file in any browser. To start creating, just modify the sketch.js file.
Download the Starter Template!
Everything you can do as a user of p5-matter exists in the global matter object. This object has a handful of methods for creating physics-aware objects and manipulating the environment. See the documentation for details.
Draw Barriers - Click and drag to draw a barrier to stop falling balls.
See it live! — View source code.
Lattice - Drag around a lattice of interconnected balls.
See it live! — View source code.
Mouse Orbit - You are the Earth! Move your mouse around to make the Moon orbit around you.
See it live! — View source code.
Physics Sign - Physics-aware text! Balls will bounce off the text. Click the mouse to make the sign fall.
See it live! — View source code.
Freeze Click - Click on the falling balls to freeze them in place (click again to unfreeze the ball).
See it live! — View source code.
Pendulum - Interactive pendulum simulation.
See it live! — View source code.
Throw Block - Throw a block around the screen.
See it live! — View source code.
Flip Gravity - Change the direction of gravity by clicking your mouse.
See it live! — View source code.
Flappy Bird - Skeleton for a flappy birds style game. Press the mouse to jump.
See it live! — View source code.
Falling Ball - Simple simulation of a ball falling with gravity.
See it live! — View source code.
Simple Platform - Drop boxes onto a floor with realistic collisions by clicking your mouse.
See it live! — View source code.
Tilted Platform - Roll balls down a series of tilted platforms with realistic collisions by clicking your mouse.
See it live! — View source code.
Break Connection - Click the mouse to break the string connecting two balls.
See it live! — View source code.
Palmer Paul (programmer, maintainer)
Stephen Lewis (concept)