Lloyd Richards Design

Jul 29, 2020

Intergrating P5.js and Matter.js

Learning to use Matter.js with P5.js

One of the things I've been thinking about is how to intergrate physics into P5.js. I've been looking at Matter.js and it seems like a good option. I've already worked with d3-force which worked well with D3.js but I think Matter.js might be a better option for P5.js.

Basic Physics

I started with a basic example from the Matter.js website. I wanted to see how it would work with P5.js. It was pretty easy to get it working. I just had to create the Engine, World and Bodies with Matter and then with my Box class I can create a new Box and pass in the Matter.js body. Then in the draw loop I just have to update the Engine and then draw the boxes.