Space is hard.

HTML

<p id="debug" class="debug">Debug</p>
<canvas id="canvas">1997 is calling, they would like their browser back.</canvas>

CSS

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

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

.debug {
  position: absolute;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  bottom: 30px;
  left: 30px;
  margin: 0;
  max-width: 400px;
  max-height: 100%;
}

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
  // Sim
  "simUseLength": true, // Run for x steps or infinitly (will eventually cause lag)
  "simLength": 3000, // How many steps should be taken
  "simPause": false, // Continue to next step or nah
  "simStartVal": null, // Stores step start value
  // Scales
  "scaleAU": 149597870700, // Astronomical Unit (meters)
  "scaleAUDivision": 250,
  "scaleDistance": 1, // Divides planet positions by this amount (may cause inaccurate simulation)
  "scaleMass": 10, // Multiply all planet masses by this amount
  "scaleMassPower": 24, // Multiply all planet masses by this power (uncertainty_value**24 as per NASA's data)
  "scaleVelocity": 1000 // Multiply all the planet velocities by this amount
}

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 in the init() loop.
  */
  {
    "Name": "Sun",
    "Pos": [0, 0], // x, y, measured in AU. 1 being earth. 0 being sun. Check jpl link.
    "Radius": 10, // All set to the same size
    "Velocity": [0, 0], // X, Y velocities 
    "Mass": 1988500, // Mass
    "Color": [255, 255, 0]
  },
  {
    "Name": "Mercury",
    "Pos": [0.4, 0],
    "Radius": 10,
    "Velocity": [0, 47.4],
    "Mass": 0.330,
    "Color": [255, 0, 0]
  },
  {
    "Name": "Venus",
    "Pos": [0.7, 0],
    "Radius": 10,
    "Velocity": [0, 35],
    "Mass": 4.87,
    "Color": [255, 170, 0]
  },
  {
    "Name": "Earth",
    "Pos": [1, 0],
    "Radius": 10,
    "Velocity": [0, 29.8],
    "Mass":...