Javascript Physic Engine

Hello everyone !

I just wanted to share with you a few lines of code describing a basic Physic Engine in javascript.

For the story, I joinded FCC a few weeks ago, and for the project “Random Quote” I decided to do something original : put the quotes in bubbles that can move and collide. Firstly I thought that something this simple visually would take at max a few hours, but this project lasted 4 days. (2 days with a pencil drawing circles and doing trigo, only one day of actual coding, and one day to eliminate the bugs)

So, here are the results:
Random Quote Machine:
Physic Engine alone:
Enjoy !

Note : The codepen that focuses only on the Physic Engine is commented and also is a more advanced version of the one in Random Quote, that still have some bugs.

If some people want an in-depth explanation of the code, especially on the trigonometric part, I will gladly do so and try my best to be understandable with my crude english, so that you can try to create your own Physic Engine. ( It is a lot of fun, I promise ^^)

And if you have any feedbacks or suggestions, I am always open to them and I will gladly accept them :slight_smile:


Thanks for sharing, it looks great!

I like it. One thing I noticed is if you click on the text of the author, it does not work. You have to click anywhere in the bubble that is not text.

Thanks for the feedback :slight_smile:
Indeed, I didn’t notice this one. The innerHTML of the bubbles was reinitialized at each iteration, thus erasing the click event.

I noticed one other strange thing on one particular refresh of the pen. I watched it for a couple of minutes to confirm, but the Michael Jackson bubble would float over the Henry Van Dyke bubble, but all other bubble interactions would bounce. See below for screenshot:

Well, the Quote Bubbles were using the the first and really buggy version of the Physic Engine, and I forgot to update it with the new one ^^
Now il can handle multiple collision at each move, and the only time where bubbles would float over others are when they are initialized. I should correct it, one day…
Thanks again ^^

Awesome work!! I’m very impressed that you were able to do this a few weeks into freeCodeCamp. Do you have background in physics?

I really like this!

This will be fun to try and re-engineer/ recreate and slow down! :sunglasses:

@jonathanwmaddison : Well, actually I used more maths and geometry than physics, but I do have a little background in sciences (a French preparatory school). You can solve it using physics (with the conservation of momentum and kinetic energy), but it’s easier to solve it by drawing a few examples of collision and by trying to determine visually the logic behind it.

This is a visual exemple of a collision:
There is an exchange of vector composants. To solve it, you “just” have to change your frame of reference.

@askalik : Thanks ! And good luck, it is quite challenging to do, but the result is just so satisfying !
If you have any questions, don’t hesitate :wink:

1 Like