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:
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;
Options
background
: specify a hexadecimal colour (as a string) or an image pathdensity
: can take valueslow
,medium
orhigh
. Defaults tomedium
.speed
: can take valuesslow
,medium
orfast
. Defaults tomedium
.interactive
: can take valuestrue
orfalse
. When true, boids will be attracted to the mouse pointer. Defaults totrue
.mixedSizes
: can take valuestrue
orfalse
. 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