5.17: Introduction to Matter.js – The Nature of Code

This video is an introduction to the physics engine Matter.js, a 2D JavaScript physics library that supports rigid body collisions and constraints. In this video I show you how to set up your code to use the library in combination with p5.js for rendering.

Next video:

Support this channel on Patreon:

Send me your questions and coding challenges!:

The Coding Train website:

Links discussed in this video:
The Nature of Code:
My Nature of Code playlist on Physics Engines:

Source Code for the all Video Lessons:


For More Nature of Code videos:
For More Coding Challenges:
For an Intro to Programming using p5.js:

Help us caption & translate this video!






33 responses to “5.17: Introduction to Matter.js – The Nature of Code”

  1. ItaliaForumHD Avatar

    But why we need to use push and pop functions?

  2. Danny Cullen Avatar

    How do we edit the engine frame rate, to stop objects appear to be passing through the ground?

  3. Atlas Avatar

    29:08 lt happens because the speed is fast enough that the update rate can't handle it, so if the speed is 10 meters per second and the update rate is 1 time per second, the block will just jump 10 meters and all the path he did will not be calculated and any collision that should exist will not exist either

  4. Christopher Ferreira Avatar

    I wish i had a professor like you in university. Your enthusiasm all alone is really contagious! Keep up your good work!

  5. haha Avatar

    A bit late to the party. But I come here only to check if you will introduce or recommend matter.js. Now I get the answer. I am glad that you choose this so I don't need to search around for more articles comparing different javascript physics libraries kind of stuff. I will just use matter.js and roll my sleeves on to work.

  6. Ee Venn Soh Avatar

    Any particular reason why in all of the coding examples, you prefer to use function rather than ES6 class? Would love to know your take on this.

  7. iRevolution Avatar

    console.log() seems to be doing nothing in my sketch. Does anyone know how to fix this?

  8. New View Avatar

    Why is this 5.17? In the p5.js tutorial playlist it only goes to 5.6 D:

  9. Benjamin Avatar

    how do you tweak your code ? is it a shortcut ?

  10. raj Avatar

    how do you know so much, superbrain?

  11. Gurkensohn Avatar

    This library is extremely cool but some implementations are really questionable…

  12. Jon Avatar

    matter.js maybe use requestAnimationFrame for his update routine instead of you calling update manually, it make sense

  13. Ishan Avatar

    Hey Dan, awesome video mate! keep motivating and teaching me more πŸ™‚

  14. Daily reminder: Avatar

    I'm just here for the unchanging purple hoddy.

  15. Daniel W Avatar

    Mostly a great video, for me it is always fun and inspiring to follow along your challenges, Dan! Btw, my name is also Daniel πŸ˜€
    Two issues tho:
    1. better to name world myWorld, and engine myEngine for readability. mixed world and World up and got stuck for a while :/

    2. Make annotation at 22 minutes stating that rotate(angle) and not rotate(radians(angle)) should be used.
    Got stuck at those places, otherwise great video! πŸ˜€

  16. Lenda Avatar

    I drew the bodies by calling beginShape() and then vertex() for each vertex of the body on the vertices array. Didn't need to worry about the angles nor the dimensions this way.

  17. Hacker Online Avatar

    Is it me or matter.js collision are kinda weird, they looks like they are intersecting…I dont know if its because of my OCD or is it normal ?

  18. alonetrio Avatar

    what about a little nice CODEF presentation ?? πŸ˜‰ πŸ˜‰

  19. Alon Kellner Avatar

    Video starts: "I am going to teach you how to use matter.js! Here's the problem… I don't really know matter.js…"
    And then: "What I'm gonna show you is me, trying to attempt to make a very simple example…"
    Three seconds in, the show has already been fully introduced, and we gained two extraordinary quotes from our dear Dan.

  20. Funblasta Avatar

    Great video Dan! always enjoyable to watch. thank you πŸ™‚

  21. Tim Avatar

    I think you need an alias " " for "this." πŸ˜€

  22. Connor Peace Avatar

    Dan, no one care's that you're copying code from a browser to a text editor. You do an awesome job explaining everything and you have amazing energy. When I watch your videos I know that you're going to ramble a bit and maybe mess up here or there, but there's something about that raw aspect of your channel that isn't in some of the other clean-cut tutorials out there. You show me that its okay to struggle, and that I'll get through it. Keep up the awesome work πŸ™‚ I know you put a lot of time and effort into this channel and I really appreciate it πŸ™‚

  23. Tim Avatar

    What do you think about classical music @The Coding Train? πŸ™‚
    By the way, i like your videos. It's very fun to watch them.

  24. xClordon_ Avatar

    Is this the video you made a few years ago?

  25. Yanick Rochon Avatar

    "box"… this is why p5 should be namespaced, so it would also work better with es5 module loaders

  26. xClordon_ Avatar

    Awesome video dan!

  27. Nola1222 Avatar

    Will the mobile livestream ever come….

  28. Nola1222 Avatar

    Will the mobile livestream ever come….

Leave a Reply

Your email address will not be published. Required fields are marked *