FINISHING THE FIRST STAGE OF THE PROJECT

THEKINGSTAR · Dec 11, 2023 · 133cf4d · 133cf4d
1 parent ab18803
commit 133cf4d
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 8 deletions.
diff --git a/main_project/ann.js b/main_project/ann.js
@@ -23,7 +23,27 @@ class NeuralNetwork{
 
         return outputs;      
     }
-
+
+    static mutate(network, amount = 1){
+        network.level.array.forEach(level => {
+            for (let i = 0; i < level.biases.length; i++) {
+                level.biases[i] = lerp(
+                    level.biases[i],
+                    Math.random() * 2 - 1,
+                    amount
+                )
+            }
+            for (let i = 0; i < level.weights.length; i++) {
+                for (let j = 0; j < level.weights.length; j++) {
+                    level.weights[i][j] = lerp(
+                        level.weights[i][j],
+                        Math.random() * 2 - 1,
+                        amount
+                    )
+                }
+            }
+        });
+    }
 }
 
 

diff --git a/main_project/main.js b/main_project/main.js
@@ -23,25 +23,46 @@ const road= new Road(carCanvas.width / 2, carCanvas.width * 0.9);
 
 
 //Initiate the Car traffics
-const N = 100;
+const N = 1000;
 const cars = generateCars(N);
-
-
+let bestCar = cars[0];
+if(localStorage.getItem("bestBrain")){
+    for (let i = 0; i < cars.length; i++) {
+        cars[i].brain = JSON.parse(
+            localStorage.getItem("bestBrain"));
+        if (i != 0) {
+            NeuralNetwork.mutate(cars[i].brain, 0.1);
+        }
+    }
+}
 //Create traffic
 const traffic = [
-    new Car(road.getLaneCenter(1), -100, 30, 50, "DUMMY", 2)
+    new Car(road.getLaneCenter(1), -100, 30, 50, "DUMMY", 2),
+    new Car(road.getLaneCenter(0), -300, 30, 50, "DUMMY", 2),
+    new Car(road.getLaneCenter(2), -300, 30, 50, "DUMMY", 2),
+    new Car(road.getLaneCenter(0), -500, 30, 50, "DUMMY", 2),
+    new Car(road.getLaneCenter(1), -500, 30, 50, "DUMMY", 2),
+    new Car(road.getLaneCenter(1), -700, 30, 50, "DUMMY", 2),
+    new Car(road.getLaneCenter(2), -700, 30, 50, "DUMMY", 2)
 ];
 
 
 animate();
 
+function save(){
+    localStorage.setItem("bestBrain",
+    JSON.stringify(bestCar.brain));
+}
+function discard(){
+    localStorage.removeItem("bestBrain");
+}
+
 function generateCars(N){
     const cars = [];
     for (let i = 1; i <= N; i++)
     {
         cars.push(new Car(road.getLaneCenter(1), 100, 30, 50, "AI"))
     }
-
     return cars;
 }
 
@@ -54,7 +75,7 @@ function animate(time){
         cars[i].update(road.borders, traffic);
     }
 
-    const bestCar = cars.find(
+    bestCar = cars.find(
         c=>c.y == Math.min(...cars.map(c=>c.y))
     );
 

diff --git a/main_project/self_driving_car.html b/main_project/self_driving_car.html
@@ -8,6 +8,10 @@
 
 <body>
     <canvas id="carCanvas"></canvas>
+    <div id="verticalButtons">
+        <button onclick="save()">💾🚗🚓🚕</button>
+        <button onclick="discard()">🗑️🦽</button>
+    </div>
     <canvas id="networkCanvas"></canvas>
     <script src="visualizer.js"></script>
     <script src="ann.js"></script>

diff --git a/main_project/style.css b/main_project/style.css
@@ -2,12 +2,33 @@ body{
     margin:0;
     background: darkgray;
     overflow: hidden;
-    text-align: center;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+#verticalButtons{
+    display: flex;
+    flex-direction: column;
+}
+
+button{
+    border: none;
+    border-radius: 5px;
+    padding: 5px 5px 7px 5px;
+    margin: 2px;
+    cursor: pointer;
+}
+
+button:hover{
+    background: blue;
 }
 
 #networkCanvas{
     background: black;
 }
+
 #carCanvas{
     background: lightgray;
 }