From 32411933cd592d6a3dc88bbc349baf0cd174be4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= Date: Fri, 8 May 2020 11:59:46 +0200 Subject: [PATCH] Separate example from core --- boids.mjs | 295 ++++++++++++++++++++++++++++++++++++++++++----------- draw.mjs | 53 ---------- index.html | 39 ++++++- index.mjs | 106 ------------------- 4 files changed, 272 insertions(+), 221 deletions(-) delete mode 100644 draw.mjs delete mode 100644 index.mjs diff --git a/boids.mjs b/boids.mjs index 9833820..156e993 100644 --- a/boids.mjs +++ b/boids.mjs @@ -1,79 +1,252 @@ import Vector from './vector.mjs'; -const meanPos = new Vector(0, 0); -const meanVel = new Vector(0, 0); -const repelForce = new Vector(0, 0); - -export const update = (boids, params, width, height, time) => +class Boids { - const boidsSize = boids.length; - - for (let i = 0; i < boidsSize; ++i) + constructor(canvas, params = {}) { - const me = boids[i]; + this.canvas = canvas; + this.ctx = canvas.getContext('2d'); - meanPos.reset(); - meanVel.reset(); - repelForce.reset(); + this.params = Object.assign({ + centerAccel: 0.075, + repelAccel: 0.8, + matchAccel: 0.15, + boundsAccel: 0.01, - let visibleSize = 0; + maxSpeed: 300, - for (let j = 0; j < boidsSize; ++j) + closeDist: 20, + visibleDist: 60, + + radius: 10, + color: 'black', + }, params); + + // Current width and height of the canvas + this.width = canvas.width; + this.height = canvas.height; + + // Current center point of the canvas + 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 = []; + + // Vector registers used for holding temporary values + this.registers = [ + new Vector(0, 0), + new Vector(0, 0), + new Vector(0, 0) + ]; + + // When the simulation is running, the ID of the next rAF request, + // 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; + } + + /** Change the canvas’ dimensions */ + resize(width, height) + { + this.canvas.width = width; + this.canvas.height = height; + + this.width = width; + this.height = height; + this.center = new Vector(width / 2, height / 2); + } + + /** 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), + }); + } + + /** Start the simulation. */ + start() + { + if (this.animationId !== null) { - if (i != j) + return; + } + + this._step = this._step.bind(this); + this.animationId = requestAnimationFrame(this._step); + } + + /** Pause the simulation. */ + pause() + { + cancelAnimationFrame(this.animationId); + this.animationId = null; + this.lastTime = null; + } + + /** + * @private + * Perform a time step of the simulation and update the canvas. + */ + _step(time) + { + if (!this.lastTime) + { + this.lastTime = time; + } + + const delta = (time - this.lastTime) / 1000; + this.lastTime = time; + + this._update(delta); + this._draw(); + + if (this.animationId !== null) + { + this.animationId = requestAnimationFrame(this._step); + } + } + + /** + * @private + * Advance the simulation. + */ + _update(delta) + { + const length = this.boids.length; + + for (let i = 0; i < length; ++i) + { + const me = this.boids[i]; + + const meanPos = this.registers[0].reset(); + const meanVel = this.registers[1].reset(); + const repelForce = this.registers[2].reset(); + + let visibles = 0; + + for (let j = 0; j < length; ++j) { - const you = boids[j]; - const dist = Vector.distSquared(me.pos, you.pos); - - if (dist < params.visibleDist * params.visibleDist) + if (i != j) { - meanPos.add(you.pos); - meanVel.add(you.vel); - visibleSize += 1; + const you = this.boids[j]; + const dist = Vector.distSquared(me.pos, you.pos); - if (dist < params.closeDist * params.closeDist) + if (dist < this.params.visibleDist + * this.params.visibleDist) { - repelForce.add(me.pos).sub(you.pos); + meanPos.add(you.pos); + meanVel.add(you.vel); + visibles += 1; + + if (dist < this.params.closeDist + * this.params.closeDist) + { + repelForce.add(me.pos).sub(you.pos); + } } } } + + // Attract towards center of visible flock + if (visibles >= 1) + { + me.vel.add(meanPos.div(visibles) + .sub(me.pos) + .mul(this.params.centerAccel)); + } + + // Attract toward center of screen if out of bounds + if (me.pos.x < this.width * -.4 + || me.pos.x > this.width * .4 + || me.pos.y < this.height * -.4 + || me.pos.y > this.height * .4) + { + me.vel.addMul(me.pos, -this.params.boundsAccel); + } + + // Repel away from close boids + me.vel.add(repelForce.mul(this.params.repelAccel)); + + // Match other boids’ velocity + if (visibles >= 1) + { + me.vel.add(meanVel.div(visibles) + .sub(me.vel) + .mul(this.params.matchAccel)); + } + + // Do not surpass maximum speed + const speed = me.vel.normSquared(); + + if (speed > this.params.maxSpeed * this.params.maxSpeed) + { + me.vel.div(Math.sqrt(speed)).mul(this.params.maxSpeed); + } + + // Integrate speed + me.pos.addMul(me.vel, delta); + } + } + + /** + * @private + * Redraw the boids. + */ + _draw() + { + const length = this.boids.length; + const transformed = this.registers[0]; + + this.ctx.clearRect(0, 0, this.width, this.height); + + // 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 < length; ++i) + { + 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); + } + } } - // Attract towards center of visible flock - if (visibleSize >= 1) - { - me.vel.add(meanPos.div(visibleSize) - .sub(me.pos) - .mul(params.centerAccel)); - } - - // Attract toward center of screen if out of bounds - if (me.pos.x < width * -.4 || me.pos.x > width * .4 || - me.pos.y < height * -.4 || me.pos.y > height * .4) - { - me.vel.addMul(me.pos, -params.boundsAccel); - } - - // Repel away from close boids - me.vel.add(repelForce.mul(params.repelAccel)); - - // Match other boids’ velocity - if (visibleSize >= 1) - { - me.vel.add(meanVel.div(visibleSize) - .sub(me.vel) - .mul(params.matchAccel)); - } - - // Do not surpass maximum speed - const speed = me.vel.normSquared(); - - if (speed > params.maxSpeed * params.maxSpeed) - { - me.vel.div(Math.sqrt(speed)).mul(params.maxSpeed); - } - - // Integrate speed - me.pos.addMul(me.vel, time); + this.ctx.fill(); } -}; +} + +export default Boids; diff --git a/draw.mjs b/draw.mjs deleted file mode 100644 index e3d514d..0000000 --- a/draw.mjs +++ /dev/null @@ -1,53 +0,0 @@ -import Vector from './vector.mjs'; - -const boidShape = [ - new Vector(1, 0), - new Vector(-.5, .5), - new Vector(-.5, -.5), - new Vector(1, 0), -]; - -const boidShapeSize = boidShape.length; -const transformed = new Vector(0, 0); - -export const fill = (activeBoids, params, width, height, ctx, center) => -{ - const boidsSize = activeBoids.length; - - ctx.clearRect(0, 0, width, height); - - // Draw each boid’s head following the angle of its course - ctx.beginPath(); - ctx.fillStyle = params.color; - - for (let i = 0; i < boidsSize; ++i) - { - const boid = activeBoids[i]; - const angle = boid.vel.angle(); - let isFirst = true; - - for (let j = 0; j < boidShapeSize; ++j) - { - transformed.x = boidShape[j].x; - transformed.y = boidShape[j].y; - - transformed - .rotate(angle) - .mul(params.radius) - .add(center) - .add(boid.pos); - - if (isFirst) - { - ctx.moveTo(transformed.x, transformed.y); - isFirst = false; - } - else - { - ctx.lineTo(transformed.x, transformed.y); - } - } - } - - ctx.fill(); -}; diff --git a/index.html b/index.html index 1ae2493..4a36eb3 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,43 @@ - + diff --git a/index.mjs b/index.mjs deleted file mode 100644 index ab4e04a..0000000 --- a/index.mjs +++ /dev/null @@ -1,106 +0,0 @@ -import Vector from './vector.mjs'; -import * as boids from './boids.mjs'; -import * as draw from './draw.mjs'; - -const params = { - centerAccel: 0.075, - repelAccel: 0.8, - matchAccel: 0.15, - boundsAccel: 0.01, - - maxSpeed: 300, - - closeDist: 20, - visibleDist: 60, - - radius: 10, - color: '#675148', -}; - -const boidsCanvas = document.querySelector('#boids-canvas'); -const boidsCtx = boidsCanvas.getContext('2d'); - -let width = null; -let height = null; -let center = null; - -const updateSize = () => -{ - width = window.innerWidth; - height = window.innerHeight; - center = new Vector(width / 2, height / 2); - - boidsCanvas.width = width; - boidsCanvas.height = height; -}; - -updateSize(); -window.onresize = updateSize; - -const activeBoids = []; - -const addBoids = (pos, count) => -{ - for (let i = 0; i < count; ++i) - { - activeBoids.push({ - pos: pos.clone(), - vel: new Vector(Math.random(), Math.random()), - }); - } -}; - -boidsCanvas.onclick = ev => -{ - const pos = new Vector(ev.offsetX, ev.offsetY); - pos.sub(center); - addBoids(pos, 100); -}; - -let paused = false; -let lastTime = null; - -const loop = time => -{ - if (!lastTime) - { - lastTime = time; - } - - const delta = (time - lastTime) / 1000; - lastTime = time; - - boids.update(activeBoids, params, width, height, delta); - draw.fill(activeBoids, params, width, height, boidsCtx, center); - - if (!paused) - { - requestAnimationFrame(loop); - } -}; - -const start = () => -{ - lastTime = null; - paused = false; - requestAnimationFrame(loop); -}; - -const pause = () => -{ - paused = true; -}; - -document.onvisibilitychange = () => -{ - if (document.visibilityState === 'visible') - { - start(); - } - else - { - pause(); - } -}; - -start();