<!DOCTYPE html>
<html>
<head>
<title>Boids</title>
<meta charset="utf-8">
<style>
body, html
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#boids-canvas
{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="boids-canvas"></canvas>
<script type="module">
import Boids from './boids.mjs';
import {Circle, Rectangle, Vector} from './geometry.mjs';
const canvas = document.querySelector('#boids-canvas');
const boids = new Boids(canvas, [
new Rectangle(-400, -200, 200, 150),
new Circle(200, 200, 100),
new Circle(300, 200, 100),
], {debug: true});
canvas.onclick = ev =>
{
const pos = new Vector(ev.offsetX, ev.offsetY);
pos.sub(boids.center);
for (let i = 0; i < 500; ++i)
{
boids.add(pos);
}
};
window.onresize = () =>
{
boids.resize(window.innerWidth, window.innerHeight);
};
document.onvisibilitychange = () =>
{
if (document.visibilityState === 'visible')
{
boids.start();
}
else
{
boids.pause();
}
};
boids.resize(window.innerWidth, window.innerHeight);
boids.start();
</script>
</body>
</html>