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)
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
Thanks for the feedback
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 ^^
@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.