JSFiddle - React, Tailwind, and code Playground

by mLuby

HTML

<body>
<center>
<h1>Gravity</h1>
Zoom: <input type="text" value="1" id="scaleMultiplier">
<input type="button" id="pause" value="Pause">
<input type="button" id="play" value="Play">
<div></div>
<canvas id="canvas" width="1280" height="768"></canvas>
<div id="debug"></div>
</center>
</body>

CSS

body {
    background: #000000;
    color: #FFFFFF;
}
canvas {
    border: 3px #FFFFFF solid;
}
table {
    border: 1px #FFFFFF solid;
    width: 100%;
}

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var objects = new Array();

// Simulation settings:
var runSpeed = 40;   		// Nummber of milliseconds between each iteration.
var hyperSpeed = 250; 		// How many times to run simulation per iteration.			WARNING: High values lead to lag.
var hyperRender = true;		// True: render each iteration, False: render each loop. 	ONLY WORKS with hyperWarp on and at regular runSpeed (aka slower).
var timeStep = 5e-4;		// Nummerical time step size, which passes each loop.
var scaleFactor;			// Multiplied by data in rendering to adjust zoom level.
var path = true;  			// Draw path

var renderId = 1; 			// ID of Thing to put at center of frame.

// Global variables:
var G;
var N;
var scaleDefault;
var width = canvas.width;
var height = canvas.height;
var run;
var running = true;
var zoom = 0.5;
var n = 0;					// Number of simulated time steps.

// Main program:
main();

function main()
{
    SunEarthMoon(); 				// Initialize begin conditions.
	N = objects.length;				// This value is often calculated for loops, calculating it once should reduce the number of calculations.
	BarycenterFoR();				// Subtract the velocity of CoM from all objects.
	scaleEstimate(); 				// Estimate default scale by longest distance to origin.
	context.fillStyle = "black";
	context.fillRect(0, 0, width, height);

	document.getElementById('scaleMultiplier').onchange = function() // Detecting entered value in zoom field.
	{
		var scaleMultiply = parseFloat(document.getElementById('scaleMultiplier').value);
		if (!isNaN(scaleMultiply) && scaleMultiply > 0) // Checking if it is a (positive) number.
		{
			zoom = scaleMultiply / zoom;
			scaleFactor = scaleDefault * scaleMultiply; // Scale the default scale factor by entered value. 
			//context.clearRect(0, 0, width, height); 	// Clear canvas to remove old path ar old scale (I haven't been able to scale this as well).
			context.drawImage(canvas, (1 - zoom) * width/2, (1 -...