Create Interactive Canvas Particles – js-particles-factory.js

js-particles-factory is a JavaScript library for creating and animating particles on HTML canvas elements. It uses a throttled framerate based on requestAnimationFrame for smooth performance.

The library generates floating, interactive particles with customizable shapes, sizes, and behaviors. Users can define various particle shapes, such as circles, squares, rhombuses, hexagons, triangles, or even images. Particle sizes, speeds, and colors are adjustable.

It adapts to window resizing and supports fullscreen modes for responsive design. Mouse interaction capabilities make particles react to cursor movements. Collision detection is also supported, which allows particles to interact and respond to each other.

How to use it:

1. Install the library using npm:

# NPM
$ npm install js-particles-factory

2. Import the ParticlesFactory module into your project:

import { ParticlesFactory } from 'js-particles-factory';

// For browser-based projects, use:
<script type="module">
  import { ParticlesFactory } from './minified/particles-factory.es.js';
</script>

3. Set up an HTML5 canvas element where the particles will be rendered:

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

4. Create an instance of ParticlesFactory and target the canvas by its ID (default ‘particles-canvas’).

const particles = new ParticlesFactory({
  canvas: {
    id: 'particles-canvas'
  } 
});

5. Customize the look and behavior of your particles using the following options:

const particles = new ParticlesFactory({
  canvas: {
    id: 'particles-canvas',
    width: 500,
    height: 500,
  },
  main: {
    frameRate: 30,
    numParticles: 80,
    speed: 0.2,
    mouseDistance: 80,
    fillStyle: '#000',
    isFullScreen: true,
    isResponsive: true,
  },
  particles: {
    // circle, square, rhombus, hexagon, triangle, image
    shape: 'triangle', 
    fillStyle: '#ff0000',
    randomFill: true,
    noFill: false,
    stroke: true,
    size: 44,
    randomSize: true,
    draw: true,
    collision: false,
    opacity: 1,
    imageSrc: null
  },
  lines: {
    connectDistance: 100,
    strokeStyle: '#ffffff',
    draw: true,
    lineWidth: 0.5,
    opacity: 1,
  },
});

6. Available API methods.

// Sets the fill mode ( "noFill", "random", "fill").
particles.setFillMode(mode)
// Changes the particle speed.
particles.setSpeed(newSpeed)
// Modifies the number of particles.
particles.setNumParticles(newValue)
// Adjusts the base size of particles when using randomSize.
particles.setBaseSize(newBaseSize)
// Uses an image for particles when shape is set to "image."
particles.setImageSrc(newUrl)
// Switches between fullscreen and default canvas size.
particles.toggleFullScreen()
// Starts or stops the animation.
particles.toggleAnimation()