Solar System model

Virtual laboratory > Solar System model

---

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

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

Download: Solar_System_v2_release.zip (программа + изображения планет).

The text of the program is written in JavaScript (the developer is Цветков Денис):

Файл "Solar_System_v2_release.js"

  1 function Main_Solar(canvas) {
  2 
  3     canvas.onselectstart = function () {return false;};     // запрет выделения canvas
  4 
  5     // Предварительные установки
  6 
  7     var context = canvas.getContext("2d");                  // на context происходит рисование
  8 
  9     var m0 = 1;                         // масштаб массы (масса Земли)
 10     var t0 = 1;                         // масштаб времени (1 оборот Земли вокруг своей оси (1 день))
 11     var a0 = 1;                         // масштаб расстояния (астрономическая единица - расстояние от Солнца до Земли)
 12 
 13     var r0 = 4.2588e-5 * a0;            // радиус Земли
 14     var t1 = 365.2564 * t0;             // 1 оборот Земли вокруг Солнца (1 год)
 15 
 16     // *** Задание вычислительных параметров ***
 17 
 18     var fps = 60;                       // frames per second - число кадров в секунду (качечтво отображения)
 19     var dt  = 0.5 * t0;                 // шаг интегрирования
 20 
 21     // *** Выполнение программы ***
 22 
 23     var space_objects = [];
 24     // значения distance и time_around_Sun у солнца сделаны для того, чтобы оно мерцало из-за движения
 25     space_objects.push({name:"Солнце",    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"});
 26     space_objects.push({name:"Меркурий",  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"});
 27     space_objects.push({name:"Венера",    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"});
 28     space_objects.push({name:"Земля",     mass:1*m0,      distance:1*a0,      radius:1*r0,    time_around_Sun:1*t1,       phase:0,    color:"#3e6286",    file:"VL_SS_Earth.png"});
 29     space_objects.push({name:"Марс",      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"});
 30     space_objects.push({name:"Юпитер",    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"});
 31     space_objects.push({name:"Сатурн",    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"});
 32     space_objects.push({name:"Уран",      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"});
 33     space_objects.push({name:"Нептун",    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"});
 34 //    space_objects.push({name:"Плутон",    mass:0.0022*m0, distance:39.53*a0,  radius:0.18*r0, time_around_Sun:248.09*t1,  phase:0});
 35 //    space_objects.push({name:"Хаумеа",    mass:777*m0,    distance:777*a0,    radius:777*r0,  time_around_Sun:285*t1,     phase:0});
 36 //    space_objects.push({name:"Макемаке",  mass:777*m0,    distance:777*a0,    radius:777*r0,  time_around_Sun:309.88*t1,  phase:0});
 37 //    space_objects.push({name:"Эрида",     mass:777*m0,    distance:777*a0,    radius:777*r0,  time_around_Sun:557*t1,     phase:0});
 38 //    space_objects.push({name:"Седна",     mass:777*m0,    distance:777*a0,    radius:777*r0,  time_around_Sun:12059*t1,   phase:0});
 39 
 40     for (var i = 0; i < space_objects.length; i++) {
 41         space_objects[i].phase = Math.random() * 360;
 42     }
 43 
 44     var scale = canvas.height / a0 / space_objects.length / 2.1;  // масштабный коэффициент для перехода от расчетных к экранным координатам
 45     var w = canvas.width / scale;                           // ширина окна в расчетных координатах
 46     var h = canvas.height / scale;                          // высота окна в расчетных координатах
 47 
 48     // Генерация звезд
 49     var stars = [];
 50     function generate_stars() {
 51         for (var i = 0; i < 1000; i++) {
 52             // цвет задается как #xxyyzz, где xx - доля красного, yy - зеленого, zz - синего.
 53             var r = (0x1a0 + (Math.random()) * 0x5f).toString(16).substr(1,2);  // красный от a0 до a0 + 5f
 54             var g = (0x1a0 + (Math.random()) * 0x5f).toString(16).substr(1,2);
 55             var b = (0x1a0 + (Math.random()) * 0x5f).toString(16).substr(1,2);
 56             stars[i] = {x:Math.random() * w * scale, y:Math.random() * h * scale, color:'#' + r + g + b};
 57         }
 58     }
 59 
 60     // Основной цикл программы
 61     function control() {
 62         physics();
 63         draw();
 64     }
 65 
 66     // Расчетная часть программы
 67     function physics() {                                    // то, что происходит каждый шаг времени
 68         for (var i = 0; i < space_objects.length; i++) {
 69             space_objects[i].phase += 360 * dt / space_objects[i].time_around_Sun;
 70         }
 71     }
 72 
 73     // загрузка изображений планет
 74     function load_pics() {
 75         for (var i = 0; i < space_objects.length; i++) {
 76             if (!space_objects[i].file) continue;
 77             var pic = new Image();
 78             pic.src = "Pics/" + space_objects[i].file;
 79             space_objects[i].pic = pic;
 80         }
 81     }
 82 
 83     // Рисование
 84     function draw() {
 85         // темное небо
 86         context.fillStyle = "#000000";
 87         context.fillRect(0, 0, w * scale, h * scale);
 88 
 89         // звезды
 90         for (var i0 = 0; i0 < stars.length; i0++) {
 91             context.fillStyle = stars[i0].color;
 92             context.fillRect(stars[i0].x, stars[i0].y, 1, 1);
 93         }
 94 
 95         for (var i = 0; i < space_objects.length; i++){
 96             var p = space_objects[i];
 97             var ro = 1.9 * Math.log(1 + 2.5 * p.distance / a0) * a0;
 98             var fi = p.phase / 180 * Math.PI;
 99             var xS = (w / 2 + ro * Math.cos(fi)) * scale;
100             var yS = (h / 2 + ro * Math.sin(fi)) * scale;
101 
102             // траектории
103             context.beginPath();
104             context.arc(w / 2 * scale, h / 2 * scale, ro * scale, 0, 2 * Math.PI, false);
105             context.strokeStyle = "#516185";
106             context.stroke();
107 
108             // космические объекты
109             if (p.pic) {
110                 var r = 0.1 * Math.log(1 + 8 * p.radius / r0) * a0 * scale;
111                 var wh = p.pic.width / p.pic.height;
112                 context.drawImage(p.pic, xS - r * wh, yS - r, r * 2 * wh, r * 2);
113             }
114         }
115     }
116 
117     // Запуск системы
118     load_pics();
119     generate_stars();
120     setInterval(control, 1000 / fps);
121 }

Файл "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 directions of the stand development

• 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.
• "Incline 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)