examples/sci/solarsystem.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MathBox - Solar System</title>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/three@0.137.0/build/three.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/three@0.137.0/examples/js/controls/OrbitControls.js"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/dat.gui@latest/build/dat.gui.min.js"></script>
    <!--
       - a minified version mathbox.min.js is also available;
       - recommend using a specific version (not @latest) in public sites
    -->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/mathbox@latest/build/bundle/mathbox.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/mathbox@latest/build/mathbox.css"
    />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
  </head>
  <body>
    <script>
      // Dat GUI
      var gui = new dat.GUI();
      var props = {
        speed: 1,
      };
      gui.add(props, "speed").min(-5).max(5).step(1);

      // Unix timestamp in seconds to (floating point) day number
      var zulu = +new Date("1999-12-31T00:00Z") / 1000;
      var dayNumber = function (t) {
        return (t - zulu) / (60 * 60 * 24);
      };

      // Orbital elements
      // Source: http://www.stjarnhimlen.se/comp/ppcomp.html
      var orbits = {
        Sun: function (d) {
          return {
            N: 0,
            i: 0,
            w: 0,
            a: 0,
            e: 0,
            M: 0,
          };
        },
        Mercury: function (d) {
          return {
            N: 48.3313 + 3.24587e-5 * d,
            i: 7.0047 + 5.0e-8 * d,
            w: 29.1241 + 1.01444e-5 * d,
            a: 0.387098,
            e: 0.205635 + 5.59e-10 * d,
            M: 168.6562 + 4.0923344368 * d,
          };
        },
        Venus: function (d) {
          return {
            N: 76.6799 + 2.4659e-5 * d,
            i: 3.3946 + 2.75e-8 * d,
            w: 54.891 + 1.38374e-5 * d,
            a: 0.72333,
            e: 0.006773 - 1.302e-9 * d,
            M: 48.0052 + 1.6021302244 * d,
          };
        },
        Earth: function (d) {
          return {
            N: 0.0,
            i: 0.0,
            w: 282.9404 + 4.70935e-5 * d,
            a: 1.0,
            e: 0.016709 - 1.151e-9 * d,
            M: 356.047 + 0.9856002585 * d,
          };
        },
        Mars: function (d) {
          return {
            N: 49.5574 + 2.11081e-5 * d,
            i: 1.8497 - 1.78e-8 * d,
            w: 286.5016 + 2.92961e-5 * d,
            a: 1.523688,
            e: 0.093405 + 2.516e-9 * d,
            M: 18.6021 + 0.5240207766 * d,
          };
        },
        Jupiter: function (d) {
          return {
            N: 100.4542 + 2.76854e-5 * d,
            i: 1.303 - 1.557e-7 * d,
            w: 273.8777 + 1.64505e-5 * d,
            a: 5.20256,
            e: 0.048498 + 4.469e-9 * d,
            M: 19.895 + 0.0830853001 * d,
          };
        },
        Saturn: function (d) {
          return {
            N: 113.6634 + 2.3898e-5 * d,
            i: 2.4886 - 1.081e-7 * d,
            w: 339.3939 + 2.97661e-5 * d,
            a: 9.55475,
            e: 0.055546 - 9.499e-9 * d,
            M: 316.967 + 0.0334442282 * d,
          };
        },
        Uranus: function (d) {
          return {
            N: 74.0005 + 1.3978e-5 * d,
            i: 0.7733 + 1.9e-8 * d,
            w: 96.6612 + 3.0565e-5 * d,
            a: 19.18171 - 1.55e-8 * d,
            e: 0.047318 + 7.45e-9 * d,
            M: 142.5905 + 0.011725806 * d,
          };
        },
        Neptune: function (d) {
          return {
            N: 131.7806 + 3.0173e-5 * d,
            i: 1.77 - 2.55e-7 * d,
            w: 272.8461 - 6.027e-6 * d,
            a: 30.05826 + 3.313e-8 * d,
            e: 0.008606 + 2.15e-9 * d,
            M: 260.2471 + 0.005995147 * d,
          };
        },
      };

      // Ecliptic heliocentric (degrees)
      // (does not include perturbations for Jupiter/Saturn/Uranus)
      var dpr = 180 / MathBox.π;
      var sin = function (deg) {
        return Math.sin(deg / dpr);
      };
      var cos = function (deg) {
        return Math.cos(deg / dpr);
      };
      var atan2 = function (y, x) {
        return Math.atan2(y, x) * dpr;
      };
      var sqrt = Math.sqrt;

      // Position iteration
      var iterate = function (E, M, e) {
        return E - (E - e * dpr * sin(E) - M) / (1 - e * cos(E));
      };

      // Emit planet position
      var tt = 0;
      var planet = function (emit, key, d) {
        var orbit = orbits[key];
        var p = orbit(d);

        var E = p.M + p.e * dpr * sin(p.M) * (1 + p.e * cos(p.M));

        E = iterate(E, p.M, p.e);
        E = iterate(E, p.M, p.e);
        E = iterate(E, p.M, p.e);

        var xv = p.a * (cos(E) - p.e);
        var yv = p.a * (sqrt(1.0 - p.e * p.e) * sin(E));
        var v = atan2(yv, xv);
        var r = sqrt(xv * xv + yv * yv);

        var xh =
          r * (cos(p.N) * cos(v + p.w) - sin(p.N) * sin(v + p.w) * cos(p.i));
        var yh =
          r * (sin(p.N) * cos(v + p.w) + cos(p.N) * sin(v + p.w) * cos(p.i));
        var zh = r * (sin(v + p.w) * sin(p.i));

        emit(xh, yh, zh);
      };

      // Calculate orbital periods
      var periods = {};
      for (key in orbits) {
        periods[key] = Math.pow(orbits[key](0).a, 1.5);
      }

      // Load mathbox with camera controls
      var mathbox = MathBox.mathBox({
        plugins: ["core", "controls", "cursor"],
        controls: {
          klass: THREE.OrbitControls,
        },
        camera: {
          far: 1000,
        },
      });

      mathbox.three.camera.position.set(0, 1, 3);

      // Set scale
      mathbox.set({
        scale: 720,
      });

      // Absolute time w/ controlled time travel (1 second => 1 day)
      var clock = mathbox.clock(
        {},
        {
          speed: function () {
            var sign = props.speed > 0 ? 1 : props.speed < 0 ? -1 : 0;
            var speed = sign * Math.pow(10, Math.abs(props.speed) - 1) * 86400;
            return speed;
          },
        }
      );
      var now = clock.now();

      // Prepare labels and colors
      var view = now.transform({ rotation: [-MathBox.π / 2, 0, 0] });
      var names = [
        "Sun",
        "Mercury",
        "Venus",
        "Earth",
        "Mars",
        "Jupiter",
        "Saturn",
        "Uranus",
        "Neptune",
      ];
      var colors = [
        new THREE.Color("#ffb600"),
        new THREE.Color("#ccaa72"),
        new THREE.Color("#ffe9ba"),
        new THREE.Color("#67c8ff"),
        new THREE.Color("#f87f50"),
        new THREE.Color("#cccbb7"),
        new THREE.Color("#e6db7c"),
        new THREE.Color("#c4e7e9"),
        new THREE.Color("#8eb9f3"),
      ];

      // 360 degree orbit
      view
        .matrix({
          width: 256,
          height: names.length,
          channels: 3,
          expr: function (emit, i, j, t) {
            var key = names[j];
            planet(emit, key, dayNumber(t) - (i / 256) * 366 * periods[key]);
          },
        })
        .matrix({
          width: 1,
          height: names.length,
          channels: 4,
          expr: function (emit, i, j) {
            emit(colors[j].r * 0.5, colors[j].g * 0.5, colors[j].b * 0.5, 1);
          },
        })
        .line({
          color: "#ffffff",
          points: "<<",
          colors: "<",
          width: 3,
          depth: 0.5,
        });

      // up to 1 (earth) year in the past till now
      view
        .matrix({
          width: 128,
          height: names.length,
          channels: 3,
          expr: function (emit, i, j, t) {
            var key = names[j];
            planet(
              emit,
              key,
              dayNumber(t) - (365 * Math.min(1, periods[key]) * i) / 128
            );
          },
        })
        .matrix({
          width: 128,
          height: names.length,
          channels: 4,
          expr: function (emit, i, j) {
            var key = names[j];
            emit(
              colors[j].r,
              colors[j].g,
              colors[j].b,
              1 - (i / 128) * Math.min(1, periods[key])
            );
          },
        })
        .line({
          color: "#ffffff",
          points: "<<",
          colors: "<",
          width: 5,
          depth: 0.5,
          zBias: 20,
        });

      // Current position
      view
        .array({
          width: names.length,
          channels: 3,
          expr: function (emit, i, t) {
            var key = names[i];
            planet(emit, key, dayNumber(t));
          },
        })
        .array({
          id: "colors",
          width: names.length,
          channels: 4,
          expr: function (emit, i) {
            emit(colors[i].r, colors[i].g, colors[i].b, 1);
          },
        })
        .point({
          color: "#ffffff",
          points: "<<",
          colors: "<",
          size: 15,
          depth: 0.5,
          zBias: 50,
        })
        .format({
          data: names,
        })
        .label({
          color: "#ffffff",
          points: "<<",
          colors: "<",
          background: "#000000",
          depth: 0.5,
          zIndex: 1,
        });

      // Date
      view
        .layer()
        .array({
          width: 1,
          data: [0, -0.9, 0],
        })
        .format({
          expr: function (x, y, z, w, i, j, k, l, t) {
            var d = new Date(t * 1000);
            return [d.getFullYear(), d.getMonth() + 1, d.getDate()].join("/");
          },
        })
        .label({
          color: "#ffffff",
          background: "#000000",
          zIndex: 2,
        });
    </script>
  </body>
</html>