boids/draw.mjs

import Vector from './vector.mjs';

const boidShape = [
    new Vector(2, 0),
    new Vector(-1, 1),
    new Vector(-1, -1),
    new Vector(2, 0),
];

const boidShapeSize = boidShape.length;
const transformed = new Vector(0, 0);

export const boids = (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';

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