2020-05-04 15:17:55 +00:00
|
|
|
<!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>
|
2020-05-08 09:59:46 +00:00
|
|
|
<script type="module">
|
|
|
|
|
import Boids from './boids.mjs';
|
2020-05-08 15:42:15 +00:00
|
|
|
import {Circle, Rectangle, Vector} from './geometry.mjs';
|
2020-05-08 09:59:46 +00:00
|
|
|
|
|
|
|
|
const canvas = document.querySelector('#boids-canvas');
|
2020-05-08 15:42:15 +00:00
|
|
|
const boids = new Boids(canvas, [
|
|
|
|
|
new Rectangle(-400, -200, 200, 150),
|
|
|
|
|
new Circle(200, 200, 100),
|
|
|
|
|
new Circle(300, 200, 100),
|
2020-05-08 16:00:56 +00:00
|
|
|
], {debug: true});
|
2020-05-08 09:59:46 +00:00
|
|
|
|
|
|
|
|
canvas.onclick = ev =>
|
|
|
|
|
{
|
|
|
|
|
const pos = new Vector(ev.offsetX, ev.offsetY);
|
|
|
|
|
pos.sub(boids.center);
|
|
|
|
|
|
2020-05-08 15:42:15 +00:00
|
|
|
for (let i = 0; i < 500; ++i)
|
2020-05-08 09:59:46 +00:00
|
|
|
{
|
|
|
|
|
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>
|
2020-05-04 15:17:55 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
