rendering

examples/mnist/sketch.js

@@ -20,7 +20,7 @@ let user_guess_ele;
 let percent_ele;
 
 function setup() {
-  createCanvas(400, 200).parent('container');
+  createCanvas(800, 2400).parent('container');
   nn = new NeuralNetwork(784, 64, 10);
   user_digit = createGraphics(200, 200);
   user_digit.pixelDensity(1);
@@ -131,6 +131,8 @@ function guessUserDigit() {
 function draw() {
   background(0);
 
+
+  nn.render(20,420,5,100,200);
   let user = guessUserDigit();
   //image(user, 0, 0);
 

examples/xor/sketch.js

@@ -18,9 +18,11 @@ let training_data = [{
     outputs: [0]
   }
 ];
-
+var xorW = 400;
+var xorH = 400;
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(400, 800);
+
   nn = new NeuralNetwork(2, 4, 1);
   lr_slider = createSlider(0.01, 0.5, 0.1, 0.01);
 
@@ -37,8 +39,8 @@ function draw() {
   nn.setLearningRate(lr_slider.value());
 
   let resolution = 10;
-  let cols = width / resolution;
-  let rows = height / resolution;
+  let cols = xorW / resolution;
+  let rows = xorH / resolution;
   for (let i = 0; i < cols; i++) {
     for (let j = 0; j < rows; j++) {
       let x1 = i / cols;
@@ -51,6 +53,6 @@ function draw() {
     }
   }
 
-
+nn.render(20,400,50,20,20);
 
 }

lib/nn.js

@@ -140,5 +140,75 @@ class NeuralNetwork {
     nn.learning_rate = data.learning_rate;
     return nn;
   }
-
+  render(offsetX,offsetY,nodeR,nodeSp,layerSp)
+  {
+
+        var firstNodeX = offsetX+nodeR;
+        var firstNodeY = offsetY+nodeR;
+        noStroke();
+        for(var i=0;i<this.input_nodes;i++)
+        {
+            fill(255,0,255);
+            //console.log(i);
+            ellipse(firstNodeX,firstNodeY+i*(nodeSp+nodeR),nodeR,nodeR);
+
+        }
+        for(var i=0;i<this.hidden_nodes;i++)
+        {
+            fill(255,0,255);
+            //console.log(i);
+            ellipse(firstNodeX+(layerSp+nodeR),firstNodeY+i*(nodeSp+nodeR),nodeR,nodeR);
+
+        }
+        for(var i=0;i<this.output_nodes;i++)
+        {
+            fill(255,0,255);
+            //console.log(i);
+            ellipse(firstNodeX+2*(layerSp+nodeR),firstNodeY+i*(nodeSp+nodeR),nodeR,nodeR);
+
+        }
+
+        for(var i=0;i<this.input_nodes;i++)
+        {
+          for(var j=0;j<this.hidden_nodes;j++)
+          {
+            var value = this.weights_ih.data[j][i];
+            var startX = firstNodeX;
+            var startY = firstNodeY+i*(nodeSp+nodeR);
+
+            var endX = firstNodeX+(layerSp+nodeR);
+            var endY = firstNodeY+j*(nodeSp+nodeR);
+            if(value<0)
+              stroke(255,0,0);
+            else
+                stroke(0,255,0);
+            strokeWeight(abs(value));
+
+            line(startX,startY,endX,endY);
+          }
+
+
+        }
+        for(var i=0;i<this.hidden_nodes;i++)
+        {
+          for(var j=0;j<this.output_nodes;j++)
+          {
+            var value =  this.weights_ho.data[j][i];
+            var startX = firstNodeX+(nodeSp+nodeR);
+            var startY = firstNodeY+i*(nodeSp+nodeR);
+
+            var endX = firstNodeX+2*(layerSp+nodeR);
+            var endY = firstNodeY+j*(nodeSp+nodeR);
+            if(value<0)
+              stroke(255,0,0);
+            else
+                stroke(0,255,0);
+            strokeWeight(abs(value));
+
+            line(startX,startY,endX,endY);
+          }
+
+
+        }
+  }
 }