Create Dynamic Canvas Particle Animations – ParticleBackground.js

ParticleBackground.js is a lightweight JavaScript library for creating animated particle effects with customizable behaviors on an HTML canvas element.

The library generates particles that move smoothly across the screen with randomized paths and colors. Each particle has independent movement patterns and automatically respins when reaching canvas boundaries.

You can use it to add subtle visual effects to landing pages, portfolios, or any section of your website where a non-static background is desired.

How to use it:

1. Download the particleBackground.js file and place it in your project directory. Then, import the ParticleBackground class into your JavaScript file:

import { ParticleBackground } from './particleBackground.js';

2. Create a <canvas> element where the particle effect will be rendered.

<canvas id="bg-canvas"></canvas>

3. To make the Canvas cover the entire viewport, add the following JavaScript to dynamically adjust its dimensions and keep it responsive to window resizing:

const resizeCanvas = () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

4. Initialize the ParticleBackground with the ID of your canvas element. Set the desired number of particles (100 in this example) and start the animation:

const background = new ParticleBackground('bg-canvas');
background.init(100);
background.start();

5. You can also modify the particle behavior directly by editing the particleBackground.js file. This is where you can change particle sizes, colors, and movements.

How It Works

particleBackground.js works by manipulating an HTML5 canvas element. The ParticleBackground class initializes by getting a reference to the canvas and its 2D rendering context. It maintains an array of Particle objects.

The init method populates this array with a specified number of Particle instances. Each Particle has properties for its position (x, y), velocity (vx, vy), size, and color. The reset method gives each particle random initial values within the canvas boundaries.

The start method initiates the animation loop, which is driven by the animate method. Inside animate, the canvas is cleared with a semi-transparent background to create the trailing effect.

Then, for each particle, the update method calculates its new position based on its velocity. If a particle moves outside the canvas boundaries, it’s reset to a new random position.

The draw method renders each particle as a filled circle on the canvas. requestAnimationFrame creates smooth, efficient animation by scheduling the next frame.