Solar System model

Virtual laboratory > Solar System model

---

This model demonstrates the real ratio of the orbital periods of the planets.

The radii of the orbits, as well as the sizes of the planets and the Sun are shown in the logarithmic scale.

Download: Solar_System_v2_release.zip (the program + pictures of the planets).

The text of the program is written in JavaScript (developed by Tsvetkov Denis):

File "Solar_System_v2_release.js"

  1 function Main_Solar(canvas) {
  2 
  3     canvas.onselectstart = function () {return false;};     // cancell canvas allocation 
  4 
  5     // Preliminary installations
  6 
  7     var context = canvas.getContext("2d");                  // context for drawing
  8 
  9     var m0 = 1;                         // weight (mass of Earth)
 10     var t0 = 1;                         // time (1 turn of Earth round its pivot-center (1 day))
 11     var a0 = 1;                         // distance (astronomical unit - distance from the Sun to Earth)
 12 
 13     var r0 = 4.2588e-5 * a0;            // Earth radius
 14     var t1 = 365.2564 * t0;             // 1 turn of Earth around the Sun (1 year)
 15 
 16     // *** calculation parameters ***
 17 
 18     var fps = 60;                       // frames per second
 19     var dt  = 0.5 * t0;                 // integration step
 20     // *** Implementation of the program ***
 21 
 22     var space_objects = [];
 23     // distance and time_around_Sun values at the sun are made in order that it flickered because of the movement
 24     space_objects.push({name:"Sun",    mass:333000*m0, distance:0.001*a0,  radius:109.21*r0, time_around_Sun:60*t0,    phase:0,    color:"#f6e209",    file:"VL_SS_Sun.png"});
 25     space_objects.push({name:"Mercury",  mass:0.05527*m0, distance:0.387*a0, radius:0.3829*r0, time_around_Sun:87.97*t0, phase:0,    color:"#de442c",    file:"VL_SS_Mercury.png"});
 26     space_objects.push({name:"Venus",    mass:0.815*m0,  distance:0.723*a0,  radius:0.949*r0, time_around_Sun:224.7*t0,  phase:0,    color:"#e8b633",    file:"VL_SS_Venus.png"});
 27     space_objects.push({name:"Earth",     mass:1*m0,      distance:1*a0,      radius:1*r0,    time_around_Sun:1*t1,       phase:0,    color:"#3e6286",    file:"VL_SS_Earth.png"});
 28     space_objects.push({name:"Mars",      mass:0.107*m0,  distance:1.523*a0,  radius:0.532*r0, time_around_Sun:1.88*t1,   phase:0,    color:"#752814",    file:"VL_SS_Mars.png"});
 29     space_objects.push({name:"Jupiter",    mass:317.8*m0,  distance:5.2*a0,    radius:10.97*r0, time_around_Sun:11.86*t1,  phase:0,    color:"#8c694d",    file:"VL_SS_Jupiter.png"});
 30     space_objects.push({name:"Saturn",    mass:95.2*m0,   distance:9.54*a0,   radius:9.45*r0, time_around_Sun:29.46*t1,   phase:0,    color:"#c69e47",    file:"VL_SS_Saturn.png"});
 31     space_objects.push({name:"Uranus",      mass:14.53*m0,  distance:19.19*a0,  radius:4*r0,    time_around_Sun:84.02*t1,   phase:0,    color:"#4e659b",    file:"VL_SS_Uranus.png"});
 32     space_objects.push({name:"Neptune",    mass:17.14*m0,  distance:30.06*a0,  radius:3.88*r0, time_around_Sun:164.78*t1,  phase:0,    color:"#4e6fbc",    file:"VL_SS_Neptunes.png"});
 33 //    space_objects.push({name:"Pluto",    mass:0.0022*m0, distance:39.53*a0,  radius:0.18*r0, time_around_Sun:248.09*t1,  phase:0});
 34 //    space_objects.push({name:"Haumea",    mass:777*m0,    distance:777*a0,    radius:777*r0,  time_around_Sun:285*t1,     phase:0});
 35 //    space_objects.push({name:"Makemake",  mass:777*m0,    distance:777*a0,    radius:777*r0,  time_around_Sun:309.88*t1,  phase:0});
 36 //    space_objects.push({name:"Erida",     mass:777*m0,    distance:777*a0,    radius:777*r0,  time_around_Sun:557*t1,     phase:0});
 37 //    space_objects.push({name:"Sedna",     mass:777*m0,    distance:777*a0,    radius:777*r0,  time_around_Sun:12059*t1,   phase:0});
 38 
 39     for (var i = 0; i < space_objects.length; i++) {
 40         space_objects[i].phase = Math.random() * 360;
 41     }
 42 
 43     var scale = canvas.height / a0 / space_objects.length / 2.1;  // large-scale coefficient for transition from settlement to screen coordinates
 44     var w = canvas.width / scale;                           // window width in settlement coordinates
 45     var h = canvas.height / scale;                          // window height in settlement coordinates
 46     // Generation of stars
 47     var stars = [];
 48     function generate_stars() {
 49         for (var i = 0; i < 1000; i++) {
 50             //set color
 51             var r = (0x1a0 + (Math.random()) * 0x5f).toString(16).substr(1,2); 
 52             var g = (0x1a0 + (Math.random()) * 0x5f).toString(16).substr(1,2);
 53             var b = (0x1a0 + (Math.random()) * 0x5f).toString(16).substr(1,2);
 54             stars[i] = {x:Math.random() * w * scale, y:Math.random() * h * scale, color:'#' + r + g + b};
 55         }
 56     }
 57 
 58     // Main  cycle of the program
 59     function control() {
 60         physics();
 61         draw();
 62     }
 63 
 64     // calculation part of the program
 65     function physics() {         
 66         for (var i = 0; i < space_objects.length; i++) {
 67             space_objects[i].phase += 360 * dt / space_objects[i].time_around_Sun;
 68         }
 69     }
 70 
 71     // loading of images of planets
 72     function load_pics() {
 73         for (var i = 0; i < space_objects.length; i++) {
 74             if (!space_objects[i].file) continue;
 75             var pic = new Image();
 76             pic.src = "Pics/" + space_objects[i].file;
 77             space_objects[i].pic = pic;
 78         }
 79     }
 80 
 81     // drawing
 82     function draw() {
 83         // dark sky
 84         context.fillStyle = "#000000";
 85         context.fillRect(0, 0, w * scale, h * scale);
 86 
 87         // stars
 88         for (var i0 = 0; i0 < stars.length; i0++) {
 89             context.fillStyle = stars[i0].color;
 90             context.fillRect(stars[i0].x, stars[i0].y, 1, 1);
 91         }
 92 
 93         for (var i = 0; i < space_objects.length; i++){
 94             var p = space_objects[i];
 95             var ro = 1.9 * Math.log(1 + 2.5 * p.distance / a0) * a0;
 96             var fi = p.phase / 180 * Math.PI;
 97             var xS = (w / 2 + ro * Math.cos(fi)) * scale;
 98             var yS = (h / 2 + ro * Math.sin(fi)) * scale;
 99 
100             // trajectories
101             context.beginPath();
102             context.arc(w / 2 * scale, h / 2 * scale, ro * scale, 0, 2 * Math.PI, false);
103             context.strokeStyle = "#516185";
104             context.stroke();
105 
106             // space objects
107             if (p.pic) {
108                 var r = 0.1 * Math.log(1 + 8 * p.radius / r0) * a0 * scale;
109                 var wh = p.pic.width / p.pic.height;
110                 context.drawImage(p.pic, xS - r * wh, yS - r, r * 2 * wh, r * 2);
111             }
112         }
113     }
114 
115     // Start of the system
116     load_pics();
117     generate_stars();
118     setInterval(control, 1000 / fps);
119 }

Файл "Solar_System_v2_release.html"

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>Solar System</title>
 6     <script src="Solar_System_v2_release.js"></script>
 7 </head>
 8 <body>
 9     <canvas id="Solar_System" width="800" height="800" style="border:1px solid #000000;"></canvas>
10     <script type="text/javascript">var app = new Main_Solar(document.getElementById('Solar_System'));</script>
11 </body>
12 </html>

The proposed development directions

• Add satellites of planets, dwarf planets and other space objects.
• Show information about space object when aiming cursor on it.
• Add the rotation of the planets around their axis.
• Rotate the camera a little, for the better view
• Set real phases for the planets.
• Add the ability to view the status of the planets at a certain point (eg, time management slider)