summaryrefslogtreecommitdiff
path: root/public/js/app.js
diff options
context:
space:
mode:
Diffstat (limited to 'public/js/app.js')
-rw-r--r--public/js/app.js119
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();