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),
];

export const boids = (activeBoids, params, ctx, width, height, center) =>
{
    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 boid of activeBoids)
    {
        const angle = boid.vel.angle();
        let isFirst = true;

        for (let point of boidShape)
        {
            const trans = boid.pos.add(center)
                .add(point.rotate(angle).mul(params.radius))

            if (isFirst)
            {
                ctx.moveTo(trans.x, trans.y);
                isFirst = false;
            }
            else
            {
                ctx.lineTo(trans.x, trans.y);
            }
        }
    }

    ctx.fill();
};