Compare commits
No commits in common. "639c56333e286c8a324de1903f67011174c3b96d" and "32411933cd592d6a3dc88bbc349baf0cd174be4c" have entirely different histories.
639c56333e
...
32411933cd
155
boids.mjs
155
boids.mjs
|
|
@ -1,52 +1,8 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
import Vector from './vector.mjs';
|
||||
|
||||
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._afterResize();
|
||||
}
|
||||
|
||||
_afterResize()
|
||||
{
|
||||
this.center = new Vector(this.width / 2, this.height / 2);
|
||||
this.ctx.resetTransform();
|
||||
this.ctx.translate(this.center.x, this.center.y);
|
||||
this.center = new Vector(width / 2, height / 2);
|
||||
}
|
||||
|
||||
/** Introduce a new boid in the simulation. */
|
||||
add(center)
|
||||
{
|
||||
this.boids.push(new Boid(this.params, center));
|
||||
this.boidsLength += 1;
|
||||
this.boids.push({
|
||||
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
|
||||
// the repel force
|
||||
for (let j = 0; j < boidsLength; ++j)
|
||||
for (let j = 0; j < length; ++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 obstaclesLength = this.obstaclesLength;
|
||||
const length = this.boids.length;
|
||||
const transformed = this.registers[0];
|
||||
|
||||
this.ctx.clearRect(
|
||||
-this.width / 2, -this.height / 2,
|
||||
this.width, this.height
|
||||
);
|
||||
this.ctx.clearRect(0, 0, this.width, this.height);
|
||||
|
||||
// Draw obstacles
|
||||
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;
|
||||
// Draw each boid’s head following the angle of its course
|
||||
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();
|
||||
|
|
|
|||
10
index.html
10
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, [
|
||||
new Rectangle(-400, -200, 200, 150),
|
||||
new Circle(200, 200, 100),
|
||||
new Circle(300, 200, 100),
|
||||
], {debug: true});
|
||||
const boids = new Boids(canvas);
|
||||
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export class Vector
|
||||
class Vector
|
||||
{
|
||||
constructor(x = 0, y = 0)
|
||||
{
|
||||
|
|
@ -82,52 +82,4 @@ export class 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);
|
||||
}
|
||||
}
|
||||
export default Vector;
|
||||
Loading…
Reference in New Issue