eluvade / fireflies

HTML canvas animated Fireflies

Fireflies ·

Fireflies are an HTML canvas animation written in JavaScript.

Installation

• Use Fireflies as a <script> tag from a CDN
• Add Fireflies package npm i fireflies.js --only=prod from npm

Usage

Import and initialize fireflies with default configuration:

import Fireflies from 'fireflies.js'
Fireflies.initialize()

Example of an alternative configuration:

Fireflies.initialize(undefined, [5, 50], [{ fill: '#ffffff', glow: '#17a6bb' }], true, true, true, false)

List of static methods

• Fireflies.initialize() Creates a canvas, appends it to the animating the fireflies.
• Fireflies.terminate() Deletes the canvas and stops the animation.

The initialize function

Please note that the order of parameters is fixed.

/**
* The Fireflies.initialize() function
* @param {integer} quantity            - the number of fireflies to create, dynamically created based on window size by default
* @param {integer or an array} radius  - use array to specify the minimum and maximum firefly size in px
* @param {array of objects} color      - each object represents a possible firefly color styling containing the fill and glow property
* @param {boolean} collision           - should fireflies interact with each other and the mouse?
* @param {boolean} pulse               - should the glow of fireflies change its intensity over time?
* @param {boolean} flicker             - should the fireflies flicker periodically?
* @param {boolean} connect             - should fireflies weave a web of threads in-between them?
*/
  static initialize(quantity = Math.floor((window.innerHeight + window.innerWidth) / 100), radius = [5, 25 + Math.floor((window.innerHeight + window.innerWidth) / 100)], color = [{ fill: '#ffffea', glow: '#ff881b' }], collision = true, pulse = true, flicker = true, connect = false) {
  ...
}

The undefined value or omitting parameters will revert to default settings / parameters.

Tips

Due to the default color scheme, fireflies look their best over dark background. I suggest using the following css declaration, at least for testing purposes:

body {
  background-color: black;
  /* overflow: none; */
}

Contributing

Fireflies were originally written by Bunny Eluvade.
Big thanks to all our other contributors who made this possible.
Keeping it simple and lightweight is the number 1 priority. Don't add any unnecessary libraries.

License

This project is licensed under the MIT License.