var w,h; var c,ctx; var numneurodes,numsynapses; var neurodes=[]; var synapses=[]; var neurodesize; var input1,input2; var inputopt1,inputopt2; var itcountopt; var output; var target; var margin; var doutsum; var dhiddensum; var itcount; var t; var training; const instruct="This neural net learns how to calculate the boolean exclusive OR function. To do the simulation you first have to choose the inputs, generate weights, choose the iteration count and then train the net. The higher the iteration count, the more precise the net will be."; function neurode(x,y,size,sum) { this.x=x; this.y=y; this.sum=sum; this.size=size; } function synapse(x1,y1,x2,y2,w) { this.x1=x1; this.y1=y1; this.x2=x2; this.y2=y2; this.w=w; } window.addEventListener('load', function() { init(); setInterval(draw,15); }); function init() { c=document.querySelector("canvas"); ctx=c.getContext('2d'); c.width=window.innerWidth; c.height=window.innerHeight; w=c.width; h=c.height; numneurodes=6; neurodes=new Array(numneurodes); numsynapses=9; synapses=new Array(numsynapses); neurodesize=h*0.06; initNeurodes(); initSynapses(); margin=0; inputopt1=document.getElementById("bin_input1"); inputopt2=document.getElementById("bin_input2"); itcountopt=document.getElementById("iteration_count"); t=0; input1=0; input2=0; target=1; output=0; itcount=10; training=false; inputopt1.onchange = function () { input1 = parseInt(inputopt1.options[inputopt1.selectedIndex].value); target=input1^input2; } inputopt2.onchange = function () { input2 = parseInt(inputopt2.options[inputopt2.selectedIndex].value); target=input1^input2; } itcountopt.onchange = function() { itcount = parseInt(itcountopt[itcountopt.selectedIndex].value); } } function initNeurodes() { // leftmost layer(input) neurodes[0]=new neurode(100,h/2-neurodesize-25,neurodesize,0); neurodes[1]=new neurode(100, h/2+2*neurodesize-25,neurodesize,0); //middle layer neurodes[2]=new neurode(w/2,h/2-3*neurodesize-25,neurodesize,0); neurodes[3]=new neurode(w/2,h/2+0.5*neurodesize-25, neurodesize,0); neurodes[4]=new neurode(w/2,h/2+4*neurodesize-25,neurodesize,0); // output neurode neurodes[5]=new neurode(w-100,h/2+0.5*neurodesize-25,neurodesize,0); } function initSynapses() { // synapses connecting first input neurode with hidden layer synapses[0]=new synapse(neurodes[0].x,neurodes[0].y, neurodes[2].x,neurodes[2].y,0); synapses[1]=new synapse(neurodes[0].x,neurodes[0].y,neurodes[3].x,neurodes[3].y,0); synapses[2]=new synapse(neurodes[0].x,neurodes[0].y,neurodes[4].x,neurodes[4].y,0); // synapses connecting second input neurode with hidden layer synapses[3]=new synapse(neurodes[1].x,neurodes[1].y,neurodes[2].x,neurodes[2].y,0); synapses[4]=new synapse(neurodes[1].x,neurodes[1].y,neurodes[3].x,neurodes[3].y,0); synapses[5]=new synapse(neurodes[1].x,neurodes[1].y,neurodes[4].x,neurodes[4].y,0); // synapses connecting hidden layer with output neurode synapses[6]=new synapse(neurodes[2].x,neurodes[2].y,neurodes[5].x,neurodes[5].y,0); synapses[7]=new synapse(neurodes[3].x,neurodes[3].y,neurodes[5].x,neurodes[5].y,0); synapses[8]=new synapse(neurodes[4].x,neurodes[4].y,neurodes[5].x,neurodes[5].y,0); } function drawText(s,x,y,size,align) { ctx.fillStyle="rgba(0,255,0,0.05)"; ctx.font=size+"px Georgia"; if(align) ctx.textAlign="center"; ctx.fillText(s,x,y); } function drawInt(i,x,y,size) { ctx.fillStyle="rgba(0,255,0,0.05)"; ctx.font=size+"px Georgia"; ctx.fillText(i.toString(),x,y); } function drawFloat(w,x,y,size) { ctx.fillStyle="rgba(0,255,0,0.05)"; ctx.font=size+"px Georgia"; ctx.fillText(w.toFixed(2).toString(),x,y); } function drawLine(x1,y1,x2,y2) { ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); } function drawCircle(x,y,r) { ctx.beginPath(); ctx.arc(x,y,r,0, 2*Math.PI); ctx.stroke(); } function drawFilledCircle(x,y,r) { ctx.beginPath(); ctx.arc(x,y,r,0, 2*Math.PI); ctx.fill(); } function sigmoid(x) { var ex = Math.pow(Math.E,-x); return (1.0/(1+ex)); } function sigmoidDeriv(x) { return(sigmoid(x)*(1-sigmoid(x))); } function fire() { var x,y,dx,dy; // show some input synapses firing while(t < 1.0) { for(i=0;i<6;++i) { x = synapses[i].x1; y = synapses[i].y1; dx = synapses[i].x2 - x; dy = synapses[i].y2 - y; ctx.fillStyle="rgba(255,0,0,0.04)"; drawFilledCircle(x+t*dx,y+t*dy,neurodesize*0.10); t+=0.001; } } t=0; // show some output synapses firing while(t < 1.0) { for(i=6;i<9;++i) { x = synapses[i].x1; y = synapses[i].y1; dx = synapses[i].x2 - x; dy = synapses[i].y2 - y; ctx.fillStyle="rgba(255,0,0,0.04)"; drawFilledCircle(x+t*dx,y+t*dy,neurodesize*0.10); t+=0.001; } } t=0; } function showInstructions() { alert(instruct); } function trainNet() { target=input1^input2; var dw; var oldw=new Array(3); training=true; fire(); // render some feedback animation for(j=0;j

Neural Net Simulator