Gravity — Javascript Universe

Aug 18, 2014 · 3 min read
Image for post
Image for post

Back in 2001, after an idle browse I wrote a basic javascript universe that animating images around the screen, with respect to their gravitational influences on each other. The code is now long lost but I was recently reminded of it while thinking of ideas for mobile phone games. So here’s my recreation.

We'll need some particles that have size, position & velocity. Velocity (which is speed in a given direction) will be represented with an x and y speed giving us the direction and overall speed.

var particles = [
size: { radius: 40, mass: 1000 },
position: { x: 390, y: 230 },
velocity: { x: 0, y: 0 },
fillStyle: '#F3B553'

Now we need to set up a recurring loop to keep track of all of the particles and to move them to their new positions. This loop will be responsible for;

  • Updating the particles velocities dependent on their influences.
  • Applying the particles velocities to their position (i.e. moving them).
  • Re-drawing the canvas.

We can do this using the window.setInterval() method as follows;

window.setInterval(universeLoop, 1000 / 15);

Note: The interval here is set for 15 times a second regardless of your frame rate. In this example increasing or decreasing this will directly affect the speed at which the particles move. This can be fixed by introducing the concept of which I'll discuss later.

var universeLoop = function () {
var i, len = particles.length;
for (i = 0; i < len; i++) {
for (i = 0; i < len; i++) {

For drawing we'll simply use the canvas’ arc method to render a .

To update a particle we'll calculate any velocity changes using “Newton’s Law of Universal Gravitation”.
F = G x ((m1 x m2) / r2)

var newtonsLawOfUniversalGravitation = function (mass1, mass2, distance) {
var force = g * ((mass1 * mass2) / Math.pow(distance, 2));
var attraction2 = force / mass2;
return attraction2;

In order to do so we'll need to know a particles mass and the distance between it and the influencing particles, which we can calculate using “Pythagoras theorem”.
a2 + b2 = c2

var getDistance = function (x1, y1, x2, y2) {
var a = Math.abs(x1 - x2);
var b = Math.abs(y1 - y2);
return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

This will give us an attraction in a specific direction, i.e. towards the influencing particle. Which we can split into its x and y components using trigonometry.

var direction = Math.atan2(x1 - x2, y1 - y2);
var attractionX = Math.sin(direction) * attraction;
var attractionY = Math.cos(direction) * attraction;

Then it’s a simple case of updating the particles velocity with the force of attraction.

Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store