JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="800" height="600"></canvas>
<div style="position:absolute; top:10px;left:820px; width:100px">
    <input type="button" id="button" value="Train" OnClick="train()" />
    <input type="button" id="button" value="New Set" OnClick="newSet()" />
    <input type="button" id="button" value="Scramble weights" OnClick="scramble()" />
    <div id="inputBoxes"></div>
    <div id="nowGridString"></div>
    <input type="button" id="button" value="Fire" OnClick="fire()" />
    <div id="result">
        <form id="values">Radius:
            <input type="text" id="rr" />
            <br />Width:
            <input type="text" id="ww" />
            <br />Distance:
            <input type="text" id="dd" />
            <input type="button" id="button" value="Set values" OnClick="changeParams()" />
        </form>
    </div>
</div>

JavaScript

function randomCoord(array, w, r, orig, neg){
	var i=Math.random()*neg;
	var ii=r+(Math.random()*2-1)*w;
	array.push([Math.cos(Math.PI*i)*ii+orig[0] , Math.sin(Math.PI*i)*ii+orig[1]]);
}

function newSet(){
	coordinatesArray=[];
	uppermoon=[];
	lowermoon=[];
	for (var i=0; i<1000; i++){
		randomCoord(uppermoon, fw, fr,[0,0] , 1)
	}
	for (var i=0; i<1000; i++){
		randomCoord(lowermoon, fw, fr,[fr,-fd] , -1)
	}
	coordinatesArray=uppermoon.concat(lowermoon);
	printGrid();
}

function printGrid(){
	ctx.fillStyle="white";
	ctx.fillRect(0,0, 800, 600);
	ctx.beginPath();
	ctx.moveTo(0, 300);
	ctx.lineTo(800, 300);
	ctx.strokeStyle="black";
	ctx.stroke();
	ctx.beginPath();
	ctx.moveTo(400, 0);
	ctx.lineTo(400, 600);
	ctx.strokeStyle="black";
	ctx.stroke();
	ctx.fillStyle="black";
	for (var i=0; i<coordinatesArray.length; i++){
		ctx.fillRect(400+coordinatesArray[i][0]*10-1,300-coordinatesArray[i][1]*10-1,2,2);
	}
}

function randomN(){
	tempV=(Math.random()-.5);
	return tempV;
}

function RGB2HTML(red, green, blue)
{
    var decColor =0x1000000+ blue + 0x100 * green + 0x10000 *red ;
    return '#'+decColor.toString(16).substr(1);
}

function Neuron(){
	this.threshold=0.0;
	this.numberOfInputs=0;
	this.inputs=new Array();
	this.weights=new Array();
	this.origLearnRate=.05;
	this.learningRate=.05;
	
	this.setNumInputs=function(t){
		this.numberOfInputs=t+1;	//remembering extra input for bias
		this.inputs=new Array(t+1);
		this.inputs[t]=4;
		this.weights=new Array(t+1);
		for (var i=0; i<t+1; i++){
			this.weights[i]=randomN();
		}
	}
	
	this.fire=function(){
		var sum=0;
		for (var i in this.inputs){
			sum+=this.inputs[i]*this.weights[i];
		}
		sum=2/(1+Math.pow(2.718,-sum))-1;
		return sum;
	}
	
	this.setInput=function(ind, t){
		if (ind<this.numberOfInputs){
			this.inputs[ind]=t;
		}
	}
	
	this.loadInputWithStr=function(inString){
		tString=inString.split(",");
		for (var i=0;i<this.numberOfInputs-1;i++){
			this.setInput(i,...