Difference between revisions of "Solar System model"

  1 function Main_Solar(canvas) {
  2 
  3     canvas.onselectstart = function () {return false;};     // ban of allocation of canvas
  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 }

 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>