Javascript Physic Engine

#1

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: http://codepen.io/MagicMixer/full/xqvOvL/
Physic Engine alone: http://codepen.io/MagicMixer/full/MpMqeJ/
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:

3 Likes
#2

Thanks for sharing, it looks great!

#3

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.

#4

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.

#5

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:

image.jpg1282×914 90 KB

#6

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 ^^

#7

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

#8

I really like this!

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

#9

@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: http://www.hostingpics.net/viewer.php?id=497819collision.png
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
#10