Bea's Particle Project

Inspiration

I wanted a small, self-contained project to practice creative coding in the browser: no game engine, no physics library, just a canvas and a few lines of math. Spelling out MLH felt like a fun nod to the hackathon community.

What it does

• 150 gold particles drift around a deep maroon screen with a little random wander.
• Move your mouse or finger and the swarm slowly drifts toward the pointer.
• Click anywhere and the particles rush into place to spell MLH, hold for about two seconds, then scatter back into free motion.
• A Pause / Play button in the corner freezes and resumes the animation.

How I built it

• Vanilla JavaScript + HTML5 Canvas 2D for all rendering and motion. Each frame clears the canvas and draws every particle as a small circle.
• Letter targets from pixels: when you click, the app draws "MLH" in a bold system font onto an offscreen canvas, reads it back with getImageData, and samples every 6th pixel that's filled in. Those points are scaled to fit the window, and each particle gets one of them as its target.
• Simple steering physics: while forming, each particle accelerates toward its target with heavy damping and a speed cap so it settles instead of overshooting. In free mode it gets random jitter, a gentle pull toward the pointer, soft pushback near the screen edges, and friction.
• High-DPI aware: the canvas scales by devicePixelRatio (capped at 2) and resizes with the window.
• Vite for the dev server and build, Tailwind CSS v4 for the overlay title and button, deployed on Vercel.

Challenges I ran into

• Matching particles to letters: with only 150 particles and thousands of sampled pixels, picking them in order bunched particles in one corner of the word. Spacing the picks evenly across the whole set of points spreads them across all three letters.
• Tuning the feel: the difference between "snaps into place" and "wobbles forever" came down to balancing attraction strength, damping, and the speed cap.
• Crisp rendering on Retina screens without blowing up the canvas size on very dense displays.

Accomplishments that I'm proud of

• The whole thing is one small JavaScript file with no runtime animation or physics libraries.
• The text-to-particles trick works for any string and font, so it's easy to reuse.

What I learned

• How to turn text into point clouds using an offscreen canvas.
• How a little damping and a speed limit make basic physics feel smooth.
• Handling device pixel ratio and resizing for a full-screen canvas.

What's next for Bea's Particle Project

• Let visitors type their own word for the particles to spell.
• Re-target particles when the window is resized mid-formation.
• Add touch-friendly gestures and an option for reduced motion.

Built With

• canvas
• css3
• html5
• javascript
• tailwindcss
• vercel
• vite