diff --git a/jupiter.html b/jupiter.html index e7a5733..ca1fca5 100644 --- a/jupiter.html +++ b/jupiter.html @@ -5,7 +5,6 @@ Jupiter - @@ -35,11 +34,11 @@
- logo + logo Jupiter I, II, III, IV, (XVIII)
-
+


@@ -58,7 +57,9 @@ time scale in hours per second

- This is an attempt to simulate the movement of the Galilean moons. Values calculated are approximations and values used might be wrong or inaccurate. + This is an attempt to simulate the movement of the Galilean + moons. Values calculated are approximations and values used + might be wrong or inaccurate.

Controls:
@@ -68,6 +69,6 @@ End - toggle background effect
Page Down - toggle opacity change

-
+
diff --git a/main.js b/main.js index 012e819..84fef46 100644 --- a/main.js +++ b/main.js @@ -16,7 +16,7 @@ var sat_names = [ "Ganymede", "Callisto", "Themisto" -] +]; // orbital period (s) var period = [ 152853.5232, @@ -256,9 +256,10 @@ function main(){ // calculate position and update setInterval( function (){ for(var i=0; i< sat_names.length; i++){ - xPos[i] = calculatePosition(semimajoraxis[i], period[i], SatPANG[i], 0); - yPos[i] = calculatePosition(semimajoraxis[i], period[i], SatPANG[i], 1) - *Math.cos(def); + xPos[i] = calculatePosition(semimajoraxis[i], period[i], + SatPANG[i], 0); + yPos[i] = calculatePosition(semimajoraxis[i], period[i], + SatPANG[i], 1)*Math.cos(def); // if Themisto, add an inclination of 47.48 deg if(sat_names[i]=="Themisto"){rot = rot+47.48} // apply position (with transformation) to elements @@ -272,15 +273,15 @@ function main(){ // sat orb minimum bounding box var orbitbbgroup = document.getElementById("orbits"); - orbitbbgroup.children[i].style.height = Math.abs(semimajoraxis[i]*2 * - Math.cos(def) *vs) + "px"; + orbitbbgroup.children[i].style.height = Math.abs(semimajoraxis[i]* + 2*Math.cos(def) *vs) + "px"; orbitbbgroup.children[i].style.width = semimajoraxis[i]*2 *vs + "px"; orbitbbgroup.children[i].style.left = Xo - semimajoraxis[i]*vs -1 + "px"; orbitbbgroup.children[i].style.top = Yo + (-semimajoraxis[i] + - (semimajoraxis[i]*2 - Math.abs(semimajoraxis[i]*2*Math.cos(def)))/2)*vs - - 1 + "px"; + (semimajoraxis[i]*2 - Math.abs(semimajoraxis[i]*2* + Math.cos(def)))/2)*vs -1 + "px"; if(Math.cos(def)<0){var tmprot = rot;rot += 180;} orbitbbgroup.children[i].style.webkitTransform = "rotate(" + -rot + "deg)"; @@ -289,8 +290,9 @@ function main(){ orbitbbgroup.children[i].style.transform = "rotate(" + -rot + "deg)"; if(Math.cos(def)<0){rot = tmprot;} - orbitbbgroup.children[i].style.borderRadius = Math.abs(semimajoraxis[i]*vs) + - "px / " + Math.abs(semimajoraxis[i]*Math.cos(def)*vs) + "px"; + orbitbbgroup.children[i].style.borderRadius = Math.abs( + semimajoraxis[i]*vs) + "px / " + Math.abs(semimajoraxis[i]* + Math.cos(def)*vs) + "px"; if(sat_names[i]=="Themisto"){rot = rot-47.48} diff --git a/style.css b/style.css index f65d807..f47497e 100644 --- a/style.css +++ b/style.css @@ -1,20 +1,3 @@ -.orbb { - z-index: 0; - position:absolute; - border: 1px solid #f00; - opacity: 0.1; -} -#orbits div:last-child { -} - -#orbits div:nth-last-child(2) { - background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1)); - background: -o-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1)); - background: -moz-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1)); - background: linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1)); -} - - #Jupiter { position: absolute; height: 20px; @@ -73,6 +56,21 @@ left: 7px; top: 4px; } + +.orbb { + z-index: 0; + position:absolute; + border: 1px solid #f00; + opacity: 0.1; +} +#orbits div:nth-last-child(2) { + background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1)); + background: -o-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1)); + background: -moz-linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1)); + background: linear-gradient(rgba(0,0,0,0), rgba(255,0,0,1)); +} + + #ref{ position: absolute; height: 2px; @@ -129,7 +127,7 @@ header > span { left: 10px; } -#main { +main { z-index: 100; position: absolute; top: 525px; @@ -158,10 +156,10 @@ input { border: 0; border-left: 3px solid #12589d; } -#main .in { +main .in { display: inline-block; } -#main >:nth-child(2) { +main >:nth-child(2) { line-height:21.5px; }