havox/projects/flocking/script.js

import init, { SimulationWasm } from './pkg/flocking.js';

const BOIDS_PER_1920X1080 = 250;
const MIN_INITIAL_BOIDS = 100;
const MAX_INITIAL_BOIDS = 1000;
const BOID_STEP = 10;

let wasm = null;
let sim = null;
let canvas = null;
let ctx = null;
let controls = null;
let controlsToggle = null;
let controlsResizeObserver = null;
let frameCount = 0;
let lastFpsUpdate = Date.now();
let displayWidth = 1;
let displayHeight = 1;
let resizeAnimationFrame = 0;

function clamp(value, min, max) {
    return Math.min(Math.max(value, min), max);
}

function getInitialBoidCount(width, height) {
    const areaScale = (width * height) / (1920 * 1080);
    const targetCount = Math.round(BOIDS_PER_1920X1080 * areaScale);
    const clampedCount = clamp(targetCount, MIN_INITIAL_BOIDS, MAX_INITIAL_BOIDS);
    return Math.round(clampedCount / BOID_STEP) * BOID_STEP;
}

function syncBoidCountToViewport(width, height) {
    const targetCount = getInitialBoidCount(width, height);
    let currentCount = sim.get_boid_count();

    while (currentCount < targetCount) {
        sim.add_boid();
        currentCount = sim.get_boid_count();
    }

    while (currentCount > targetCount) {
        sim.remove_boid();
        currentCount = sim.get_boid_count();
    }

    updateBoidCount();
}

function updateControlsCollapsedState(isCollapsed) {
    if (controls === null || controlsToggle === null) {
        return;
    }

    controls.classList.toggle('collapsed', isCollapsed);
    controls.setAttribute('aria-expanded', String(!isCollapsed));
    controlsToggle.setAttribute('aria-expanded', String(!isCollapsed));
    controlsToggle.setAttribute('aria-label', isCollapsed ? 'Expand controls' : 'Collapse controls');
    controlsToggle.textContent = isCollapsed ? '‹' : '›';
}

function sizeCanvasToViewport() {
    const dpr = window.devicePixelRatio || 1;
    const nextDisplayWidth = Math.max(1, Math.floor(canvas.clientWidth));
    const nextDisplayHeight = Math.max(1, Math.floor(canvas.clientHeight));
    const nextBufferWidth = Math.max(1, Math.round(nextDisplayWidth * dpr));
    const nextBufferHeight = Math.max(1, Math.round(nextDisplayHeight * dpr));

    if (canvas.width !== nextBufferWidth || canvas.height !== nextBufferHeight) {
        canvas.width = nextBufferWidth;
        canvas.height = nextBufferHeight;
    }

    displayWidth = nextDisplayWidth;
    displayHeight = nextDisplayHeight;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    document.getElementById('canvasSize').textContent = `${displayWidth}x${displayHeight}`;

    return { width: displayWidth, height: displayHeight };
}

function scheduleResize() {
    if (resizeAnimationFrame !== 0) {
        return;
    }

    resizeAnimationFrame = window.requestAnimationFrame(() => {
        resizeAnimationFrame = 0;
        const { width, height } = sizeCanvasToViewport();
        if (sim !== null) {
            sim.resize(width, height);
            syncBoidCountToViewport(width, height);
        }
    });
}

function setupResizeObserver() {
    controlsResizeObserver = new ResizeObserver(() => {
        scheduleResize();
    });
    controlsResizeObserver.observe(document.getElementById('container'));
    controlsResizeObserver.observe(controls);
}

async function run() {
    wasm = await init();

    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    controls = document.getElementById('controls');
    controlsToggle = document.getElementById('controlsToggle');
    updateControlsCollapsedState(false);

    const { width, height } = sizeCanvasToViewport();
    sim = new SimulationWasm(width, height, getInitialBoidCount(width, height));

    setupControls();
    setupResizeObserver();
    updateBoidCount();
    window.addEventListener('resize', scheduleResize);

    animate();
}

function setupControls() {
    const alignSlider = document.getElementById('alignSlider');
    const cohesionSlider = document.getElementById('cohesionSlider');
    const separationSlider = document.getElementById('separationSlider');
    const addBtn = document.getElementById('addBtn');
    const removeBtn = document.getElementById('removeBtn');

    controlsToggle.addEventListener('click', () => {
        const isCollapsed = !controls.classList.contains('collapsed');
        updateControlsCollapsedState(isCollapsed);
        scheduleResize();
    });

    alignSlider.addEventListener('input', (e) => {
        const value = Number.parseFloat(e.target.value);
        sim.set_align_mult(value);
        document.getElementById('alignValue').textContent = value.toFixed(2);
    });

    cohesionSlider.addEventListener('input', (e) => {
        const value = Number.parseFloat(e.target.value);
        sim.set_cohesion_mult(value);
        document.getElementById('cohesionValue').textContent = value.toFixed(2);
    });

    separationSlider.addEventListener('input', (e) => {
        const value = Number.parseFloat(e.target.value);
        sim.set_separation_mult(value);
        document.getElementById('separationValue').textContent = value.toFixed(2);
    });

    addBtn.addEventListener('click', () => {
        sim.add_boid();
        updateBoidCount();
    });

    removeBtn.addEventListener('click', () => {
        sim.remove_boid();
        updateBoidCount();
    });
}

function updateBoidCount() {
    document.getElementById('boidCount').textContent = sim.get_boid_count();
}

function getBoidView() {
    const ptr = sim.boid_buffer_ptr();
    const len = sim.boid_buffer_len();
    return new Float32Array(wasm.memory.buffer, ptr, len);
}

function animate() {
    ctx.fillStyle = '#121212';
    ctx.fillRect(0, 0, displayWidth, displayHeight);

    sim.step();
    const boidData = getBoidView();
    const stride = sim.boid_buffer_stride();

    for (let i = 0; i < boidData.length; i += stride) {
        const x = boidData[i];
        const y = boidData[i + 1];
        const vx = boidData[i + 2];
        const vy = boidData[i + 3];
        const r = boidData[i + 4];
        const g = boidData[i + 5];
        const b = boidData[i + 6];
        const a = boidData[i + 7];

        const speedSq = vx * vx + vy * vy;
        let dx;
        let dy;
        if (speedSq > 1e-6) {
            const invSpeed = 1 / Math.sqrt(speedSq);
            dx = vx * invSpeed;
            dy = vy * invSpeed;
        } else {
            dx = 0;
            dy = -1;
        }

        const size = 5;
        const headMult = 3;
        const px = -dy;
        const py = dx;

        const tipX = x + dx * size * headMult;
        const tipY = y + dy * size * headMult;
        const baseX = x - dx * size;
        const baseY = y - dy * size;
        const leftX = baseX + px * size;
        const leftY = baseY + py * size;
        const rightX = baseX - px * size;
        const rightY = baseY - py * size;

        ctx.strokeStyle = `rgba(${r},${g},${b},${a / 255})`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(tipX, tipY);
        ctx.lineTo(leftX, leftY);
        ctx.lineTo(rightX, rightY);
        ctx.closePath();
        ctx.stroke();
    }

    frameCount += 1;
    const now = Date.now();
    if (now - lastFpsUpdate >= 1000) {
        document.getElementById('fps').textContent = frameCount;
        frameCount = 0;
        lastFpsUpdate = now;
    }

    requestAnimationFrame(animate);
}

await run();