From 1df97b3b9d589954d23a02fc2ca2cb5d87133e26 Mon Sep 17 00:00:00 2001 From: Fbenas Date: Tue, 13 Oct 2020 19:58:47 +0100 Subject: More refactoring and fixing collisions --- public/js/app.js | 119 +++++++++++++++++++++----------------------------- resources/js/app.js | 2 +- resources/js/boid.js | 90 ++++++++++++++++---------------------- resources/js/scene.js | 27 +++++------- 4 files changed, 98 insertions(+), 140 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(); diff --git a/resources/js/app.js b/resources/js/app.js index b107a71..752bfc9 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,4 +1,4 @@ -let scene = new Scene(5, 100); +let scene = new Scene(5, 2); function stop() { scene.stop(); diff --git a/resources/js/boid.js b/resources/js/boid.js index 6075cc2..2ae692d 100644 --- a/resources/js/boid.js +++ b/resources/js/boid.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,35 +183,6 @@ 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 - }; - } - } diff --git a/resources/js/scene.js b/resources/js/scene.js index d035827..645bb9e 100644 --- a/resources/js/scene.js +++ b/resources/js/scene.js @@ -9,35 +9,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 )); } @@ -45,7 +37,7 @@ class Scene { } initGameArea() { - this.gameArea = new GameArea(600, 600); + this.gameArea = new GameArea(this.width, this.height); this.gameArea.init() } @@ -65,7 +57,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); } } -- cgit v1.2.3