boids.mjs

@@ -1,52 +1,8 @@
-import {Vector} from './geometry.mjs';
+import Vector from './vector.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, obstacles, params = {})
+    constructor(canvas, params = {})
     {
         this.canvas = canvas;
         this.ctx = canvas.getContext('2d');
@@ -64,7 +20,6 @@ class Boids
 
             radius: 10,
             color: 'black',
-            debug: false,
         }, params);
 
         // Current width and height of the canvas
@@ -72,18 +27,13 @@ class Boids
         this.height = canvas.height;
 
         // Current center point of the canvas
-        this.center = null;
+        this.center = new Vector(canvas.width / 2, canvas.height / 2);
 
         // 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 = [
@@ -96,7 +46,14 @@ class Boids
         // otherwise, null
         this.animationId = null;
 
-        this._afterResize();
+        // 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;
     }
 
     /** Change the canvas’ dimensions */
@@ -107,22 +64,16 @@ 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(new Boid(this.params, center));
+        this.boids.push({
-        this.boidsLength += 1;
+            pos: center.clone(),
+            vel: new Vector(Math.random() - 0.5, Math.random() - 0.5),
+        });
     }
 
     /** Start the simulation. */
@@ -174,9 +125,9 @@ class Boids
      */
     _update(delta)
     {
-        const boidsLength = this.boidsLength;
+        const length = this.boids.length;
 
-        for (let i = 0; i < boidsLength; ++i)
+        for (let i = 0; i < length; ++i)
         {
             const me = this.boids[i];
 
@@ -186,9 +137,7 @@ class Boids
 
             let visibles = 0;
 
-            // Compute mean flock position and velocity and compute
+            for (let j = 0; j < length; ++j)
-            // the repel force
-            for (let j = 0; j < boidsLength; ++j)
             {
                 if (i != j)
                 {
@@ -239,17 +188,6 @@ 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();
 
@@ -269,35 +207,42 @@ class Boids
      */
     _draw()
     {
-        const boidsLength = this.boidsLength;
+        const length = this.boids.length;
-        const obstaclesLength = this.obstaclesLength;
+        const transformed = this.registers[0];
 
-        this.ctx.clearRect(
+        this.ctx.clearRect(0, 0, this.width, this.height);
-            -this.width / 2, -this.height / 2,
-            this.width, this.height
-        );
 
-        // Draw obstacles
+        // Draw each boid’s head following the angle of its course
-        if (this.params.debug)
-        {
-            this.ctx.fillStyle = '#dddddd';
-            this.ctx.beginPath();
-
-            for (let i = 0; i < obstaclesLength; ++i)
-            {
-                this.obstacles[i].draw(this.ctx);
-            }
-
-            this.ctx.fill();
-        }
-
-        // Draw boids
-        this.ctx.fillStyle = this.params.color;
         this.ctx.beginPath();
+        this.ctx.fillStyle = this.params.color;
 
-        for (let i = 0; i < boidsLength; ++i)
+        for (let i = 0; i < length; ++i)
         {
-            this.boids[i].draw(this.ctx);
+            const boid = this.boids[i];
+            const angle = boid.vel.angle();
+            let isFirst = true;
+
+            for (let j = 0; j < this.boidShapeLength; ++j)
+            {
+                transformed.x = this.boidShape[j].x;
+                transformed.y = this.boidShape[j].y;
+
+                transformed
+                    .rotate(angle)
+                    .mul(this.params.radius)
+                    .add(this.center)
+                    .add(boid.pos);
+
+                if (isFirst)
+                {
+                    this.ctx.moveTo(transformed.x, transformed.y);
+                    isFirst = false;
+                }
+                else
+                {
+                    this.ctx.lineTo(transformed.x, transformed.y);
+                }
+            }
         }
 
         this.ctx.fill();

index.html

@@ -25,21 +25,17 @@
         <canvas id="boids-canvas"></canvas>
         <script type="module">
             import Boids from './boids.mjs';
-            import {Circle, Rectangle, Vector} from './geometry.mjs';
+            import Vector from './vector.mjs';
 
             const canvas = document.querySelector('#boids-canvas');
-            const boids = new Boids(canvas, [
+            const boids = new Boids(canvas);
-                new Rectangle(-400, -200, 200, 150),
-                new Circle(200, 200, 100),
-                new Circle(300, 200, 100),
-            ], {debug: true});
 
             canvas.onclick = ev =>
             {
                 const pos = new Vector(ev.offsetX, ev.offsetY);
                 pos.sub(boids.center);
 
-                for (let i = 0; i < 500; ++i)
+                for (let i = 0; i < 100; ++i)
                 {
                     boids.add(pos);
                 }

vector.mjs

@@ -1,4 +1,4 @@
-export class Vector
+class Vector
 {
     constructor(x = 0, y = 0)
     {
@@ -82,52 +82,4 @@ export class Vector
     }
 }
 
-export class Rectangle
+export default Vector;
-{
-    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);
-    }
-}