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';
|
||||
|
||||
const boidShape = [
|
||||
new Vector(2, 0),
|
||||
new Vector(-1, 1),
|
||||
new Vector(-1, -1),
|
||||
new Vector(2, 0),
|
||||
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 boids = (activeBoids, params, ctx, width, height, center) =>
|
||||
export const fill = (activeBoids, params, ctx, width, height, center) =>
|
||||
{
|
||||
const boidsSize = activeBoids.length;
|
||||
|
||||
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
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = 'black';
|
||||
|
|
|
@ -12,7 +12,7 @@ const params = {
|
|||
closeDist: 20,
|
||||
visibleDist: 80,
|
||||
|
||||
radius: 5,
|
||||
radius: 10,
|
||||
};
|
||||
|
||||
const boidsCanvas = document.querySelector('#boids-canvas');
|
||||
|
@ -58,7 +58,7 @@ const loop = time =>
|
|||
lastTime = time;
|
||||
|
||||
boids.update(activeBoids, params, delta);
|
||||
draw.boids(activeBoids, params, boidsCtx, width, height, center);
|
||||
draw.fill(activeBoids, params, boidsCtx, width, height, center);
|
||||
|
||||
requestAnimationFrame(loop);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue