galleryprojects

Colourful Boids

This JavaScript project simulates a flock of colorful boids moving around a canvas. The boids exhibit flocking behavior, including alignment, cohesion, and separation. Each boid is represented by a series of colored dots forming its body.

Installation

You can install Colourful Boids via npm:

npm i @mjpeake/colourfulboids

Alternatively, you can also use the following script tag reference:

<script src="https://cdn.jsdelivr.net/npm/@mjpeake/colourfulboids@1.0.2/dist/colourfulboids.js"></script>

Parameters

ColourfulBoids(parentElement, boidColor, backgroundColor);
  • parentElement: The HTML element where the Boids canvas will be appended.
  • boidColor: Optional. The color of the Boids in hexadecimal notation. If not provided, a random palette will be used.
  • backgroundColor: Optional. The background color of the canvas in hexadecimal notation. If not provided, a random palette will be used.

Usage

To use Colourful Boids in your project, include the library in your HTML file and initialize it with the appropriate parameters. Here’s an example:

 1<!DOCTYPE html>
 2<html>
 3
 4<head>
 5  <title>Colourful Boids</title>
 6  <link rel="stylesheet" href="assets/style.css">
 7  <script src="https://cdn.jsdelivr.net/npm/@mjpeake/colourfulboids@1.0.2/dist/colourfulboids.js"></script>
 8  <script> ColourfulBoids("boids") </script>
 9</head>
10
11<body>
12  <div id="boids"></div>
13</body>
14
15</htmL>

This example initializes a Colourful Boids visualization without defining any specific colours to be used, as a result the sketch will randomly select two contrasting colours.

Features

  • Flocking Behavior: The boids exhibit realistic flocking behavior, including alignment, cohesion, and separation.
  • Colorful Visualization: Each boid is represented by a series of colored dots forming its body, creating an aesthetically pleasing visualization.
  • Dynamic Population: The population size of the flock adjusts based on the size of the canvas and the internally-specified population density.

Credits

This project was inspired by Craig Reynolds’ classic boids algorithm for simulating flocking behavior.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Gallery