boids/draw.mjs

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();
};