final commit

car.js

@@ -0,0 +1,165 @@
+class Car{
+    constructor(x,y,width,height,controlType,maxSpeed=3,color="blue"){
+        this.x=x;
+        this.y=y;
+        this.width=width;
+        this.height=height;
+
+        this.speed=0;
+        this.acceleration=0.2;
+        this.maxSpeed=maxSpeed;
+        this.friction=0.05;
+        this.angle=0;
+        this.damaged=false;
+
+        this.useBrain=controlType=="AI";
+
+        if(controlType!="DUMMY"){
+            this.sensor=new Sensor(this);
+            this.brain=new NeuralNetwork(
+                [this.sensor.rayCount,6,4]
+            );
+        }
+        this.controls=new Controls(controlType);
+
+        this.img=new Image();
+        this.img.src="car.png"
+
+        this.mask=document.createElement("canvas");
+        this.mask.width=width;
+        this.mask.height=height;
+
+        const maskCtx=this.mask.getContext("2d");
+        this.img.onload=()=>{
+            maskCtx.fillStyle=color;
+            maskCtx.rect(0,0,this.width,this.height);
+            maskCtx.fill();
+
+            maskCtx.globalCompositeOperation="destination-atop";
+            maskCtx.drawImage(this.img,0,0,this.width,this.height);
+        }
+    }
+
+    update(roadBorders,traffic){
+        if(!this.damaged){
+            this.#move();
+            this.polygon=this.#createPolygon();
+            this.damaged=this.#assessDamage(roadBorders,traffic);
+        }
+        if(this.sensor){
+            this.sensor.update(roadBorders,traffic);
+            const offsets=this.sensor.readings.map(
+                s=>s==null?0:1-s.offset
+            );
+            const outputs=NeuralNetwork.feedForward(offsets,this.brain);
+
+            if(this.useBrain){
+                this.controls.forward=outputs[0];
+                this.controls.left=outputs[1];
+                this.controls.right=outputs[2];
+                this.controls.reverse=outputs[3];
+            }
+        }
+    }
+
+    #assessDamage(roadBorders,traffic){
+        for(let i=0;i<roadBorders.length;i++){
+            if(polysIntersect(this.polygon,roadBorders[i])){
+                return true;
+            }
+        }
+        for(let i=0;i<traffic.length;i++){
+            if(polysIntersect(this.polygon,traffic[i].polygon)){
+                return true;
+            }
+        }
+        return false;
+    }
+
+    #createPolygon(){
+        const points=[];
+        const rad=Math.hypot(this.width,this.height)/2;
+        const alpha=Math.atan2(this.width,this.height);
+        points.push({
+            x:this.x-Math.sin(this.angle-alpha)*rad,
+            y:this.y-Math.cos(this.angle-alpha)*rad
+        });
+        points.push({
+            x:this.x-Math.sin(this.angle+alpha)*rad,
+            y:this.y-Math.cos(this.angle+alpha)*rad
+        });
+        points.push({
+            x:this.x-Math.sin(Math.PI+this.angle-alpha)*rad,
+            y:this.y-Math.cos(Math.PI+this.angle-alpha)*rad
+        });
+        points.push({
+            x:this.x-Math.sin(Math.PI+this.angle+alpha)*rad,
+            y:this.y-Math.cos(Math.PI+this.angle+alpha)*rad
+        });
+        return points;
+    }
+
+    #move(){
+        if(this.controls.forward){
+            this.speed+=this.acceleration;
+        }
+        if(this.controls.reverse){
+            this.speed-=this.acceleration;
+        }
+
+        if(this.speed>this.maxSpeed){
+            this.speed=this.maxSpeed;
+        }
+        if(this.speed<-this.maxSpeed/2){
+            this.speed=-this.maxSpeed/2;
+        }
+
+        if(this.speed>0){
+            this.speed-=this.friction;
+        }
+        if(this.speed<0){
+            this.speed+=this.friction;
+        }
+        if(Math.abs(this.speed)<this.friction){
+            this.speed=0;
+        }
+
+        if(this.speed!=0){
+            const flip=this.speed>0?1:-1;
+            if(this.controls.left){
+                this.angle+=0.03*flip;
+            }
+            if(this.controls.right){
+                this.angle-=0.03*flip;
+            }
+        }
+
+        this.x-=Math.sin(this.angle)*this.speed;
+        this.y-=Math.cos(this.angle)*this.speed;
+    }
+
+    draw(ctx,drawSensor=false){
+        if(this.sensor && drawSensor){
+            this.sensor.draw(ctx);
+        }
+
+        ctx.save();
+        ctx.translate(this.x,this.y);
+        ctx.rotate(-this.angle);
+        if(!this.damaged){
+            ctx.drawImage(this.mask,
+                -this.width/2,
+                -this.height/2,
+                this.width,
+                this.height);
+            ctx.globalCompositeOperation="multiply";
+        }
+        ctx.drawImage(this.img,
+            -this.width/2,
+            -this.height/2,
+            this.width,
+            this.height);
+        ctx.restore();
+
+    }
+}

control.js

@@ -0,0 +1,52 @@
+class Controls{
+    constructor(type){
+        this.forward=false;
+        this.left=false;
+        this.right=false;
+        this.reverse=false;
+
+        switch(type){
+            case "KEYS":
+                this.#addKeyboardListeners();
+                break;
+            case "DUMMY":
+                this.forward=true;
+                break;
+        }
+    }
+
+    #addKeyboardListeners(){
+        document.onkeydown=(event)=>{
+            switch(event.key){
+                case "ArrowLeft":
+                    this.left=true;
+                    break;
+                case "ArrowRight":
+                    this.right=true;
+                    break;
+                case "ArrowUp":
+                    this.forward=true;
+                    break;
+                case "ArrowDown":
+                    this.reverse=true;
+                    break;
+            }
+        }
+        document.onkeyup=(event)=>{
+            switch(event.key){
+                case "ArrowLeft":
+                    this.left=false;
+                    break;
+                case "ArrowRight":
+                    this.right=false;
+                    break;
+                case "ArrowUp":
+                    this.forward=false;
+                    break;
+                case "ArrowDown":
+                    this.reverse=false;
+                    break;
+            }
+        }
+    }
+}

index.html

@@ -1,11 +1,23 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<title> Self Driving car </title>
-		<link rel ="stylesheet" href = "style.css">
+		<title>Self-driving car - No libraries</title>
+		<link rel="stylesheet" href="style.css">
 	</head>
 	<body>
-		<canvas id = "my-canvas"></canvas>
-		<script src = "index.js"></script>
+		<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="network.js"></script>
+		<script src="sensor.js"></script>
+		<script src="utils.js"></script>
+		<script src="road.js"></script>
+		<script src="controls.js"></script>
+		<script src="car.js"></script>
+		<script src="main.js"></script>
 	</body>
-</html>
+</html>

index.js

@@ -1 +1,87 @@
-console.log("hello world);
+const carCanvas=document.getElementById("carCanvas");
+carCanvas.width=200;
+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 N=100;
+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);
+        }
+    }
+}
+
+const traffic=[
+    new Car(road.getLaneCenter(1),-100,30,50,"DUMMY",2,getRandomColor()),
+    new Car(road.getLaneCenter(0),-300,30,50,"DUMMY",2,getRandomColor()),
+    new Car(road.getLaneCenter(2),-300,30,50,"DUMMY",2,getRandomColor()),
+    new Car(road.getLaneCenter(0),-500,30,50,"DUMMY",2,getRandomColor()),
+    new Car(road.getLaneCenter(1),-500,30,50,"DUMMY",2,getRandomColor()),
+    new Car(road.getLaneCenter(1),-700,30,50,"DUMMY",2,getRandomColor()),
+    new Car(road.getLaneCenter(2),-700,30,50,"DUMMY",2,getRandomColor()),
+];
+
+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;
+}
+
+function animate(time){
+    for(let i=0;i<traffic.length;i++){
+        traffic[i].update(road.borders,[]);
+    }
+    for(let i=0;i<cars.length;i++){
+        cars[i].update(road.borders,traffic);
+    }
+    bestCar=cars.find(
+        c=>c.y==Math.min(
+            ...cars.map(c=>c.y)
+        ));
+
+    carCanvas.height=window.innerHeight;
+    networkCanvas.height=window.innerHeight;
+
+    carCtx.save();
+    carCtx.translate(0,-bestCar.y+carCanvas.height*0.7);
+
+    road.draw(carCtx);
+    for(let i=0;i<traffic.length;i++){
+        traffic[i].draw(carCtx);
+    }
+    carCtx.globalAlpha=0.2;
+    for(let i=0;i<cars.length;i++){
+        cars[i].draw(carCtx);
+    }
+    carCtx.globalAlpha=1;
+    bestCar.draw(carCtx,true);
+
+    carCtx.restore();
+
+    networkCtx.lineDashOffset=-time/50;
+    Visualizer.drawNetwork(networkCtx,bestCar.brain);
+    requestAnimationFrame(animate);
+}