COMPLETE SELF AWARING CAR WITH DETECTION OF ITS SOUROUNDING

main_project/car.js

@@ -5,7 +5,7 @@ for its functionality
 
 //initiate the Car Class
 class Car{
-    constructor(x, y, width, height){
+    constructor(x, y, width, height, controlType, maxSpeed = 3){
         //define the car parameters
         this.x = x;
         this.y = y;
@@ -14,38 +14,48 @@ class Car{
         //define the car speed and direction based on physics
         this.speed = 0;
         this.acceleration = 0.2;
-        this.maxSpeed = 3;
+        this.maxSpeed = maxSpeed;
         this.friction = 0.05;
         this.angle = 0;
         this.damaged = false;
 
-        this.sensor = new Sensors(this);
-        this.controls = new Controls();
+        //MAKE THE SENSORS WORK ONLY FOR OUR CAR
+        if(controlType != "DUMMY"){
+            this.sensor = new Sensors(this);
+        }
+        this.controls = new Controls(controlType);
     }
 
-    //Update the screen with the moving car object
-    update(roadBorders){
+    //Update the screen with the moving cars objects
+    update(roadBorders, traffic){
         if(!this.damaged){
         this.#move();
-        this.polygon = this.#carPolygon();
-        this.damaged = this.#assessDamage(roadBorders);
+        this.polygon = this.#createPolygon();
+        this.damaged = this.#assessDamage(roadBorders, traffic);
+        }
+        if(this.sensor){
+            this.sensor.update(roadBorders, traffic);
         }
-
-        this.sensor.update(roadBorders);
     }
 
-    //To get the car corner points and to asses if there is collagend
+    //To get the car corner points and to asses if there is collision
     //with the road and based on that if the car is damaged
-    #assessDamage(roadBorders){
+    #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;
     }
         //Get the card corners From the center of the car
-        #carPolygon(){
+        #createPolygon(){
             const points = [];
             const rad = Math.hypot(this.width , this.height) / 2;
             const alpha = Math.atan2(this.width, this.height);
@@ -84,8 +94,8 @@ class Car{
         if(this.speed > this.maxSpeed){
             this.speed = this.maxSpeed;
         }
-        if(this.speed <- this.maxSpeed/2){
-            this.speed =- this.maxSpeed/3;
+        if(this.speed <- this.maxSpeed / 2){
+            this.speed =- this.maxSpeed / 2;
         }
         if(this.speed > 0){
             this.speed -= this.friction;
@@ -121,12 +131,12 @@ class Car{
 
     }
     //Draw the canvas and the car on it
-    draw(ctx){
+    draw(ctx, color){
         //Change the car color if the car is damaged
         if(this.damaged){
             ctx.fillStyle = "gray";
         }else{
-            ctx.fillStyle = "red";
+            ctx.fillStyle = color;
         }
 
         ctx.beginPath();
@@ -137,7 +147,9 @@ class Car{
         }
 
         ctx.fill();
-
-        this.sensor.draw(ctx);
+
+        if(this.sensor){
+            this.sensor.draw(ctx);
+        }
     }
 }

main_project/controls.js

@@ -3,14 +3,22 @@ Control Class
 responsible for the controls of the car throw the arrow keys
 */
 class Controls{
-    constructor(){
+    constructor(type){
         this.forward = false;
         this.left = false;
         this.right = false;
         this.reverse = false;
 
-        this.#addKeyboardListeners();
+        switch(type){
+            case "KEYS":
+                this.#addKeyboardListeners();
+                break;
+            case "DUMMY":
+                this.forward = true;
+                break;
+        }
     }
+
     #addKeyboardListeners(){
         //Using The '=>' instead of 'function()' To refers to This of Controls Class
         document.onkeydown=(event)=>{
@@ -51,6 +59,6 @@ class Controls{
             //Check for event if it catching the keys
             //console.table(this);
         }
+    }
 
-    };
 }

main_project/main.js

@@ -10,23 +10,36 @@ canvas.width=200;
 
 
 const ctx = canvas.getContext("2d");
-const road= new Road(canvas.width/2, canvas.width * 0.9);
-const car = new Car(road.getLaneCenter(1), 100, 30, 50);
+const road= new Road(canvas.width / 2, canvas.width * 0.9);
+const car = new Car(road.getLaneCenter(1), 100, 30, 50, "KEYS");
 
+//Create traffic
+const traffic = [
+    new Car(road.getLaneCenter(1), -100, 30, 50, "DUMMY", 2)
+];
 
 
 animate();
 
 function animate(){
-    car.update(road.borders);
+    for (let i = 0; i < traffic.length; i++) {
+        traffic[i].update(road.borders, []);        
+    }
+
+    car.update(road.borders, traffic);
 
     canvas.height = window.innerHeight;
 
     ctx.save();
     ctx.translate(0, -car.y + canvas.height * 0.7);
-    
+
     road.draw(ctx);
-    car.draw(ctx);
+
+    for (let i = 0; i < traffic.length; i++) {
+        traffic[i].draw(ctx, "red");        
+    }
+
+    car.draw(ctx, "blue");
 
     ctx.restore();
     requestAnimationFrame(animate);

main_project/road.js

@@ -3,7 +3,7 @@ Road class
 responsible of creating the road and boarder of it for the car and the sensors
 */
 class Road{
-    constructor(x, width, laneCount = 4){
+    constructor(x, width, laneCount = 3){
         this.x = x;
         this.width = width;
         this.laneCount = laneCount;

main_project/sensor.js

@@ -15,17 +15,20 @@ class Sensors{
         this.readings = [];
     }
     //update the screen with the sensors rays
-    update(roadBorders){
+    update(roadBorders, traffic){
         this.#castRays();
         this.readings = [];
         for(let i = 0; i < this.rays.length; i++) {
             this.readings.push(
-                this.#getReading(this.rays[i], roadBorders)
+                this.#getReading(
+                    this.rays[i],
+                    roadBorders,
+                    traffic)
             );
         }
     }
 
-    #getReading(ray , roadBorders){
+    #getReading(ray , roadBorders, traffic){
         let touches = [];
 
         for (let i = 0; i < roadBorders.length; i++){
@@ -39,6 +42,23 @@ class Sensors{
                 touches.push(touch);
             }
         }
+
+        for (let i = 0; i < traffic.length; i++) {
+            const poly = traffic[i].polygon;
+            for (let j = 0; j < poly.length; j++) {
+                const value = getIntersection(
+                    ray[0],
+                    ray[1],
+                    poly[j],
+                    poly[(j + 1) % poly.length]
+                );
+                if(value){
+                    touches.push(value);
+                }
+            }
+        }
+
+
 
         if (touches.length == 0) {
             return null;            
@@ -57,14 +77,13 @@ class Sensors{
                     this.raySpread / 2,
                     -this.raySpread / 2,
                     this.rayCount == 1 ? 0.5 : i / (this.rayCount - 1)
-                ) + this.car.angle; //<<<<<<<<<<< I Cant make the ray move with the car DIRECTION
+                ) + this.car.angle;
 
                 const start = {x:this.car.x, y:this.car.y};
                 const end = {
                     x:this.car.x - Math.sin(rayAngle) * this.rayLength,
                     y:this.car.y - Math.cos(rayAngle) * this.rayLength
                 };
-
                 // console.log(`Ray ${i + 1} - Start:`, start, "End:", end); // Debugging log
 
                 this.rays.push([start, end]);

main_project/utils.js

@@ -25,7 +25,7 @@ function getIntersection(A, B, C, D){
         const t = tTop / bottom;
         const u = uTop  / bottom;
 
-        if(t >= 0 && t <= 1 && u <= 1)
+        if(t >= 0 && t <= 1 && u >= 0 && u <= 1)
         {
             return {
                 x:lerp(A.x , B.x, t),