From cc3a719542715779420bd8a3ec4856c351611b06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= Date: Fri, 8 May 2020 17:42:15 +0200 Subject: [PATCH] Add obstacles --- boids.mjs | 145 +++++++++++++++++++++++++------------ vector.mjs => geometry.mjs | 52 ++++++++++++- index.html | 10 ++- 3 files changed, 155 insertions(+), 52 deletions(-) rename vector.mjs => geometry.mjs (57%) diff --git a/boids.mjs b/boids.mjs index 156e993..94f442c 100644 --- a/boids.mjs +++ b/boids.mjs @@ -1,8 +1,52 @@ -import Vector from './vector.mjs'; +import {Vector} from './geometry.mjs'; + +// Outline of the shape of a boid when angled at 0 rad +const boidShape = [ + new Vector(1, 0), + new Vector(-.5, .5), + new Vector(-.5, -.5), + new Vector(1, 0), +]; +const boidShapeLength = boidShape.length; + +class Boid +{ + constructor(params, center) + { + this.params = params; + this.pos = center.clone(); + this.vel = new Vector(Math.random() - 0.5, Math.random() - 0.5); + this.register = new Vector(0, 0); + } + + draw(ctx) + { + const transformed = this.register; + const angle = this.vel.angle(); + let isFirst = true; + + for (let j = 0; j < boidShapeLength; ++j) + { + transformed.x = boidShape[j].x; + transformed.y = boidShape[j].y; + transformed.rotate(angle).mul(this.params.radius).add(this.pos); + + if (isFirst) + { + ctx.moveTo(transformed.x, transformed.y); + isFirst = false; + } + else + { + ctx.lineTo(transformed.x, transformed.y); + } + } + } +} class Boids { - constructor(canvas, params = {}) + constructor(canvas, obstacles, params = {}) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); @@ -27,13 +71,18 @@ class Boids this.height = canvas.height; // Current center point of the canvas - this.center = new Vector(canvas.width / 2, canvas.height / 2); + this.center = null; // Last time where the canvas was repainted this.lastTime = null; // List of active simulated boids this.boids = []; + this.boidsLength = 0; + + // List of obstacles + this.obstacles = obstacles; + this.obstaclesLength = this.obstacles.length; // Vector registers used for holding temporary values this.registers = [ @@ -46,14 +95,7 @@ class Boids // otherwise, null this.animationId = null; - // Outline of the shape of a boid when angled at 0 rad - this.boidShape = [ - new Vector(1, 0), - new Vector(-.5, .5), - new Vector(-.5, -.5), - new Vector(1, 0), - ]; - this.boidShapeLength = this.boidShape.length; + this._afterResize(); } /** Change the canvas’ dimensions */ @@ -64,16 +106,22 @@ class Boids this.width = width; this.height = height; - this.center = new Vector(width / 2, height / 2); + + this._afterResize(); + } + + _afterResize() + { + this.center = new Vector(this.width / 2, this.height / 2); + this.ctx.resetTransform(); + this.ctx.translate(this.center.x, this.center.y); } /** Introduce a new boid in the simulation. */ add(center) { - this.boids.push({ - pos: center.clone(), - vel: new Vector(Math.random() - 0.5, Math.random() - 0.5), - }); + this.boids.push(new Boid(this.params, center)); + this.boidsLength += 1; } /** Start the simulation. */ @@ -125,9 +173,9 @@ class Boids */ _update(delta) { - const length = this.boids.length; + const boidsLength = this.boidsLength; - for (let i = 0; i < length; ++i) + for (let i = 0; i < boidsLength; ++i) { const me = this.boids[i]; @@ -137,7 +185,9 @@ class Boids let visibles = 0; - for (let j = 0; j < length; ++j) + // Compute mean flock position and velocity and compute + // the repel force + for (let j = 0; j < boidsLength; ++j) { if (i != j) { @@ -188,6 +238,17 @@ class Boids .mul(this.params.matchAccel)); } + // Avoid obstacles + for (let j = 0; j < this.obstaclesLength; ++j) + { + const obstacle = this.obstacles[j]; + + if (obstacle.intersect(me.pos, this.params.radius)) + { + me.vel.sub(obstacle.center).add(me.pos); + } + } + // Do not surpass maximum speed const speed = me.vel.normSquared(); @@ -207,42 +268,32 @@ class Boids */ _draw() { - const length = this.boids.length; - const transformed = this.registers[0]; + const boidsLength = this.boidsLength; + const obstaclesLength = this.obstaclesLength; - this.ctx.clearRect(0, 0, this.width, this.height); + this.ctx.clearRect( + -this.width / 2, -this.height / 2, + this.width, this.height + ); - // Draw each boid’s head following the angle of its course + // Draw obstacles + this.ctx.fillStyle = '#dddddd'; this.ctx.beginPath(); - this.ctx.fillStyle = this.params.color; - for (let i = 0; i < length; ++i) + for (let i = 0; i < obstaclesLength; ++i) { - const boid = this.boids[i]; - const angle = boid.vel.angle(); - let isFirst = true; + this.obstacles[i].draw(this.ctx); + } - for (let j = 0; j < this.boidShapeLength; ++j) - { - transformed.x = this.boidShape[j].x; - transformed.y = this.boidShape[j].y; + this.ctx.fill(); - transformed - .rotate(angle) - .mul(this.params.radius) - .add(this.center) - .add(boid.pos); + // Draw boids + this.ctx.fillStyle = this.params.color; + this.ctx.beginPath(); - if (isFirst) - { - this.ctx.moveTo(transformed.x, transformed.y); - isFirst = false; - } - else - { - this.ctx.lineTo(transformed.x, transformed.y); - } - } + for (let i = 0; i < boidsLength; ++i) + { + this.boids[i].draw(this.ctx); } this.ctx.fill(); diff --git a/vector.mjs b/geometry.mjs similarity index 57% rename from vector.mjs rename to geometry.mjs index d26fb8c..d1dcda5 100644 --- a/vector.mjs +++ b/geometry.mjs @@ -1,4 +1,4 @@ -class Vector +export class Vector { constructor(x = 0, y = 0) { @@ -82,4 +82,52 @@ class Vector } } -export default Vector; +export class Rectangle +{ + constructor(x, y, w, h) + { + this.x = x; + this.y = y; + this.w = w; + this.h = h; + this.center = new Vector(x + w / 2, y + h / 2); + } + + intersect(point, radius) + { + return ( + point.x >= this.x - radius + && point.x < this.x + this.w + radius + && point.y >= this.y - radius + && point.y < this.y + this.h + radius + ); + } + + draw(ctx) + { + ctx.rect(this.x, this.y, this.w, this.h); + } +} + +export class Circle +{ + constructor(x, y, r) + { + this.r = r; + this.center = new Vector(x, y); + } + + intersect(point, radius) + { + return ( + Vector.distSquared(this.center, point) + <= (this.r + radius) * (this.r + radius) + ); + } + + draw(ctx) + { + ctx.moveTo(this.center.x + this.r, this.center.y); + ctx.arc(this.center.x, this.center.y, this.r, 0, 2 * Math.PI, false); + } +} diff --git a/index.html b/index.html index 4a36eb3..bdaa98d 100644 --- a/index.html +++ b/index.html @@ -25,17 +25,21 @@