From d939c89b3754d40fc12d43cbc84e8ae655a577d6 Mon Sep 17 00:00:00 2001
From: Amr Barghouthi <barghouthi.a@gmail.com>
Date: Sat, 24 Feb 2018 17:08:54 +0200
Subject: [PATCH 1/2] rendering for the nn

---
 examples/mnist/sketch.js |  4 ++-
 examples/xor/sketch.js   | 12 ++++---
 lib/nn.js                | 74 +++++++++++++++++++++++++++++++++++++++-
 3 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/examples/mnist/sketch.js b/examples/mnist/sketch.js
index 796ae28..206666a 100644
--- a/examples/mnist/sketch.js
+++ b/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);
   let user = guessUserDigit();
   //image(user, 0, 0);
 
diff --git a/examples/xor/sketch.js b/examples/xor/sketch.js
index ff16be3..6b1da59 100644
--- a/examples/xor/sketch.js
+++ b/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);
 
 }
diff --git a/lib/nn.js b/lib/nn.js
index 5cce746..0800c8c 100644
--- a/lib/nn.js
+++ b/lib/nn.js
@@ -140,5 +140,77 @@ class NeuralNetwork {
     nn.learning_rate = data.learning_rate;
     return nn;
   }
-
+  render(offsetX,offsetY)
+  {
+        var nodeR  = 10;
+        var nodeSp = 10;
+        var layerSp = 250;
+        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);
+          }
+
+
+        }
+  }
 }

From 4e449358cbde224aea48c5ea0d8f7d19d45a4c71 Mon Sep 17 00:00:00 2001
From: Amr Barghouthi <barghouthi.a@gmail.com>
Date: Sat, 24 Feb 2018 17:21:28 +0200
Subject: [PATCH 2/2] rendring parmiters are passed to render function

---
 examples/mnist/sketch.js | 2 +-
 examples/xor/sketch.js   | 2 +-
 lib/nn.js                | 6 ++----
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/examples/mnist/sketch.js b/examples/mnist/sketch.js
index 206666a..4b29b6b 100644
--- a/examples/mnist/sketch.js
+++ b/examples/mnist/sketch.js
@@ -132,7 +132,7 @@ function draw() {
   background(0);
 
 
-  nn.render(20,420);
+  nn.render(20,420,5,100,200);
   let user = guessUserDigit();
   //image(user, 0, 0);
 
diff --git a/examples/xor/sketch.js b/examples/xor/sketch.js
index 6b1da59..9ff5fb3 100644
--- a/examples/xor/sketch.js
+++ b/examples/xor/sketch.js
@@ -53,6 +53,6 @@ function draw() {
     }
   }
 
-nn.render(20,400);
+nn.render(20,400,50,20,20);
 
 }
diff --git a/lib/nn.js b/lib/nn.js
index 0800c8c..ce29948 100644
--- a/lib/nn.js
+++ b/lib/nn.js
@@ -140,11 +140,9 @@ class NeuralNetwork {
     nn.learning_rate = data.learning_rate;
     return nn;
   }
-  render(offsetX,offsetY)
+  render(offsetX,offsetY,nodeR,nodeSp,layerSp)
   {
-        var nodeR  = 10;
-        var nodeSp = 10;
-        var layerSp = 250;
+         
         var firstNodeX = offsetX+nodeR;
         var firstNodeY = offsetY+nodeR;
         noStroke();