boid
Version:
Bird-like behaviours
58 lines (50 loc) • 1.53 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>boid - examples - path</title>
<link href="css/styles.css" rel="stylesheet">
<link href="css/paraiso.light.css" rel="stylesheet">
</head>
<body>
<section>
<header>
<h2>follow path</h2>
</header>
<canvas width="640" height="480"></canvas>
<p>Click to add points</p>
<pre><code class="js">
var pathFollower = new Boid();
pathFollower.setBounds(graphics.width, graphics.height);
pathFollower.edgeBehavior = null;
// build circular path
var path = [],
x = canvas.width / 2,
y = canvas.height / 2,
radius = 200,
count = 8,
angle = Math.PI * 2 / count,
point;
for (var i = 0; i < count; i++) {
point = Boid.vec2();
point.x = x + radius * Math.cos(i * angle);
point.y = y + radius * Math.sin(i * angle);
path.push(point);
}
function update() {
window.requestAnimationFrame(update);
pathFollower.followPath(path, true).update();
}
update();
</code></pre>
</section>
<script src="js/dat.gui.min.js"></script>
<script src="js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="../dist/boid.js"></script>
<script src="js/fps.js"></script>
<script src="js/path.js"></script>
</body>
</html>