Editor
1// Particle system configuration
2const config = {
3 count: 1000,
4 speed: 0.02,
5 decay: 0.98,
6 color: '#d4900a',
7};
8
9class Particle {
10 constructor(x, y) {
11 this.x = x;
12 this.y = y;
13 this.vx = (Math.random() - 0.5) * 2;
14 this.vy = (Math.random() - 0.5) * 2;
15 this.life = 1.0;
16 }
17
18 update() {
19 this.x += this.vx;
20 this.y += this.vy;
21 this.vx *= config.decay;
22 this.vy *= config.decay;
23 this.life -= config.speed;
24 }
25
26 draw(ctx) {
27 ctx.globalAlpha = this.life;
28 ctx.fillStyle = config.color;
29 ctx.beginPath();
30 ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
31 ctx.fill();
32 }
33}
Preview
Particle System
A lightweight 2D particle engine for creating visual effects in the browser using Canvas 2D. Configure emission rate, velocity decay, color, and lifetime to produce fire, smoke, rain, or sparkle effects.
Features:
- Configurable particle count up to 10,000
- Velocity decay for natural deceleration
- Alpha-based lifecycle with smooth fadeout
- Custom color per emitter instance
- Object pooling for zero-allocation updates
import { Particle } from './particle.js';
const emitter = new Emitter(canvas, config);
emitter.emit(500, 300);
emitter.start();
The system uses a pre-allocated pool of particle objects to avoid garbage collection pauses during animation. When a particle's life reaches zero, it is returned to the pool rather than destroyed.
Performance: On modern hardware, 5,000+ particles maintain 60fps. Use requestAnimationFrame for optimal rendering synchronization.