diff options
Diffstat (limited to 'public/js')
-rw-r--r-- | public/js/app.js | 75 |
1 files changed, 48 insertions, 27 deletions
diff --git a/public/js/app.js b/public/js/app.js index c9e5c27..e60548e 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -1,15 +1,15 @@ -class Component { +class Boid { constructor(context, radius, color, x, y, direction, id) { this.rayLength = 40; - this.turnStepAmount = 5; + this.turnStepAmount = 20; this.stepAmount = 4; this.radius = radius; this.x = x; this.y = y; this.direction = direction; this.color = color; - this.fieldOfView = 180; + this.fieldOfView = 270; this.id = id; this.boidBuffer = 20; @@ -21,7 +21,7 @@ class Component { this.direction = this.findNextRay(context, boids); - var vector = this.detectionPoint(this.x, this.y, this.stepAmount, this.direction); + var vector = this.findPoint(this.x, this.y, this.stepAmount, this.direction); this.x = vector.x; this.y = vector.y; @@ -49,7 +49,7 @@ class Component { for (let i = 0; i < rays.length; i++) { let tweakAngle = 0; // if (Math.random() > 0.95) { - // tweakAngle = this.turnStepAmount * Math.random() * 5; + // tweakAngle = this.turnStepAmount * Math.random() - (this.turnStepAmount / 2); // } let rayAngle = tweakAngle + this.direction + rays[i]; @@ -75,7 +75,7 @@ class Component { continue; } - let thisFututrePosition = this.detectionPoint(this.x, this.y, this.boidBuffer, direction); + let thisFututrePosition = this.findPoint(this.x, this.y, this.boidBuffer, direction); let thisPath = { x1: this.x, y1: this.y, @@ -83,7 +83,7 @@ class Component { y2: thisFututrePosition.y }; - let boidFuturePosition = this.detectionPoint(boids[i].x, boids[i].y, boids[i].boidBuffer, boids[i].direction); + let boidFuturePosition = this.findPoint(boids[i].x, boids[i].y, boids[i].boidBuffer, boids[i].direction); let boidPath = { x1: boids[i].x, y1: boids[i].y, @@ -135,7 +135,7 @@ class Component { } detectBox(context, width, height, direction) { - let perceptionVector = this.detectionPoint(this.x, this.y, this.rayLength, direction); + let perceptionVector = this.findPoint(this.x, this.y, this.rayLength, direction); if (perceptionVector.x - this.radius < 0 || perceptionVector.y - this.radius < 0 || @@ -162,17 +162,17 @@ class Component { } drawRay(context, x, y, perceptionDistance, direction) { + let point = this.findPoint(x, y, perceptionDistance, direction); context.lineWidth = 1; - context.beginPath(); - this.lineToAngle(context, x, y, perceptionDistance, direction); + 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), @@ -187,7 +187,7 @@ class Component { }; } - detectionPoint(x1, y1, length, angle) { + findPoint(x1, y1, length, angle) { angle *= Math.PI / 180; var x2 = x1 + length * Math.cos(angle), @@ -201,6 +201,22 @@ class Component { } +class Flock { + constructor() { + this.boids = []; + } + + run() { + for (let i = 0; i < this.boids.length; i++) { + this.boids[i].run(boids); + } + } + + addBoid(boid) { + this.boids.push(boid); + } +} + class GameArea { constructor(canvas_width, canvas_height) { @@ -224,6 +240,10 @@ class GameArea { class Scene { + // boid radius + // no of boids + // scene width + // scene height constructor(component_size, no_of_components) { this.component_size = component_size; this.no_of_components = no_of_components; @@ -237,25 +257,26 @@ class Scene { 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; - } + // let x, y, z; + // if (i == 0) { + // x = 100; + // y = 100; + // z = 0; + // } else { + // x = 105; + // y = 100; + // z = 180; + // } - components.push(new Component( + 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, + // Math.random() * (this.gameArea.canvas.width - 100) + 50, + // Math.random() * (this.gameArea.canvas.height - 100) + 50, + // Math.random() * 360, i )); } @@ -310,7 +331,7 @@ class Scene { } -let scene = new Scene(5, 20); +let scene = new Scene(5, 100); function stop() { scene.stop(); |