Stellar Orbit : A Gravity Simulator - p5js.org
- Body Controls
- left mouse click : place body
- drag : sligshot body
- scroll up : increase size
- scroll down : decrease size
- Camera Controls
- **space bar : toggle camera follow (Make sure you use this!)
- arrow keys : move camera manually
- Game Controls
- R : restart game
The objective of the game is to create as many orbits as you can while having the least number of crashes. Play around on your universal playground by placing heavier bodies, and catapulting rocks and other smaller bodies into orbit around these ones. 
The default crashes is set to 50, making the game end when you crash 50 bodies togather. But, since its a simulation game, make sure you're using all the creativity you have in you and test out all the possibilities that come to your mind. It's not the destination that makes it fun but the journey!
Back in 2007, the first games I ever played were on Cool Math Games. The website used to come up with new games every week or so, adding on to a never ending collection of flash player games (which has now been discontinued). My favourite ones were the ones where some level of physics was involved, and it was in fact the source of my interest in the subject of physics as it gave me an unlimited playground to test out my imagination. In fact, that was where my love for the subject of physics started!
The game uses the Universal Law of Gravitation and other related Laws of Motion for its physics. It has been tweaked to make the game user friendly - in terms of the ratio of sizes, masses and force applied.
THe game has mechanics similar to the simulation game shown below.
Although the gameplay is quite different from the game above, both use the law of gravitation for their physics.
I first started by trying to figure out the Physics. The Physics of attraction and gravity requires the use of vectors. I found the following nature of Code videos by The Coding Train to be immensly useful for understand how displacement, vectors and acceetarion works :
The game includes a Body class which enables the bodies to have properties like mass, initial velocity, acceleration and force. The objects of this class are stored in bodies_array.
The starry backgorund of the game is created by this class and is loaded once at the start of the game in setup()
This class keeps track of the statistics of the game using the this class which has various counters like moons, planets, rocks, crashes ...
The score is calculated by using the function, score = (number of planets * 3) + (number of moons * 2) + (number of rocks * 1) - (number of planets crashed * 2) it is displayed in the top right for the user to keep track.
maxscore keeps track of the highest score that the playet gets and stores it till endgame.
The stats are briefly displayed at the end of the game for the player to have a look at!
camerafollow() was one of the trickiest (and most interesting) functions to code. I made it as a result of the need for something that keeps track of the bodies, or restricts them to our playground. But, restricting them wasn't the best option as I would be commiting a sin by breaking the laws of physics. So, the best option was to make the camera follow the bodies. This too was an illusion, as what is really happening is the body with the maximum mass is made to move to the center and that movement vector is also added to every other body in the game. This creates an illusion of the camera following the body. The beauty of relativity!
The arrow keys use a similar concept, except its more manual as the camera velocity is added only as many times as the user presses the keys and in the desired direction, hence giving some control but not very useful in all cases.
Giving the planets an initial velocity was also a very interesting (and of course, necessary) addition to the game. Creating the guide arrow and limiting it to a maximum velocity felt satisfying as it reminded me of the catapult in angry birds. The planets were given a velogity along the direction of this arrow vector.
This functionality was implemented right after the initial stage of coding the N body attraction. It was added to allow the player to create bodies of different masses. The mass of a body is a function of the radius of the planet, since mass is just an illusion of size of the body.
Why not give our gravity system a personality by randomizing the body skins!
The music used in this game was a looped clip of Stay composed by Hans Zimmer. It was one of the soundtracks of my favourite movie Interstellar by Christopher Nolan. It's space movie about human endurance, love and science!
I find the sound tracks of interstellar to perfectly describe what I feel when I think of space, physics and the vastness of the universe.
- Firstly, the challenge at the start was to deploy N body attraction using code. Daniel Shiffman's videos were immensly helpful in overcoming this by using Vecotrs.
- Camera follow was another challenge I had to overcome to make the game more play-able. It was a challenge as figuring the right velocities to add and subtract took some time to figure out, especially as they were vecotrs with directions.
- Adding the music was a difficult task as my browser seemed to keep running out of memory due to a memory leak. I fixed it by using a p5.sound function and adding the same to the html files.
The game can be further improved in a lot of ways. I'm listing a few ways below.
- Smoother camera movement using arrow keys - one that is relative to the maximum velocity of the bodies
- Long disappearing trails - the bodies would form beautiful patterns if they were given a more lasting trail which didnt use transparency of the background
- Zoom in and out - would be a great feature if implemented, although it will be a challenge doing it.
- Assets Folder :
- Planet Images
- Rock Image
- Stay : background musc for the game
- background.js : contains the class that creates the starry background
- stats.js : the statistics class for the game that keeps the score
- sketch.js : the game
Music : Stay - Hans Zimmer p5js Tutorails : The Coding Train p5js Documentation : reference - p5js