Model of the sun and 4 inner planets with moons, as they X the sky. Sizes, distances & speeds are approximately correct.
var i,W=600,H=600,M=Math,S=function(){let a=this;a.x,a.y,a.a=[],a.l={},a.n=0};S.prototype.P=function(a){let d=this;a[6]=null==a[6]?d:d.l[a[6]];let e=new B(a);e.U(),d.a.push(e),d.l[a[0]]=e,d.n++},S.prototype.U=function(){for(i=0;i<this.n;i++){let a=this.a[i];a.U()}};var B=function(a){let d=this;return d.id=a[0],d.d=a[1],d.o=a[2],d.s=a[3],d.c='#'+a[4],d.r=a[5],d.p=a[6],d.x,d.y,d.vx,d.vy,d};B.prototype.U=function(){let a=this,d=0.0174*a.o;a.o+=a.s,a.vx=a.r*M.cos(d),a.vy=a.r*M.sin(d),a.p&&(a.x=a.vx+a.p.x,a.y=a.vy+a.p.y)};var X=new S;X.x=W/2,X.y=H/2,X.P(['s',10,0,0,'ff0',0,null]),X.P(['m',5,120,0.9,'ddd',65,'s']),X.P(['v',6,180,0.145,'fc6',120,'s']),X.P(['E',7,30,0.23,'8be',166,'s']),X.P(['e',2,0,2.65,'fff',21,'E']),X.P(['M',3,80,0.3,'e62',253,'s']),X.P(['p',1,0,30,'e62',10,'M']),X.P(['d',1,0,20,'e62',17,'M']),setInterval(function(){for(c.fillStyle='#000',c.fillRect(0,0,W,H),X.U(),i=0;i<X.n;i++){let a=X.a[i];c.beginPath(),c.arc(a.x,a.y,a.d,0,2*M.PI),c.fillStyle=a.c,c.fill()}},16);
dmFyIGksVz02MDAsSD02MDAsTT1NYXRoLFM9ZnVuY3Rpb24oKXtsZXQgYT10aGlzO2EueCxhLnksYS5hPVtdLGEubD17fSxhLm49MH07Uy5wcm90b3R5cGUuUD1mdW5jdGlvbihhKXtsZXQgZD10aGlzO2FbNl09bnVsbD09YVs2XT9kOmQubFthWzZdXTtsZXQgZT1uZXcgQihhKTtlLlUoKSxkLmEucHVzaChlKSxkLmxbYVswXV09ZSxkLm4rK30sUy5wcm90b3R5cGUuVT1mdW5jdGlvbigpe2ZvcihpPTA7aTx0aGlzLm47aSsrKXtsZXQgYT10aGlzLmFbaV07YS5VKCl9fTt2YXIgQj1mdW5jdGlvbihhKXtsZXQgZD10aGlzO3JldHVybiBkLmlkPWFbMF0sZC5kPWFbMV0sZC5vPWFbMl0sZC5zPWFbM10sZC5jPScjJythWzRdLGQucj1hWzVdLGQucD1hWzZdLGQueCxkLnksZC52eCxkLnZ5LGR9O0IucHJvdG90eXBlLlU9ZnVuY3Rpb24oKXtsZXQgYT10aGlzLGQ9MC4wMTc0KmEubzthLm8rPWEucyxhLnZ4PWEucipNLmNvcyhkKSxhLnZ5PWEucipNLnNpbihkKSxhLnAmJihhLng9YS52eCthLnAueCxhLnk9YS52eSthLnAueSl9O3ZhciBYPW5ldyBTO1gueD1XLzIsWC55PUgvMixYLlAoWydzJywxMCwwLDAsJ2ZmMCcsMCxudWxsXSksWC5QKFsnbScsNSwxMjAsMC45LCdkZGQnLDY1LCdzJ10pLFguUChbJ3YnLDYsMTgwLDAuMTQ1LCdmYzYnLDEyMCwncyddKSxYLlAoWydFJyw3LDMwLDAuMjMsJzhiZScsMTY2LCdzJ10pLFguUChbJ2UnLDIsMCwyLjY1LCdmZmYnLDIxLCdFJ10pLFguUChbJ00nLDMsODAsMC4zLCdlNjInLDI1MywncyddKSxYLlAoWydwJywxLDAsMzAsJ2U2MicsMTAsJ00nXSksWC5QKFsnZCcsMSwwLDIwLCdlNjInLDE3LCdNJ10pLHNldEludGVydmFsKGZ1bmN0aW9uKCl7Zm9yKGMuZmlsbFN0eWxlPScjMDAwJyxjLmZpbGxSZWN0KDAsMCxXLEgpLFguVSgpLGk9MDtpPFgubjtpKyspe2xldCBhPVguYVtpXTtjLmJlZ2luUGF0aCgpLGMuYXJjKGEueCxhLnksYS5kLDAsMipNLlBJKSxjLmZpbGxTdHlsZT1hLmMsYy5maWxsKCl9fSwxNik7
var W = 600,
H = 600,
M = Math,
i;
/* OrbitalSystem
Collection of orbiting bodies */
var OrbitalSystem = function(){
let t = this;
t.x = 0;
t.y = 0;
t.allBodies = [];
t.allBodiesLookup = {};
t.numBodies = 0;
}
OrbitalSystem.prototype.addBody = function(vo) {
vo[6] = vo[6] === null ? this : this.allBodiesLookup[vo[6]];
let body = new OrbitalBody(vo);
body.update();
this.allBodies.push(body);
this.allBodiesLookup[vo[0]] = body;
this.numBodies++;
}
OrbitalSystem.prototype.update = function(){
for(i=0; i<this.numBodies; i++){
let body = this.allBodies[i];
body.update();
}
}
/* OrbitalBody
These can orbit the system, or other bodies within that system */
var OrbitalBody = function(vo){
let t = this;
t.id = vo[0];
t.d = vo[1];
t.degrees = vo[2];
t.speed = vo[3];
t.col = '#'+vo[4];
t.orbitalRadius = vo[5];
t.parentBody = vo[6];
t.x = 0;
t.y = 0;
t.vx = 0;
t.vy = 0;
return t;
}
OrbitalBody.prototype.update = function(){
let t = this,
angle = t.degrees * 0.0174;
t.degrees += t.speed;
t.vx = t.orbitalRadius * M.cos(angle);
t.vy = t.orbitalRadius * M.sin(angle);
if(t.parentBody != null){
t.x = t.vx + t.parentBody.x;
t.y = t.vy + t.parentBody.y;
}
}
// Create the orbital system
var pSys = new OrbitalSystem();
pSys.x = W / 2;
pSys.y = H / 2;
pSys.addBody(['s', 5, 0, 0, 'ff0', 0, null]); // Sun
pSys.addBody(['m', 5, 120, .9, 'ddd', 65, 's']); // Mercury
pSys.addBody(['v', 6, 180, .145, 'fc6', 120, 's']); // Venus
pSys.addBody(['E', 7, 30, .23, '8be', 166, 's']); // Earth
pSys.addBody(['e', 2, 0, 2.65, 'fff', 21, 'E']); // Moon
pSys.addBody(['M', 3, 80, .3, 'e62', 253, 's']); // Mars
pSys.addBody(['p', 1, 0, 30, 'e62', 10, 'M']); // Phobos
pSys.addBody(['d', 1, 0, 20, 'e62', 17, 'M']); // Deimos
setInterval(function(){
// Clear everything
c.fillStyle = '#000';
c.fillRect(0,0,W,H);
// Update the system
pSys.update();
// Draw everything
for(i=0; i<pSys.numBodies; i++) {
let planetaryBody = pSys.allBodies[i];
c.beginPath();
c.arc(planetaryBody.x, planetaryBody.y, planetaryBody.d, 0, M.PI*2, false);
c.fillStyle = planetaryBody.col;
c.fill();
}
}, 16);