JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<section id="controls-wrapper">
  <label>Mass of Added Planet(in solar masses)</label>
  <li><input type="text" name="field" class="textbox" id = "addedMasses"/>
  </li>
  <button id="reset-button">Reset</button>
</section>
<canvas id="canvas"></canvas>

JavaScript

const names = [ "Jupiter", "Saturn", "Uranus", "Neptune", "Ceres", "Nemesis","Dephanov","Podaohiri","Xeviea","Noluna","Hoibos","Yenope","Straditov","Zoenov","Lolla","Sapus","Kepler","Pasteur","Boltzmann","Gezeacarro","Xagricury","Vulmone","Ochion","Liavis","Roitis","Galoria","Phucohiri"]
  
var addedmasses = document.getElementById("addedMasses")
  class nBodyProblem {
    constructor(params) {
      this.g = params.g;
      this.dt = params.dt;
      this.softeningConstant = params.softeningConstant;
  
      this.masses = params.masses;
    }
  
    updatePositionVectors() {
      const massesLen = this.masses.length;
  
      for (let i = 0; i < massesLen; i++) {
        const massI = this.masses[i];
  
        massI.x += massI.vx * this.dt;
        massI.y += massI.vy * this.dt;
        massI.z += massI.vz * this.dt;
      }
  
      return this;
    }
  
    updateVelocityVectors() {
      const massesLen = this.masses.length;
  
      for (let i = 0; i < massesLen; i++) {
        const massI = this.masses[i];
  
        massI.vx += massI.ax * this.dt;
        massI.vy += massI.ay * this.dt;
        massI.vz += massI.az * this.dt;
      }
    }
  
    updateAccelerationVectors() {
      const massesLen = this.masses.length;
  
      for (let i = 0; i < massesLen; i++) {
        let ax = 0;
        let ay = 0;
        let az = 0;
  
        const massI = this.masses[i];
  
        for (let j = 0; j < massesLen; j++) {
          if (i !== j) {
            const massJ = this.masses[j];
  
            const dx = massJ.x - massI.x;
            const dy = massJ.y - massI.y;
            const dz = massJ.z - massI.z;
  
            const distSq = dx * dx + dy * dy + dz * dz;
  
            const f =
              (this.g * massJ.m) /
              (distSq * Math.sqrt(distSq + this.softeningConstant));
  
            ax += dx * f;
            ay += dy * f;
            az += dz * f;
          }
        }
  
        massI.ax = ax;
        massI.ay = ay;
       ...