Finalizing the visualization of the NEURAL NETWORK

THEKINGSTAR · Dec 11, 2023 · 84eddc6 · 84eddc6
1 parent dd8a468
commit 84eddc6
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 4 deletions.
diff --git a/assets/demo_vids/Car_ann_testing.mp4 b/assets/demo_vids/Car_ann_testing.mp4
diff --git a/assets/demo_vids/visualizing_the_network.mp4 b/assets/demo_vids/visualizing_the_network.mp4
diff --git a/assets/pictures/rotation physics.jpg → assets/pictures/rotation_physics.jpg b/assets/pictures/rotation physics.jpg → assets/pictures/rotation_physics.jpg
diff --git a/index.html b/index.html
@@ -60,9 +60,35 @@
         width: 100%;
         height: 100%;
         }
+        .video-element {
+        width: 100%;
+        height: 100%;
+    }
+
+
+    /*
+        body {
+            background-color: #333;
+            color: #fff;
+        }
+
+        header {
+            background-color: #333;
+            color: #fff;
+        }
+
+        section {
+            max-width: 800px;
+            margin: 40px auto;
+            padding: 20px;
+            background-color: #444;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        } 
+    */
     </style>
 </head>
 <body>
+    <script>function toggleDarkMode() {document.body.classList.toggle('dark-mode');}</script>
 
     <header>
         <h1>Self-Driving Car Simulation</h1>
@@ -142,7 +168,21 @@ <h3>Neural Network Integration</h3>
                     <img src="assets/pictures/neural_network.jpg" alt="Neural networks Implementation">
                 </div>
                 <div class="child">
-                    <img src="/assets/pictures/rotation physics.jpg" alt="Physics Implementation">
+                    <img src="/assets/pictures/rotation_physics.jpg" alt="Physics Implementation">
+                </div>
+            </div>
+            <div align="center" class="parent">
+                <div class="child">
+                    <video class="video-element" controls>
+                        <source src="assets/demo_vids/Car_ann_testing.mp4" type="video/mp4">
+                        Your browser does not support the video tag.
+                    </video>
+                </div>
+                <div class="child">
+                    <video class="video-element" controls>
+                        <source src="assets/demo_vids/visualizing_the_network.mp4" type="video/mp4">
+                        Your browser does not support the video tag.
+                    </video>
                 </div>
             </div>
             <h3>User-Friendly Interface</h3>

diff --git a/main_project/main.js b/main_project/main.js
@@ -5,11 +5,17 @@ call the car, road , sensors
 and
 other responsible for the functionality of the project
  */
-const carCanvas=document.getElementById("carCanvas");
-carCanvas.width=200;
+const carCanvas = document.getElementById("carCanvas");
+carCanvas.width = 200;
+
+//Draw the ANN NETWORK
+const networkCanvas = document.getElementById("networkCanvas");
+networkCanvas.width = 300;
 
 
 const carCtx = carCanvas.getContext("2d");
+const networkCtx = networkCanvas.getContext("2d");
+
 const road= new Road(carCanvas.width / 2, carCanvas.width * 0.9);
 const car = new Car(road.getLaneCenter(1), 100, 30, 50, "AI");
 
@@ -28,7 +34,9 @@ function animate(){
 
     car.update(road.borders, traffic);
 
-    carCanvas.height = window.innerHeight;
+    carCanvas.height     = window.innerHeight;
+    networkCanvas.height = window.innerHeight;
+
 
     carCtx.save();
     carCtx.translate(0, -car.y + carCanvas.height * 0.7);
@@ -42,5 +50,9 @@ function animate(){
     car.draw(carCtx, "blue");
 
     carCtx.restore();
+
+    //networkCtx.lineDashOffset =- time / 50;
+
+    Visualizer.drawNetwork(networkCtx, car.brain);
     requestAnimationFrame(animate);
 }
diff --git a/main_project/self_driving_car.html b/main_project/self_driving_car.html
@@ -9,6 +9,7 @@
 <body>
     <canvas id="carCanvas"></canvas>
     <canvas id="networkCanvas"></canvas>
+    <script src="visualizer.js"></script>
     <script src="ann.js"></script>
     <script src="sensor.js"></script>
     <script src="utils.js"></script>

diff --git a/main_project/utils.js b/main_project/utils.js
@@ -58,4 +58,14 @@ function polysIntersect(poly1, poly2){
 
     return false;
 
+}
+
+
+function getRGBA(value){
+    const alpha = Math.abs(value);
+    const R = value < 0 ? 0 : 255;
+    const G = R;
+    const B = value > 0 ? 0 : 255;
+
+    return ("rgba("+R+", "+G+", "+B+", "+alpha+")");
 }
diff --git a/main_project/visualizer.js b/main_project/visualizer.js
@@ -0,0 +1,110 @@
+class Visualizer{
+    static drawNetwork(ctx,network){
+        const margin=50;
+        const left=margin;
+        const top=margin;
+        const width=ctx.canvas.width-margin*2;
+        const height=ctx.canvas.height-margin*2;
+
+        const levelHeight=height/network.levels.length;
+
+        for(let i=network.levels.length-1;i>=0;i--){
+            const levelTop=top+
+                lerp(
+                    height-levelHeight,
+                    0,
+                    network.levels.length==1
+                        ?0.5
+                        :i/(network.levels.length-1)
+                );
+
+            ctx.setLineDash([7,3]);
+            Visualizer.drawLevel(ctx,network.levels[i],
+                left,levelTop,
+                width,levelHeight,
+                i==network.levels.length-1
+                    ?['🠉','🠈','🠊','🠋']
+                    :[]
+            );
+        }
+    }
+
+    static drawLevel(ctx,level,left,top,width,height,outputLabels){
+        const right=left+width;
+        const bottom=top+height;
+
+        const {inputs,outputs,weights,biases}=level;
+
+        for(let i=0;i<inputs.length;i++){
+            for(let j=0;j<outputs.length;j++){
+                ctx.beginPath();
+                ctx.moveTo(
+                    Visualizer.#getNodeX(inputs,i,left,right),
+                    bottom
+                );
+                ctx.lineTo(
+                    Visualizer.#getNodeX(outputs,j,left,right),
+                    top
+                );
+                ctx.lineWidth=2;
+                ctx.strokeStyle=getRGBA(weights[i][j]);
+                ctx.stroke();
+            }
+        }
+
+        const nodeRadius=18;
+        for(let i=0;i<inputs.length;i++){
+            const x=Visualizer.#getNodeX(inputs,i,left,right);
+            ctx.beginPath();
+            ctx.arc(x,bottom,nodeRadius,0,Math.PI*2);
+            ctx.fillStyle="black";
+            ctx.fill();
+            ctx.beginPath();
+            ctx.arc(x,bottom,nodeRadius*0.6,0,Math.PI*2);
+            ctx.fillStyle=getRGBA(inputs[i]);
+            ctx.fill();
+        }
+
+        for(let i=0;i<outputs.length;i++){
+            const x=Visualizer.#getNodeX(outputs,i,left,right);
+            ctx.beginPath();
+            ctx.arc(x,top,nodeRadius,0,Math.PI*2);
+            ctx.fillStyle="black";
+            ctx.fill();
+            ctx.beginPath();
+            ctx.arc(x,top,nodeRadius*0.6,0,Math.PI*2);
+            ctx.fillStyle=getRGBA(outputs[i]);
+            ctx.fill();
+
+            ctx.beginPath();
+            ctx.lineWidth=2;
+            ctx.arc(x,top,nodeRadius*0.8,0,Math.PI*2);
+            ctx.strokeStyle=getRGBA(biases[i]);
+            ctx.setLineDash([3,3]);
+            ctx.stroke();
+            ctx.setLineDash([]);
+
+            if(outputLabels[i]){
+                ctx.beginPath();
+                ctx.textAlign="center";
+                ctx.textBaseline="middle";
+                ctx.fillStyle="black";
+                ctx.strokeStyle="white";
+                ctx.font=(nodeRadius*1.5)+"px Arial";
+                ctx.fillText(outputLabels[i],x,top+nodeRadius*0.1);
+                ctx.lineWidth=0.5;
+                ctx.strokeText(outputLabels[i],x,top+nodeRadius*0.1);
+            }
+        }
+    }
+
+    static #getNodeX(nodes,index,left,right){
+        return lerp(
+            left,
+            right,
+            nodes.length==1
+                ?0.5
+                :index/(nodes.length-1)
+        );
+    }
+}