Skip to content
Browse files

Set z-index of moon images appropriately

if they're on the far side of the planet.
  • Loading branch information...
1 parent c980125 commit 24511cd8a0f8956808d27c494af2c98451c27fac @akkana committed Mar 2, 2013
Showing with 45 additions and 10 deletions.
  1. +20 −4 jsjupiter/index.html
  2. +25 −6 jsjupiter/jupiter.js
View
24 jsjupiter/index.html
@@ -12,7 +12,9 @@
}
/* All images and labels inside the jupframe are absolutely positioned */
-#jupframe img, #jupframe span { position: absolute; visibility: hidden; }
+#jupframe img, #jupframe span {
+ position: absolute; visibility: hidden; z-index: 50
+}
#jupframe span.moonlabel { color: white; top: .3em; }
@@ -188,6 +190,10 @@
img.setAttribute("src", "borderedmoon.png");
var x = moondata.moonx * jupRadius + halfwidth;
placeImage(img, x, moondata.moony * jupRadius + halfheight);
+ if (moondata.farside)
+ img.style.zIndex = 1;
+ else
+ img.style.zIndex = 100;
// Place the label too:
if (label) {
@@ -215,8 +221,9 @@
It also shows the approximate position of Jupiter's "great red spot" (GRS).
<p>
-This is an experiment on doing graphics in HTML/CSS/Javascript,
-re-implementing my <a href="/jupiter.html">Java Jupiter</a> page without Java.
+This is a re-implementation of my older
+<a href="/jupiter.html">Java Jupiter</a> page
+using HTML, CSS and Javascript (and nicer graphics).
<p>
North is up.
@@ -286,11 +293,20 @@
<script type="text/javascript">
/* Call the code that calculates the positions, defined in jupiter.js. */
var jup = new Jupiter();
-var date = new Date();
+//var date = new Date();
+// Europa should be visible at 19:51 but gone at 19:59; back at 20:06.
+//var date = new Date('Mon Mar 10 2013 19:53:00 GMT-0700 (PDT)');
+//var date = new Date('Mon Mar 10 2013 19:57:00 GMT-0700 (PDT)');
+var date = new Date('Mon Mar 10 2013 20:02:00 GMT-0700 (PDT)');
drawJupiter(jup, date);
</script>
<hr>
+I use this app on Android with the help of my
+<a href="http://shallowsky.com/software/android/WebClient/">WebClient</a>
+wrapper app.
+<br>
+For older Java phones,
Miguel Moreto has adapted this code for a neat mobile phone app called
<a href="http://code.google.com/p/mobilejupiter/">Mobile Jupiter</a>.
<p>
View
31 jsjupiter/jupiter.js
@@ -191,24 +191,42 @@ function Jupiter()
moondata.moonx = r * Math.sin(moonAngles[whichmoon]);
moondata.moony = r * Math.cos(moonAngles[whichmoon]) * Math.sin(De);
+ s = "moon " + whichmoon;
+ s += "\nDist = " + r;
+ s += "\nmoonAngle = " + moonAngles[whichmoon];
+
// See whether the moon is on the far side of the planet:
if (moonAngles[whichmoon] > Math.PI * .5
&& moonAngles[whichmoon] < Math.PI * 1.5)
{
+ s += "\nFar side of the planet";
+ moondata.farside = true;
+
// Is the moon blocked by the planet, so it's invisible?
if (moondata.moonx < 1. && moondata.moonx > -1.)
{
moondata.moonx = moondata.moony = NaN;
+ s += "\nBlocked by the planet";
}
-
- // if not, then figure out whether the planet's shadow
- // might be eclipsing the moon.
+ else {
+ // if not, then figure out whether the planet's shadow
+ // might be eclipsing the moon.
+ // Calculate the moon-planet-sun angle:
+ var moonSunAngle = moonAngles[whichmoon] - psi;
+ s += "\nMSA = " + moonSunAngle;
+ moondata.eclipse = (1. < r * Math.sin(moonSunAngle))
+ if (moondata.eclipse) {
+ s += "Eclipse of moon " + whichmoon + "!";
+ }
+ }
}
- // Calculate shadows.
- // Moon shadows on the planet can only happen if the moon
- // is on the near side of the planet.
+ // Since the moon is on the near side, check for shadows
+ // cast by the moon on the planet.
else {
+ s += "\nNear side of the planet";
+ moondata.farside = false;
+
// Calculate the moon-planet-sun angle:
var moonSunAngle = moonAngles[whichmoon] - psi;
@@ -222,6 +240,7 @@ function Jupiter()
moondata.shadowx = moondata.shadowy = NaN;
}
+ //if (whichmoon == 1) alert(s);
return moondata;
}
this.getMoonXYData = getMoonXYData

0 comments on commit 24511cd

Please sign in to comment.
Something went wrong with that request. Please try again.