Space is hard. Getting there.

HTML

<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta charset="utf-8" />
    <title>WebSpace</title>
  </head>

  <body>

    <div id="controlbox" class="bg p1 bar w50 abs bottom">
      <button onclick="updateConfig('simPause')">Pause</button>
      <button onclick="updateConfig('labels')">Toggle Labels</button>
      <button onclick="updateConfig('drawVelocities')">Toggle Velocities</button>
      <button onclick="updateConfig('showDebug')">Toggle Debug</button>
      <button onclick="updateConfig('centerDot')">Toggle Center</button>
    </div>


    <p id="debug" style="position:absolute; padding:10px; background:rgba(0,0,0,0.5); bottom:30px; left: 30px; margin:0; max-width: 400px; max-height: 100%;">Debug</p>
    <canvas id="canvas">1997 is calling, they would like their browser back. Please upgrade your browser to one made has benn made in the last 10 years, as yours does not support canvas.</canvas>
    <script type="text/javascript">
      window.onload = init();

    </script>
  </body>

</html>

CSS

body {
  background: #333;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  color: white;
}

body,
html {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.bar {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.bg {
  background: rgba(0, 0, 0, 0.5);
}

.p1 {
  padding: 10px;
}

.w50 {
  width: 50%;
}

.abs {
  position: absolute;
}

.bottom {
  bottom: 10px;
}

JavaScript

config = {
  // UI
  "labels": true, // Toggle lables on or off
  "labelOffsetX": 10, // Offsets the labels by X amount from the planet it's labelling
  "labelOffsetY": 20, // Offsets the labels by Y amount from the planet it's labelling
  "drawVelocities": true, // Draws the position of the planets velocity
  "centerDot": true, // Places a dot in the very center of the screen to ensure trajectories are correct
  "centerDotSize": 3, // Size of the center dot
  "centerDorColor": "red", // Color of center dot
  // Sim
  "simUseLength": false, // Run for x steps or infinitly (will eventually cause lag)
  "simLength": 3000, // 30,000 decent runtime
  "simPause": false, // Continue to next step or nah
  "simStartVal": null, // Stores step start value
  // Scales
  "useGlobalScale": false, // Scales positions, masses, velocities, and gravity 
  "globalScale": 100,
  "scalePosition": 1, // Divides planet positions by this amount (may cause inaccurate simulation)
  "scaleMass": 10, // Multiply all planet masses by this amount
  "scaleVelocity": 1000, // Multiply all the planet velocities by this amount
  "scaleGravity": 1, // The strength of gravity, modifies the power of newtons gravitional equation
  // Debug
  "showDebug": true, // Should the debug be displayed in the draw() function?
  "showID": 2, // Which ID in the array we should show the debug information for
  "countdown": true, // Should there be a countdown before simulation begins? Useful for seeing initial planet positions
  "countdownTimer": 3 // How long from placing the planets should we wait before simulating, in seconds.
}

planets = [
  /*
      Data used from 
          https://nssdc.gsfc.nasa.gov/planetary/factsheet/sunfact.html
          https://nssdc.gsfc.nasa.gov/planetary/factsheet/
          https://www.jpl.nasa.gov/edu/pdfs/ssbeads_answerkey.pdf
      powers can be included with the config scales, so I don't have to keep adding them all in across the entire config,
      and can just add them...