Create Cool Particle Animation Effects With Proton.js

Proton.js is an easy yet powerful Javascript animation engine to create pretty cool particle effects (e.g. flames, fireworks, bullets, explosions, etc) on the modern web application.

Basic Usage:

1. Install and import the proton-engine.

# NPM
$ npm install proton-engine --save

import Proton from 'proton-engine';

2. Or directly load the proton.min.js script in the HTML.

<script src="build/proton.min.js"></script>

3. Create an HTML5 canvas element on which you want to render the particle effect.

<canvas id="canvas"></div>

4. The example JavaScript to build a particle effect.

import Stats from "stats.js";
import Proton from "proton-engine";
import RAFManager from "raf-manager";
import "./styles.css";
let stats;
let canvas;
let context;
let proton;
let renderer;
let emitter;
main();
function main() {
  initCanvas();
  initStats();
  createProton();
  render();
}
function initCanvas() {
  canvas = document.getElementById("canvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  context = canvas.getContext("2d");
  window.onresize = function(e) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    emitter.p.x = canvas.width / 2;
    emitter.p.y = canvas.height / 2;
  };
}
function initStats() {
  stats = new Stats();
  stats.setMode(2);
  stats.domElement.style.position = "absolute";
  stats.domElement.style.left = "0px";
  stats.domElement.style.top = "0px";
  document.body.appendChild(stats.domElement);
}
function createProton() {
  proton = new Proton();
  emitter = new Proton.Emitter();
  emitter.rate = new Proton.Rate(
    new Proton.Span(10, 20),
    new Proton.Span(0.1, 0.25)
  );
  emitter.addInitialize(new Proton.Mass(1));
  emitter.addInitialize(new Proton.Radius(1, 12));
  emitter.addInitialize(new Proton.Life(2, 4));
  emitter.addInitialize(
    new Proton.Velocity(
      new Proton.Span(2, 4),
      new Proton.Span(-30, 30),
      "polar"
    )
  );
  emitter.addBehaviour(new Proton.RandomDrift(30, 30, 0.05));
  emitter.addBehaviour(
    new Proton.Color("ff0000", "random", Infinity, Proton.easeOutQuart)
  );
  emitter.addBehaviour(new Proton.Scale(1, 0.7));
  emitter.p.x = canvas.width / 2;
  emitter.p.y = canvas.height / 2;
  emitter.emit();
  proton.addEmitter(emitter);
  renderer = new Proton.CanvasRenderer(canvas);
  renderer.onProtonUpdate = () => {
    context.fillStyle = "rgba(0, 0, 0, 0.1)";
    context.fillRect(0, 0, canvas.width, canvas.height);
  };
  proton.addRenderer(renderer);
}
function render() {
  RAFManager.add(() => {
    stats.begin();
    emitter.rotation += 1.5;
    proton.update();
    stats.end();
  });
}

5. See Official Documentation for more usages.

Changelog:

v6.0.3 (12/10/2023)

• Some upgrades and fixes

v5.4.3 (04/27/2022)

• feat: Improve Collision performance
• Add Behaviour applyBehaviour method.

v5.2.7 (09/15/2021)

• Organize rollup configuration
• Remove rollup-watch
• Add package-lock file
• Add Stats destruction method
• Refactor the renderer destroy method
• Performance optimization

v5.1.5 (09/10/2021)

• feat: add destroy method
• update package

v4.2.1 (10/21/2020)

• Support the use of typescript, add type hints.