More refactoring and fixing collisions

1 files changed, 49 insertions, 70 deletions

diff --git a/public/js/app.js b/public/js/app.js
index e60548e..53581b3 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1,31 +1,34 @@
 class Boid {
 
-    constructor(context, radius, color, x, y, direction, id) {
-        this.rayLength = 40;
-        this.turnStepAmount = 20;
-        this.stepAmount = 4;
+    constructor(radius, color, x, y, direction, id, scene_width, scene_height) {
+        // Boid properties
         this.radius = radius;
+        this.color = color;
         this.x = x;
         this.y = y;
         this.direction = direction;
-        this.color = color;
-        this.fieldOfView = 270;
         this.id = id;
-        this.boidBuffer = 20;
 
-        this.update(context);
+        // World properties
+        this.scene_width = scene_width;
+        this.scene_height = scene_height;
+
+        // Boid "dynamic" properties
+        this.rayLength = 40;
+        this.turnStepAmount = 20;
+        this.stepAmount = 4;
+        this.fieldOfView = 270;
+        this.boidBuffer = 20;
     }
 
-    move(context, boids) {
+    move(boids) {
         // this.direction += Math.random() * (2 * this.turnStepAmount) - this.turnStepAmount
 
-        this.direction = this.findNextRay(context, boids);
+        this.direction = this.findNextRay(boids);
 
         var vector = this.findPoint(this.x, this.y, this.stepAmount, this.direction);
         this.x = vector.x;
         this.y = vector.y;
-
-        this.update(context);
     }
 
     buildRays() {
@@ -43,7 +46,7 @@ class Boid {
         return rays;
     }
 
-    findNextRay(context, boids) {
+    findNextRay(boids) {
         let rays = this.buildRays();
 
         for (let i = 0; i < rays.length; i++) {
@@ -54,11 +57,11 @@ class Boid {
 
             let rayAngle = tweakAngle + this.direction + rays[i];
 
-            if (i == 0 && this.detectBoid(context, rayAngle, boids)) {
+            if (i == 0 && this.detectBoid(rayAngle, boids)) {
                 continue;
             }
 
-            if (this.detectBox(context, context.canvas.width, context.canvas.height, rayAngle)) {
+            if (this.detectBox(this.scene_width, this.scene_height, rayAngle)) {
                 continue;
             }
 
@@ -68,7 +71,7 @@ class Boid {
         console.log('cannot find suitable ray');
     }
 
-    detectBoid(context, direction, boids) {
+    detectBoid(direction, boids) {
         for (let i = 0; i < boids.length; i++) {
             // rule out ourselves
             if (this.id == boids[i].id) {
@@ -134,13 +137,13 @@ class Boid {
         }
     }
 
-    detectBox(context, width, height, direction) {
-        let perceptionVector = this.findPoint(this.x, this.y, this.rayLength, direction);
+    detectBox(width, height, direction) {
+        let point = this.findPoint(this.x, this.y, this.rayLength, direction);
 
-        if (perceptionVector.x - this.radius < 0 ||
-            perceptionVector.y - this.radius < 0 ||
-            perceptionVector.x + this.radius > width - 0 ||
-            perceptionVector.y + this.radius > height - 0
+        if (point.x - this.radius < 0 ||
+            point.y - this.radius < 0 ||
+            point.x + this.radius > width - 0 ||
+            point.y + this.radius > height - 0
         ) {
             return true;
         }
@@ -148,7 +151,19 @@ class Boid {
         return false;
     }
 
-    update(context) {
+    findPoint(x1, y1, length, angle) {
+        angle *= Math.PI / 180;
+
+        var x2 = x1 + length * Math.cos(angle),
+            y2 = y1 + length * Math.sin(angle);
+
+        return {
+            x: x2,
+            y: y2
+        };
+    }
+
+    draw(context) {
         this.drawBoid(context);
         this.drawRay(context, this.x, this.y, this.rayLength, this.direction);
     }
@@ -168,37 +183,8 @@ class Boid {
         context.moveTo(x, y);
         context.lineTo(point.x, point.y);
         context.stroke();
-
         context.restore();
     }
-
-    lineToAngle(context, x1, y1, length, angle) {
-        angle *= Math.PI / 180;
-
-        var x2 = x1 + length * Math.cos(angle),
-            y2 = y1 + length * Math.sin(angle);
-
-        context.moveTo(x1, y1);
-        context.lineTo(x2, y2);
-
-        return {
-            x: x2,
-            y: y2
-        };
-    }
-
-    findPoint(x1, y1, length, angle) {
-        angle *= Math.PI / 180;
-
-        var x2 = x1 + length * Math.cos(angle),
-            y2 = y1 + length * Math.sin(angle);
-
-        return {
-            x: x2,
-            y: y2
-        };
-    }
-
 }
 
 class Flock {
@@ -249,35 +235,27 @@ class Scene {
         this.no_of_components = no_of_components;
         this.components = [];
         this.gameArea = {};
+        this.started = false;
+        this.width = 600;
+        this.height = 600;
+
         this.initGameArea();
         this.initComponents();
-        this.started = false;
     }
 
     initComponents() {
         let components = [];
         for (let i = 0; i < this.no_of_components; i++) {
-            // let x, y, z;
-            // if (i == 0) {
-            //     x = 100;
-            //     y = 100;
-            //     z = 0;
-            // } else {
-            //     x = 105;
-            //     y = 100;
-            //     z = 180;
-            // }
-
             components.push(new Boid(
-                this.gameArea.context,
                 this.component_size,
                 "black",
                 300, 300, Math.random() * 360,
-                // x, y, z,
                 // Math.random() * (this.gameArea.canvas.width - 100) + 50,
                 // Math.random() * (this.gameArea.canvas.height - 100) + 50,
                 // Math.random() * 360,
-                i
+                i,
+                this.width,
+                this.height
             ));
         }
 
@@ -285,7 +263,7 @@ class Scene {
     }
 
     initGameArea() {
-        this.gameArea = new GameArea(600, 600);
+        this.gameArea = new GameArea(this.width, this.height);
         this.gameArea.init()
     }
 
@@ -305,7 +283,8 @@ class Scene {
     update() {
         this.gameArea.clear();
         for (let i = 0; i < this.no_of_components; i++) {
-            this.components[i].move(this.gameArea.context, this.components);
+            this.components[i].move(this.components);
+            this.components[i].draw(this.gameArea.context);
         }
     }
 
@@ -331,7 +310,7 @@ class Scene {
 
 }
 
-let scene = new Scene(5, 100);
+let scene = new Scene(5, 2);
 
 function stop() {
     scene.stop();