API tools faq
paste
Advertisement
Guest User

Solar System

a guest
Sep 26th, 2016
162
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.83 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <style>
  5. body {font-size: 120%}
  6. select {font-size: 100%}
  7. </style>
  8. <script>
  9. //Symulacja ruchu planet w Układzie Słonecznym
  10. //Autor: Robert Kopias
  11.  
  12. window.onload = function() {
  13.  
  14.     window.requestAnimFrame = (function(){
  15.       return  window.requestAnimationFrame       ||
  16.               window.webkitRequestAnimationFrame ||
  17.               window.mozRequestAnimationFrame    ||
  18.               window.oRequestAnimationFrame      ||
  19.               window.msRequestAnimationFrame     ||
  20.               function(callback, element){
  21.                 window.setTimeout(callback, 1000 / 60);
  22.               };
  23.     })();
  24.  
  25. window.addEventListener('resize', resize);
  26.  
  27. var G = 6.67385e-11;
  28. var krok = 100; //[s]
  29. var coIteracjeDostepne = [10, 50, 100, 500, 1000, 5000, 10000];
  30. var coIteracje = 2;
  31. var czasOdPoczatku = 0;
  32. var chodzi = true;
  33.  
  34. var Punkt = function(x, y) {
  35.   this.x = x;
  36.   this.y = y;
  37. };
  38.  
  39. var CialoNiebieskie = function(nazwa, masa, polozenie, predkosc, liczyc, kolor, promien) {
  40.   this.nazwa = nazwa;
  41.   this.masa = masa;
  42.   this.polozenie = polozenie;
  43.   this.predkosc = predkosc;
  44.   this.liczyc = liczyc;
  45.   this.przesuniecie = new Punkt(0, 0);
  46.   this.kolor = kolor;
  47.   this.promien = promien;
  48. };
  49.  
  50. var Widok = function(kanwa, ciala, maxWart) {
  51.   this.kanwa = kanwa;
  52.   this.ciala = ciala;
  53.   this.kontekst = kanwa.getContext('2d');
  54.   this.maxWart = maxWart;
  55. }
  56.  
  57. var systemPlanet = new Array();
  58. systemPlanet.push(new CialoNiebieskie('Sun', 1.9891e30, new Punkt(0, 0), new Punkt(0, 0), false, 'yellow', 5));
  59. systemPlanet.push(new CialoNiebieskie('Mercury', 3.3302e23, new Punkt(46.001272e9, 0), new Punkt(0, 58.98e3), true, 'black', 0.5));
  60. systemPlanet.push(new CialoNiebieskie('Venus', 4.8685e24, new Punkt(107.476002e9, 0), new Punkt(0, 35.259e3), true, 'gray', 1));
  61. systemPlanet.push(new CialoNiebieskie('Earth', 5.9736e24, new Punkt(147.098291e9, 0), new Punkt(0, 30.29e3), true, 'blue', 1));
  62. systemPlanet.push(new CialoNiebieskie('Mars', 6.4185e23, new Punkt(206.644545e9, 0), new Punkt(0, 26.50e3), true, 'red', 0.5));
  63. systemPlanet.push(new CialoNiebieskie('Jupiter', 1.8986e27, new Punkt(740.7426e9, 0), new Punkt(0, 13.72e3), true, 'maroon', 5));
  64. systemPlanet.push(new CialoNiebieskie('Saturn', 5.6846e26, new Punkt(1.349467375e12, 0), new Punkt(0, 10.182e3), true, 'lightblue', 5));
  65. systemPlanet.push(new CialoNiebieskie('Uran', 8.6816e25, new Punkt(2.735555035e12, 0), new Punkt(0, 7.11e3), true, 'cyan', 3));
  66. systemPlanet.push(new CialoNiebieskie('Neptun', 1.0244e26, new Punkt(4.45963e12, 0), new Punkt(0, 5.478e3), true, 'darkblue', 2));
  67. systemPlanet.push(new CialoNiebieskie('Moon', 7.347673e22, new Punkt(147.098291e9 + 0.363104e9, 0), new Punkt(0, 30.29e3 + 1.082e3), true, 'silver', 0.3));
  68.  
  69. var widoki = new Array();
  70. widoki.push(new Widok(document.getElementById('widok1'), [0, 1, 2, 3, 4, 5, 6, 7, 8], 5e12));
  71. widoki.push(new Widok(document.getElementById('widok2'), [3, 9], 0.45e9));
  72.  
  73. var doPlanety = document.getElementById('doPlanety');
  74. for(var i = 1; i < systemPlanet.length - 1; i++) {
  75.  var option = document.createElement('option');
  76.  option.text = systemPlanet[i].nazwa;
  77.  option.value = i;
  78.  doPlanety.add(option);
  79. }
  80. //doPlanety.value = systemPlanet.length - 2;
  81. doPlanety.value = 4;
  82. widoki[0].maxWart = systemPlanet[doPlanety.value].polozenie.x * 1.2;
  83. doPlanety.onchange=function() {
  84.  widoki[0].maxWart = Math.sqrt(systemPlanet[doPlanety.value].polozenie.x * systemPlanet[doPlanety.value].polozenie.x +
  85.                                systemPlanet[doPlanety.value].polozenie.y * systemPlanet[doPlanety.value].polozenie.y) * 1.2;
  86. };
  87.  
  88. var legenda = document.getElementById('legenda');
  89. legenda.innerHTML = '';
  90. for(var i = 0; i < systemPlanet.length; i++)
  91.  legenda.innerHTML = legenda.innerHTML +
  92.      '<div style="color:' + systemPlanet[i].kolor + '">' + systemPlanet[i].nazwa + '</div>';
  93.  
  94. function zmienCoIteracje(kierunek) {
  95.   if(kierunek < 0 && coIteracje > 0)
  96.     --coIteracje;
  97.   if(kierunek > 0 && coIteracje < (coIteracjeDostepne.length - 1))
  98.    ++coIteracje;
  99.   if(coIteracje == 0)
  100.     document.getElementById('coIteracjeMinus').disabled = true;
  101.   else
  102.     document.getElementById('coIteracjeMinus').disabled = false;
  103.   if(coIteracje == (coIteracjeDostepne.length - 1))
  104.     document.getElementById('coIteracjePlus').disabled = true;
  105.   else
  106.     document.getElementById('coIteracjePlus').disabled = false;
  107.   document.getElementById('coIteracje').innerHTML = coIteracjeDostepne[coIteracje];
  108. }
  109. document.getElementById('coIteracjeMinus').onclick = function() {zmienCoIteracje(-1)};
  110. document.getElementById('coIteracjePlus').onclick = function() {zmienCoIteracje(1)};
  111.  
  112. document.getElementById('pauseStart').onclick = function() {
  113.   if(chodzi) {
  114.     document.getElementById('pauseStart').innerHTML ='&#9658;';
  115.     chodzi = false;
  116.   } else {
  117.     document.getElementById('pauseStart').innerHTML ='&#9616;&nbsp;&#9612;';
  118.     chodzi = true;
  119.     animacja();
  120.   }
  121. };
  122.  
  123. document.getElementById('schowajKsiezyc').onclick = function() {
  124.   var widok2 = document.getElementById('widok2');
  125.   if(widok2.style.display) {
  126.     widok2.style.display = '';
  127.     this.innerHTML = '&lt hide Moon';
  128.   } else {
  129.     widok2.style.display = 'none';
  130.     this.innerHTML = '&gt show Moon';
  131.   }
  132. }
  133.  
  134. function resize() {
  135.   var rozmiar = Math.floor(Math.min((window.innerWidth - 300) / 2, window.innerHeight - 80));
  136.   for(var i = 0; i < widoki.length; i++) {
  137.    widoki[i].kanwa.width = rozmiar;
  138.    widoki[i].kanwa.height = rozmiar;
  139.  }
  140. };
  141.  
  142. function wyliczStanSystemu(deltaT) {
  143.  for(var i = 0; i < systemPlanet.length; i++)
  144.    if(systemPlanet[i].liczyc) {
  145.      var sumaSil = new Punkt(0, 0),
  146.          predkoscOdGrawitacji;
  147.      for(var j = 0; j < systemPlanet.length; j++)
  148.        if(i != j) {
  149.          var kierunekSily = new Punkt(0, 0), odleglosc, dzielnik,
  150.              wartoscSily, wektorSily = new Punkt(0, 0);
  151.          kierunekSily.x = systemPlanet[j].polozenie.x - systemPlanet[i].polozenie.x;
  152.          kierunekSily.y = systemPlanet[j].polozenie.y - systemPlanet[i].polozenie.y;
  153.          odleglosc = Math.sqrt(kierunekSily.x * kierunekSily.x + kierunekSily.y * kierunekSily.y);
  154.          wartoscSily = G * systemPlanet[i].masa * systemPlanet[j].masa / (odleglosc * odleglosc);
  155.          dzielnik = odleglosc / wartoscSily;
  156.          wektorSily.x = kierunekSily.x / dzielnik;
  157.          wektorSily.y = kierunekSily.y / dzielnik;
  158.          sumaSil.x += wektorSily.x;
  159.          sumaSil.y += wektorSily.y;
  160.        }
  161.      predkoscOdGrawitacji = new Punkt((sumaSil.x / systemPlanet[i].masa) * deltaT,
  162.                                       (sumaSil.y / systemPlanet[i].masa) * deltaT);
  163.      //do obliczeń pozycji weźmiemy prędkość średnią - albo nie
  164.      systemPlanet[i].przesuniecie = new Punkt((systemPlanet[i].predkosc.x + (predkoscOdGrawitacji.x / 1)) * deltaT,
  165.                                               (systemPlanet[i].predkosc.y + (predkoscOdGrawitacji.y / 1)) * deltaT);
  166.      systemPlanet[i].predkosc.x += predkoscOdGrawitacji.x;
  167.      systemPlanet[i].predkosc.y += predkoscOdGrawitacji.y;
  168.    }
  169.  //teraz poprawimy pozycję
  170.  for(var i = 0; i < systemPlanet.length; i++)
  171.    if(systemPlanet[i].liczyc) {
  172.      systemPlanet[i].polozenie.x += systemPlanet[i].przesuniecie.x;
  173.      systemPlanet[i].polozenie.y += systemPlanet[i].przesuniecie.y;
  174.    }
  175. }
  176.  
  177. function animacja() {
  178.  if(!chodzi)
  179.    return;
  180.  requestAnimFrame(animacja);
  181.  wyliczStanSystemu(krok);
  182.  czasOdPoczatku += krok;
  183.  for(var i = 1; i < coIteracjeDostepne[coIteracje]; i++) {
  184.    wyliczStanSystemu(krok);
  185.    czasOdPoczatku += krok;
  186.  }
  187.  for(var i = 0; i < widoki.length; i++) {
  188.    widoki[i].kanwa.width = widoki[i].kanwa.width;
  189.    var skala = (widoki[i].kanwa.width / 2) / widoki[i].maxWart;
  190.    var skalaSrednica = skala * 1e9;
  191.    if(skalaSrednica * systemPlanet[widoki[i].ciala[0]].promien > 30)
  192.       skalaSrednica /= skalaSrednica * systemPlanet[widoki[i].ciala[0]].promien / 30;
  193.     for(var j = 0; j < widoki[i].ciala.length; j++) {
  194.      widoki[i].kontekst.fillStyle = systemPlanet[widoki[i].ciala[j]].kolor;
  195.      widoki[i].kontekst.beginPath();
  196.      widoki[i].kontekst.arc(Math.floor((systemPlanet[widoki[i].ciala[j]].polozenie.x - systemPlanet[widoki[i].ciala[0]].polozenie.x) * skala + widoki[i].kanwa.width / 2),
  197.                             Math.floor((systemPlanet[widoki[i].ciala[j]].polozenie.y - systemPlanet[widoki[i].ciala[0]].polozenie.y) * skala + widoki[i].kanwa.width / 2),
  198.                             Math.floor(Math.max(systemPlanet[widoki[i].ciala[j]].promien * skalaSrednica, 3)), 0, Math.PI * 2, true);
  199.      widoki[i].kontekst.closePath();
  200.      widoki[i].kontekst.fill();
  201.    }
  202.  }
  203.  document.getElementById('czas').textContent = Math.floor(czasOdPoczatku / 31536000) + ' years, ' + Math.floor((czasOdPoczatku % 31536000) / 86400) + ' days';
  204. }
  205.  
  206. resize();
  207. zmienCoIteracje(0);
  208. animacja();
  209.  
  210.  
  211. };
  212. </script>
  213. </head>
  214. <body>
  215.  <canvas id="widok1" style="float:left;border: 1px solid;"></canvas>
  216.  <canvas id="widok2" style="float:left;border: 1px solid;"></canvas>
  217.  <div style="float:left;margin-left:10px;">
  218.    <button id="schowajKsiezyc" style="width:15em;">&lt hide Moon</button>
  219.   <div>&nbsp;</div>
  220.    <div>&nbsp;</div>
  221.    <div>Zoom In</div>
  222.    <select id="doPlanety"></select>
  223.    <div>&nbsp;</div>
  224.    <button id="pauseStart" style="width:5em;height:4ex">&#9616;&nbsp;&#9612;</button>
  225.    <div>&nbsp;</div>
  226.    <div>View every ... iteration:</div>
  227.    <div>
  228.      <button id="coIteracjeMinus" style="float:left;">&lt;</button>
  229.      <div id="coIteracje" style="float:left; width: 5em; text-align: center;"></div>
  230.      <button id="coIteracjePlus" style="float:left;">&gt;</button>
  231.      <div style="clear:both;"></div>
  232.    </div>
  233.    <div>&nbsp;</div>
  234.    <div>Legenda:</div>
  235.    <div id="legenda"></div>
  236.  </div>
  237.  <div style="clear:both;" id="czas"></div>
  238.  <p>Made by Robert Kopias</p>
  239. </body>
  240. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!