Make radius an actual radius
This commit is contained in:
parent
9c9afa2409
commit
becafed267
70
draw.mjs
70
draw.mjs
|
@ -1,81 +1,21 @@
|
||||||
import Vector from './vector.mjs';
|
import Vector from './vector.mjs';
|
||||||
|
|
||||||
const boidShape = [
|
const boidShape = [
|
||||||
new Vector(2, 0),
|
new Vector(1, 0),
|
||||||
new Vector(-1, 1),
|
new Vector(-.5, .5),
|
||||||
new Vector(-1, -1),
|
new Vector(-.5, -.5),
|
||||||
new Vector(2, 0),
|
new Vector(1, 0),
|
||||||
];
|
];
|
||||||
|
|
||||||
const boidShapeSize = boidShape.length;
|
const boidShapeSize = boidShape.length;
|
||||||
const transformed = new Vector(0, 0);
|
const transformed = new Vector(0, 0);
|
||||||
|
|
||||||
export const boids = (activeBoids, params, ctx, width, height, center) =>
|
export const fill = (activeBoids, params, ctx, width, height, center) =>
|
||||||
{
|
{
|
||||||
const boidsSize = activeBoids.length;
|
const boidsSize = activeBoids.length;
|
||||||
|
|
||||||
ctx.clearRect(0, 0, width, height);
|
ctx.clearRect(0, 0, width, height);
|
||||||
|
|
||||||
// // Draw each boid’s visibility and proximity zones
|
|
||||||
// ctx.beginPath();
|
|
||||||
// ctx.fillStyle = '#BBEE94';
|
|
||||||
|
|
||||||
// for (let boid of activeBoids)
|
|
||||||
// {
|
|
||||||
// const trans = boid.pos.add(center);
|
|
||||||
|
|
||||||
// ctx.moveTo(
|
|
||||||
// trans.x + params.visibleDist,
|
|
||||||
// trans.y
|
|
||||||
// );
|
|
||||||
|
|
||||||
// ctx.arc(
|
|
||||||
// trans.x, trans.y,
|
|
||||||
// params.visibleDist,
|
|
||||||
// 0, 2 * Math.PI
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
// ctx.fill();
|
|
||||||
// ctx.stroke();
|
|
||||||
|
|
||||||
// ctx.beginPath();
|
|
||||||
// ctx.fillStyle = '#EE9495';
|
|
||||||
|
|
||||||
// for (let boid of activeBoids)
|
|
||||||
// {
|
|
||||||
// const trans = boid.pos.add(center);
|
|
||||||
|
|
||||||
// ctx.moveTo(
|
|
||||||
// trans.x + params.closeDist,
|
|
||||||
// trans.y
|
|
||||||
// );
|
|
||||||
|
|
||||||
// ctx.arc(
|
|
||||||
// trans.x, trans.y,
|
|
||||||
// params.closeDist,
|
|
||||||
// 0, 2 * Math.PI
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
// ctx.fill();
|
|
||||||
// ctx.stroke();
|
|
||||||
|
|
||||||
// // Draw each boid’s velocity vector
|
|
||||||
// ctx.beginPath();
|
|
||||||
// ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
|
|
||||||
|
|
||||||
// for (let boid of activeBoids)
|
|
||||||
// {
|
|
||||||
// const start = boid.pos.add(center);
|
|
||||||
// const end = start.add(boid.vel.mul(0.25));
|
|
||||||
|
|
||||||
// ctx.moveTo(start.x, start.y);
|
|
||||||
// ctx.lineTo(end.x, end.y);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// ctx.stroke();
|
|
||||||
|
|
||||||
// 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 = 'black';
|
||||||
|
|
|
@ -12,7 +12,7 @@ const params = {
|
||||||
closeDist: 20,
|
closeDist: 20,
|
||||||
visibleDist: 80,
|
visibleDist: 80,
|
||||||
|
|
||||||
radius: 5,
|
radius: 10,
|
||||||
};
|
};
|
||||||
|
|
||||||
const boidsCanvas = document.querySelector('#boids-canvas');
|
const boidsCanvas = document.querySelector('#boids-canvas');
|
||||||
|
@ -58,7 +58,7 @@ const loop = time =>
|
||||||
lastTime = time;
|
lastTime = time;
|
||||||
|
|
||||||
boids.update(activeBoids, params, delta);
|
boids.update(activeBoids, params, delta);
|
||||||
draw.boids(activeBoids, params, boidsCtx, width, height, center);
|
draw.fill(activeBoids, params, boidsCtx, width, height, center);
|
||||||
|
|
||||||
requestAnimationFrame(loop);
|
requestAnimationFrame(loop);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue