Only attract to center when out of bounds + tuning

This commit is contained in:
Mattéo Delabre 2020-05-04 19:03:50 +02:00
parent e01f977903
commit fd32a3b1d0
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
3 changed files with 18 additions and 12 deletions

View File

@ -4,7 +4,7 @@ const meanPos = new Vector(0, 0);
const meanVel = new Vector(0, 0); const meanVel = new Vector(0, 0);
const repelForce = new Vector(0, 0); const repelForce = new Vector(0, 0);
export const update = (boids, params, time) => export const update = (boids, params, width, height, time) =>
{ {
const boidsSize = boids.length; const boidsSize = boids.length;
@ -47,8 +47,12 @@ export const update = (boids, params, time) =>
.mul(params.centerAccel)); .mul(params.centerAccel));
} }
// Attract toward center of screen // Attract toward center of screen if out of bounds
me.vel.addMul(me.pos, -0.01); 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 // Repel away from close boids
me.vel.add(repelForce.mul(params.repelAccel)); me.vel.add(repelForce.mul(params.repelAccel));

View File

@ -10,7 +10,7 @@ const boidShape = [
const boidShapeSize = boidShape.length; const boidShapeSize = boidShape.length;
const transformed = new Vector(0, 0); const transformed = new Vector(0, 0);
export const fill = (activeBoids, params, ctx, width, height, center) => export const fill = (activeBoids, params, width, height, ctx, center) =>
{ {
const boidsSize = activeBoids.length; const boidsSize = activeBoids.length;
@ -18,7 +18,7 @@ export const fill = (activeBoids, params, ctx, width, height, center) =>
// Draw each boids head following the angle of its course // Draw each boids head following the angle of its course
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = 'black'; ctx.fillStyle = params.color;
for (let i = 0; i < boidsSize; ++i) for (let i = 0; i < boidsSize; ++i)
{ {

View File

@ -3,16 +3,18 @@ import * as boids from './boids.mjs';
import * as draw from './draw.mjs'; import * as draw from './draw.mjs';
const params = { const params = {
centerAccel: 0.01, centerAccel: 0.075,
repelAccel: 1, repelAccel: 0.8,
matchAccel: 0.1, matchAccel: 0.15,
boundsAccel: 0.01,
maxSpeed: 300, maxSpeed: 300,
closeDist: 20, closeDist: 20,
visibleDist: 80, visibleDist: 60,
radius: 10, radius: 10,
color: '#675148',
}; };
const boidsCanvas = document.querySelector('#boids-canvas'); const boidsCanvas = document.querySelector('#boids-canvas');
@ -52,7 +54,7 @@ boidsCanvas.onclick = ev =>
{ {
const pos = new Vector(ev.offsetX, ev.offsetY); const pos = new Vector(ev.offsetX, ev.offsetY);
pos.sub(center); pos.sub(center);
addBoids(pos, 50); addBoids(pos, 100);
}; };
let paused = false; let paused = false;
@ -68,8 +70,8 @@ const loop = time =>
const delta = (time - lastTime) / 1000; const delta = (time - lastTime) / 1000;
lastTime = time; lastTime = time;
boids.update(activeBoids, params, delta); boids.update(activeBoids, params, width, height, delta);
draw.fill(activeBoids, params, boidsCtx, width, height, center); draw.fill(activeBoids, params, width, height, boidsCtx, center);
if (!paused) if (!paused)
{ {