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