<html> <head> <script src="NeuralNetwork.js"></script> <script src="Neuron.js"></script> <script src="NeuronLayer.js"></script> <style> body{ padding:0; margin:0; overflow:hidden; font-family:Helvetica; font-size:10px; } input{ padding:0; } p{ padding:0; margin:0; } #input{ position:absolute; top:100px; left:10px; } #first_layer{ position:absolute; top: 100px; left: 200px; } #second_layer{ position:absolute; top: 100px; left: 400px; } #output{ position:absolute; top: 100px; left: 600px; } #network_container{ position:absolute; top: 100px; left: 600px; margin-left:-400px; margin-top:-250px; } </style> </head> <body> <canvas id="myCanvas" width="100%" height="100%"></canvas> <div id="network_container"> <div id="input"> <input type="range" min="0" max="100" value="1" class="i0" id="i0"> <p id="i0_output"></p> <input type="range" min="0" max="100" value="10" class="i1" id="i1"> <p id="i1_output"></p> </div> <div id = "first_layer"> <input type="range" min="-400" max="400" value="10" class="w0" id="w0"> <p id="w0_output"></p> <input type="range" min="-400" max="400" value="10" class="w1" id="w1"> <p id="w1_output"></p><br><br> <input type="range" min="-400" max="400" value="10" class="w2" id="w2"> <p id="w2_output"></p> <input type="range" min="-400" max="400" value="10" class="w3" id="w3"> <p id="w3_output"></p><br><br> <input type="range" min="-400" max="400" value="10" class="w4" id="w4"> <p id="w4_output"></p> <input type="range" min="-400" max="400" value="10" class="w5" id="w5"> <p id="w5_output"></p> </div> <div id = "second_layer"> <input type="range" min="-400" max="400" value="10" class="w6" id="w6"> <p id="w6_output"></p> <input type="range" min="-400" max="400" value="10" class="w7" id="w7"> <p id="w7_output"></p> <input type="range" min="-400" max="400" value="10" class="w8" id="w8"> <p id="w8_output"></p><br><br> <input type="range" min="-400" max="400" value="10" class="w9" id="w9"> <p id="w9_output"></p> <input type="range" min="-400" max="400" value="10" class="w10" id="w10"> <p id="w10_output"></p> <input type="range" min="-400" max="400" value="10" class="w11" id="w11"> <p id="w11_output"></p> </div> <div id="output"> <input id="clickMe" type="button" value="update network" onclick="update();" /> <input id="random" type="button" value="random network" onclick="random();" /> <p id="network_output"></p> </div> </div> <script> var numInputs = 2; var numOutputs = 2; var numHiddenLayers = 1; var numNeuronsPerHiddenLayer = 3; var slider = []; var output = []; var neuralNetwork = new NeuralNetwork(numInputs, numOutputs, numHiddenLayers, numNeuronsPerHiddenLayer); var input0 = document.getElementById("i0") var input_display0 = document.getElementById("i0_output") input_display0.innerHTML = input0.value/100; input0.oninput = function() { input_display0.innerHTML = this.value/100; } var input1 = document.getElementById("i1") var input_display1 = document.getElementById("i1_output") input_display1.innerHTML = input1.value/100; input1.oninput = function() { input_display1.innerHTML = this.value/100; } //slider for (var i = 0; i<12; i++){ slider.push(document.getElementById("w"+i)); output.push(document.getElementById("w"+i+"_output")); output[i].innerHTML = slider[i].value/100; slider[i].oninput = function() { output[slider.indexOf(this)].innerHTML = this.value/100; updateCanvas() } } document.addEventListener('mousemove', function(e) { console.log("move") var x = e.clientX / window.innerWidth; var y = e.clientY / window.innerHeight; input0.value=x*100; input1.value=y*100; input_display0.innerHTML = x; input_display1.innerHTML = y; update([x,y]) }) //CANVAS STUFF var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; var stepsize = 50; for(var x = 0; x < window.innerWidth; x = x+stepsize){ for(var y = 0; y < window.innerHeight; y = y+stepsize){ var outputs = neuralNetwork.update([x/window.innerWidth,y/window.innerHeight]); ctx.fillStyle = 'hsl(' + 360 * outputs[0] + ', 50%,'+outputs[1]*100 +'%)'; //ctx.fillStyle= "rgb(255,20,255);" console.log(outputs[1]*255) ctx.fillRect(x,y,stepsize,stepsize); } } function updateCanvas(){ var stepsize = 50; for(var x = 0; x < window.innerWidth; x = x+stepsize){ for(var y = 0; y < window.innerHeight; y = y+stepsize){ var outputs = neuralNetwork.update([x/window.innerWidth,y/window.innerHeight]); ctx.fillStyle = 'hsl(' + 360 * outputs[0] + ', 90%,'+outputs[1]*100+'%)'; //ctx.fillStyle= "rgb(255,20,255);" console.log(outputs[1]*255) ctx.fillRect(x,y,stepsize,stepsize); } } } function update(inputs){ var weights = neuralNetwork.getWeights(); var newWeights = []; for (var i=0; i < weights.length; i++) { newWeights.push(slider[i].value/100); //newWeights.push(1); } neuralNetwork.setWeights(newWeights); //var inputs = [input0.value/100, input1.value/100]; var outputs = neuralNetwork.update(inputs); // console.log(neuralNetwork.getWeights()); var output_display = document.getElementById("network_output") output_display.innerHTML = "<br> "+outputs[0] + "<br><br> "+outputs [1]; document.getElementById('network_container').style.left=outputs[0]*window.innerWidth; document.getElementById('network_container').style.top=outputs[1]*window.innerHeight; } random() function random(inputs){ for (var i = 0; i<slider.length; i++){ slider[i].value = Math.random()*800-400; output[slider.indexOf(slider[i])].innerHTML = slider[i].value/100; } updateCanvas(); } </script> </body> </html>