JSFiddle - React, Tailwind, and code Playground

by chriswilsondc

JavaScript

var paper = Raphael(0, 0, 650, 450);

//http://nineplanets.org/data.html
var orbits = {
    Mercury: { distance: 57910, period: 87.97, incl: 7.00, eccen: 0.21 },
    Venus: { distance: 108200, period: 224.70, incl: 3.39, eccen: 0.01},
    Earth: { distance: 149600, period: 365.26, incl: 0.00, eccen: 0.02},
    Mars: { distance: 227940, period: 686.98, incl: 1.85, eccen: 0.09 }
};

//http://nineplanets.org/data1.html
var radii = {
    Sun: 695000,
    Mercury: 2440,
    Venus: 6052,
    Earth: 6378,
    Mars: 3397,
};

//chosen haphazardly
var colors = {
    Sun: "yellow",
    Mercury: "gray",
    Venus: "brown",
    Earth: "blue",
    Mars: "red"
}

// chosen some scales by trial and error to get the solar sysem on the screen
var ORBIT_SCALE = 1.0 / 1000;
var PLANET_SCALE = 1.0 / 800;

//center at the middle of the canvas
var CENTER = {x: paper.width / 2, y: paper.height / 2};

// the sun needs extra scaling
var Sun = paper.circle(CENTER.x, CENTER.y, radii.Sun * PLANET_SCALE / 50).attr("fill", colors.Sun);

//loop through the planets and draw the orbit and the planet
for (var name in orbits) {
    //calculate the long and short arms of the elliptical orbit and the focus
    //http://nineplanets.org/help.html#semim
    var r_perigee = orbits[name].distance * (1 - orbits[name].eccen) * ORBIT_SCALE,
        r_apogee = orbits[name].distance * (1 + orbits[name].eccen) * ORBIT_SCALE,
        focus = orbits[name].eccen * r_apogee;
    var orbit = paper.ellipse(CENTER.x + focus, CENTER.y, r_apogee, r_perigee).attr({
        stroke: "gray",
        "stroke-dasharray": "--"
    });
    var body = paper.circle(CENTER.x + focus - r_apogee, CENTER.y, radii[name] * PLANET_SCALE).attr("fill", colors[name]);

    var system = paper.set(orbit, body);    
    system.attr("transform", "R" + orbits[name].incl + " " + CENTER.x + "," + CENTER.y);
}