Intro

Learn how to create a simulation of our solar system with realistic planet movement. This educational application teaches you not only science concepts but also important coding concepts such as:

How to use objects to store complex data structures
How to use trigonometric functions
How to create animations using the loop event

What do you need?

To run the code in this article you don’t need to install anything on your local computer.

Just open the online JavaScript playground from codeguppy.com/code.html and copy and paste the following code in the integrated editor.

When ready, press the “Play” button to run the code.

Source code

var sunRadius = 30;
var systemAge = 0;
var dpf = 1; // days per frame

var planets = [
        { name : 'Mercury', r : 6, rev : 87.97 },
        { name : 'Venus', r : 7, rev : 224.7 },
        { name : 'Earth', r : 10, rev : 365.26, color: 'blue' },
        { name : 'Mars', r : 8, rev : 1.88 * 365 },
        { name : 'Jupiter', r : 20, rev : 11.86 * 365 },
        { name : 'Saturn', r : 15, rev : 29.46 * 365 },
        { name : 'Uranus', r : 12, rev : 84.01 * 365 },
        { name : 'Neptune', r : 7, rev : 164.79 * 365 },
        { name : 'Pluto', r : 5, rev : 248.59 * 365 }
    ];

function enter()
{
    background('Stars');
    calculateDistanceFromSun();
}

function loop()
{
    clear();

    updateAge();
    updatePlanets();
    drawPlanets();

    displayStats();
}

function drawPlanets()
{
    var sunX = width / 2;
    var sunY = height / 2;

    fill('yellow');
    circle(sunX, sunY, sunRadius);

    for(var i = 0; i < planets.length; i++)
    {
        var p = planets[i];

        // Draw orbit
        noFill();
        stroke(200);
        circle(sunX, sunY, p.sunDist);

        var x = sunX + p.sunDist * cos(p.a);
        var y = sunY - p.sunDist * sin(p.a);

        // Draw planet
        stroke(255);
        fill(p.color || "white");
        circle(x, y, p.r);

        push();
        noStroke();
        fill(255);
        textAlign(LEFT, CENTER);
        text(p.name, x + p.r + 5, y);
        pop();
    }
}

function updateAge()
{
    systemAge += dpf;
}

function updatePlanets()
{
    for (var o of planets)
    {
        o.a = (systemAge / o.rev) * 360;
    }
}

function calculateDistanceFromSun()
{
    function getPlanetSize()
    {
        var d = 0;
        for(var o of planets)
        {
            d += o.r * 2;
        }
        return d;
    }

    function getInterPlanet()
    {
        var planetsSize = getPlanetSize();
        var dp = height / 2 - sunRadius - planetsSize - 10;
        dp  = dp / planets.length;

        return dp;
    }

    var dp = getInterPlanet();
    planets[0].sunDist = sunRadius + dp + planets[0].r;

    for(var i = 1; i < planets.length; i++)
    {
        var p = planets[i-1];
        planets[i].sunDist = p.sunDist + p.r + dp + planets[i].r;
    }
}

function displayStats()
{
    push();
    fill(255);
    noStroke();

    text("System age: " + systemAge + " days", 10, 10);

    for(var i = 0; i < planets.length; i++)
    {
        var p = planets[i];
        var pYears = systemAge / p.rev;
        text(p.name + ": " + pYears.toFixed(2) + " years", 10, (i+2)*14);
    }

    pop();
}

Feedback

If you liked the article, please follow @codeguppy on Twitter and / or visit codeguppy.com for more tutorials and projects.

Also, if you want to extend this article with detailed instructions explaing how to build the program step by step, please leave feedback in the comments.

Blog

Solar system simulation

Adrian

Intro

What do you need?

Source code

Feedback

Join Our Newsletter. No Spam, Only the good stuff.

Related