Only attract to center when out of bounds + tuning
This commit is contained in:
parent
e01f977903
commit
fd32a3b1d0
10
boids.mjs
10
boids.mjs
|
@ -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));
|
||||||
|
|
4
draw.mjs
4
draw.mjs
|
@ -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 boid’s head following the angle of its course
|
// Draw each boid’s 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)
|
||||||
{
|
{
|
||||||
|
|
16
index.mjs
16
index.mjs
|
@ -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)
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in New Issue