boids-canvas
v1.1.1
Published
A sexy looking Canvas and Javascript implementation of Craig Reynold's boids algorithm for flocking behaviour.
Downloads
2
Maintainers
mikechristensenReadme
BoidsCanvas
Overview
A sexy looking HTML5 and Javascript implementation of Craig Reynold's boids algorithm for flocking behaviour. Fully plug n' play, modular and customisable.
Go ahead and fork the repo and open demo.html to give it a go!
Usage
Clone the repository to get started. Use this animation on your webpage simply by:
<body>
<div id="boids-canvas"></div>
<script type="text/javascript" src="boids-canvas.js"></script>
<script type="text/javascript">
var boidsCanvas = new BoidsCanvas(canvasDiv, options);
</script>
</body>A number of options are supported:
var options = {
background: '#ecf0f1',
density: 'medium',
speed: 'medium',
interactive: true,
mixedSizes: true,
boidColours: ["#34495e", "#e74c3c", '#2ecc71', '#9b59b6', '#f1c40f', '#1abc9c']
};
var canvasDiv = document.getElementById('boids-canvas');Options
background: specify a hexadecimal colour (as a string) or an image pathdensity: can take valueslow,mediumorhigh. Defaults tomedium.speed: can take valuesslow,mediumorfast. Defaults tomedium.interactive: can take valuestrueorfalse. When true, boids will be attracted to the mouse pointer. Defaults totrue.mixedSizes: can take valuestrueorfalse. When true, boids will be of varying sizes - larger boids even have more inertia. Defaults totrue.boidColours: an array of hexadecimal colours (as strings) specifying the colours boids can take (assigned randomly). Defaults to all boids#ff3333