# 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
117     generate_stars();
118     setInterval(control, 1000 / fps);
119 }


Файл "Solar_System_v2_release.html"

 1 <!DOCTYPE html>
2 <html>
4     <meta charset="UTF-8" />
5     <title>Solar System</title>
6     <script src="Solar_System_v2_release.js"></script>
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, dwarf planets and other space objects.
• Show information about the space objects when aiming cursor on it.
• Add the planets rotation around their axes.
• Add an ability to rotate the camera for a better view.
• Set real phases for the planets.
• Add an ability to view the status of the planets at a certain point (e.g., a time slider)