JSFiddle - React, Tailwind, and code Playground

by Veryape

HTML

<html>
<head>
	<title></title>
	<meta name="author" content="Veryape"/>
	<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/> 
</head>
<body>
<div style="display:flex;">
<div>
<fieldset style="height:120px;">
	<legend>complete Energy <input type="text" id="complete_energy" size="7" readonly/> Joule</legend>
	<fieldset style="width:335px;">
	<legend>Sphere 1</legend>
	<span>pot Energy <input type="text" id="pot_energy_K1" size="7" readonly/> Joule
	<span style="margin-left:10px">kin Energy <input type="text" id="kin_energy_K1" size="7" readonly/> Joule
	</fieldset>

	<fieldset style="width:335px;">
	<legend>Sphere 2</legend>
	<span>pot Energy <input type="text" id="pot_energy_K2" size="7" readonly/> Joule</span>
	<span style="margin-left:10px">kin Energy <input type="text" id="kin_energy_K2" size="7" readonly/> Joule</span>
	</fieldset>
</fieldset>
</div>
<div>
<fieldset style="height:120px;">
<legend>
	<button id="Set" onclick="Set ();">Set</button> 
	<button onclick="scene.start (); document.getElementById('Set').disabled=true;">Start</button> 
	<button onclick="scene.cancel ();document.getElementById('Set').disabled=false;">Stop</button> 
</legend>
	<fieldset>
	<legend>Sphere 1</legend>
	mass <input type="text" size="2" id="mass_K1" value="1"/> kg | 
	rod length <input type="text" size="2" id="length_K1" value="1"/> m | 
	&phi; <input type="text" size="8" id="phi_K1" value="0.78539816339744830961566084581988"/> rad | 
	&omega; <input type="text" size="4" id="omega_K1" value="0"/> rad/s | 
	radius <input type="text" size="4" id="radius_K1" value="0.1"/> m
	</fieldset>
	<fieldset>
	<legend>Sphere 2</legend>
	mass <input type="text" size="2" id="mass_K2" value="1"/> kg | 
	rod length <input type="text" size="2" id="length_K2" value="1"/> m | 
	&phi; <input type="text" size="8" id="phi_K2" value="1.5707963267948966192313216916398"/> rad | 
	&omega; <input type="text" size="4" id="omega_K2" value="-6"/> rad/s | 
	radius <input type="text" size="4"...

CSS

body {font-family:Arial; font-size:10px;}
	fieldset {margin:2px;}
	div {margin:2px;}

JavaScript

"use strict";

function vectorComponents ()
	{
	this.x=null;
	this.y=null;
	this.t=null;
	this.r=null;
	this.value=null;
	this.value2=null;
	}
	
vectorComponents.prototype.calc_OutOfXY=function (phi)
	{
	const sinPhi=Math.sin(phi), cosPhi=Math.cos (phi);
	this.t=this.x*cosPhi-this.y*sinPhi;
	this.r=this.x*sinPhi+this.y*cosPhi;
	this.value2=this.x*this.x+this.y*this.y;
	this.value=Math.sqrt (this.value2);
	}

function Sphere (mass,length,phi,omega,radius,chainParent)
	{
	Sphere.prototype.instanceCounter++;
	this.chainParent=chainParent;
	this.radius=radius;
	this.mass=mass;
	this.length=length;
	this.phi=phi;
	this.omega=omega;
	this.alpha=null;
	this.potEnergy=null;
	this.kinEnergy=null;
	this.x=null;
	this.y=null;
	this.px=null;
	this.py=null;
	this.v=new vectorComponents ();
	this.a=new vectorComponents ();
	
	this.output={
		kinEnergy:document.getElementById("kin_energy_K"+this.instanceCounter),
		potEnergy:document.getElementById("pot_energy_K"+this.instanceCounter)};
	}
	
Sphere.prototype.calc_Quantities=function ()
	{
	const 
		cP=this.chainParent,
		sinPhi=Math.sin(this.phi),
		cosPhi=Math.cos(this.phi),
		length=this.length,
		omega=this.omega,
		omega2=omega*omega,
		v=this.v, a=this.a;
		
	var x=length*sinPhi,
	    y=length*cosPhi;
	
	v.x=length*cosPhi*omega;
	v.y=length*sinPhi*omega;
	
	a.x=length*(-sinPhi*omega2+cosPhi*this.alpha);
	a.y=length*(-cosPhi*omega2-sinPhi*this.alpha);
	if (cP)
		{
		x+=cP.x;
		y+=cP.y;
		v.x+=cP.v.x;
		v.y+=cP.v.y;
		a.x+=cP.a.x;
		a.y+=cP.a.y;	
		}
		
	this.x=x;
	this.y=y;
	this.px=x*PpM;
	this.py=y*PpM;
	
	v.calc_OutOfXY (this.phi);
	a.calc_OutOfXY (this.phi);
	
	this.output.potEnergy.value=this.potEnergy=this.mass*g*-y;
	this.output.kinEnergy.value=this.kinEnergy=this.mass*v.value2*0.5;
	}
	
Sphere.prototype.draw=function ()
	{
	const cP=this.chainParent;
	view.beginPath ();
	view.strokeWidth=Math.round (rR*PpM*2);
	if (cP) view.moveTo (cP.px,cP.py);
	else view.moveTo (0,0);
	view.lineTo (this.px,this.py);
	view.stroke...