Interactive particle system using HTML5 Canvas with mouse interaction and physics simulation.
Interactive particle system using HTML5 Canvas with mouse interaction and physics simulation. Perfect for creating engaging visual effects and backgrounds.
PERFORMANCE
60 FPS
Smooth animations
PARTICLES
500+
Simultaneous particles
INTERACTIVE
Real-time
Mouse tracking
Simple bouncing particles with physics simulation.
Click and drag to create particles. Watch them interact and fade away naturally.
Particle Creation
Each particle has position, velocity, color, and lifetime properties
Physics Simulation
Update particle positions based on velocity with friction applied
Connection Lines
Draw lines between nearby particles for visual effect
Lifecycle Management
Fade out particles over time and remove dead particles
✓ Hero Backgrounds
Engaging landing page effects
✓ Interactive Art
Creative visual experiences
✓ Data Visualization
Animated charts and graphs
✓ Game Effects
Explosions and trails
class Particle {
constructor(x, y) {
this.x = x
this.y = y
this.vx = Math.random() * 2 - 1
this.vy = Math.random() * 2 - 1
}
update() {
this.x += this.vx
this.y += this.vy
if (this.x < 0 || this.x > canvas.width) {
this.vx *= -1
}
if (this.y < 0 || this.y > canvas.height) {
this.vy *= -1
}
}
draw(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2)
ctx.fill()
}
}