JSFiddle - React, Tailwind, and code Playground

by mLuby

HTML

<body>
<center>
<h1>Gravity</h1>
Zoom: <input type="text" id="scaleMultiplier">
<input type="button" id="pause" value="Pause">
<input type="button" id="play" value="Play">
<div></div>
<canvas id="canvas" width="1000" height="625"></canvas>
</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 = 50;   		// Nummber of milliseconds between each iteration.
var hyperSpeed = 50; 		// 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 = 8e-2;			// 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 collision = false;

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 = 1;

// Main program:
main();

function main()
{
    stableySystem(); 				// Initialize begin conditions.
	N = objects.length;				// This value is often calculated for loops, calculating it once should reduce the number of calculations.
	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 - zoom) * height/2, width * zoom, height * zoom);
			if (zoom < 1) 
			{
				context.fillStyle =...