← Creative
✨
Particle Swarm Playground
Hundreds of tiny particles that swirl, attract, and repel around your cursor in real time.
🟡 MediumDifficulty
3-4 hoursTime
JavaScript, TypeScriptLanguages
What you're building
A canvas full of small glowing particles with their own velocity and drift, that come alive the moment your mouse enters the frame — attracted toward it, repelled away, or swirling around it depending on the mode you pick. This is the same core system (position + velocity + force + render loop) that powers snow effects, explosion effects, and fire in real games.
What you'll unlock 🔓
You'll need
- Basic JavaScript
- Canvas basics
- A code editor
- A browser
🗺️ Build roadmap
01 Create and draw a single particle
→
02 Spawn a whole field of particles with random positions/velocities
→
03 Animate them drifting with a game loop
→
04 Make particles wrap around the screen edges
→
05 Add mouse position tracking
→
06 Add attract and repel forces toward the mouse
→
07 Add a mode switcher and particle count control
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free