boids-canvas
Advanced tools
A sexy looking Canvas and Javascript implementation of Craig Reynold's boids algorithm for flocking behaviour.
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!
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');
background: specify a hexadecimal colour (as a string) or an image pathdensity: can take values low, medium or high. Defaults to medium.speed: can take values slow, medium or fast. Defaults to medium.interactive: can take values true or false. When true, boids will be attracted to the mouse pointer. Defaults to true.mixedSizes: can take values true or false. When true, boids will be of varying sizes - larger boids even have more inertia. Defaults to true.boidColours: an array of hexadecimal colours (as strings) specifying the colours boids can take (assigned randomly). Defaults to all boids #ff3333FAQs
A sexy looking Canvas and Javascript implementation of Craig Reynold's boids algorithm for flocking behaviour.
We found that boids-canvas demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.