Dabbling in the World of Particle Animation

• 2 min read • 22 votes

This post was last updated Mar 2, 2013 and may be out of date

I was browsing around CodePen today and some particle animation demos caught my eye so I thought to myself, “how hard could that be?” I spent half the day tinkering and this is what I came up with:

Bouncy Balls

The first thing I wrote was a simple container of moving particles. Each particle is initialized with a random velocity that remains constant throughout its life. The most challenging part of this demo was creating the bounce effect. You can achieve this by multiplying the x or y velocity of the particle by -1 if it exceeds its horizontal or vertical bounds.

Check out this Pen!

Sparkling Candles

Since the first demo was relatively simple I felt like trying something more challenging. Somehow I came up with sparkling candles which seemed simple enough at first, but ended up taking longer than expected (as most things do). The basic particle animation didn’t take long to get working, but I added a bunch of subtle effects to make it look more realistic:

  • Alpha fade as particles “burn”
  • Random particle sizes
  • Ending “explosion”
  • A bunch of configuration options

Check out this Pen!

Refresh Demo

If you have been reading this article then you probably already missed the sparkling candle animation. You can refresh the demo by clicking Here.

Final Notes

If you have never dabbled in the world of <canvas> before I highly recommend trying it out. Once you figure out how to draw shapes and set up an update loop the rest isn’t all that difficult. It’s definitely a nice change from working on backend server code.

If you have any questions or comments you can leave me a note below, and if you are feeling adventurous you can view the source of each demo by clicking on the top right corner of each.

Now look what you've done 🌋
Stop clicking and run for your life! 😱
Uh oh, I don't think the system can't handle it! 🔥
Stop it, you're too kind 😄
Thanks for the love! ❤️
Thanks, glad you enjoyed it! Care to share?
HN Reddit

More Posts ✍🏻

See All »
• 4 min read • 3811 votes
😈 Productive Procrastination
Read Post »
• 6 min read • 65 votes
👔 Quit With Positivity
Read Post »
• 4 min read • 567 votes
💻 Wait for User to Stop Typing, in JavaScript
Read Post »
• 3 min read • 268 votes
🌁 Unlimited Potential
Read Post »
• 5 min read • 399 votes
🚀 Getting Over the Fear of Launching
Read Post »
• 2 min read • 405 votes
🗓 2019 Year in Review: Prioritizing Health
Read Post »
• 6 min read • 144 votes
🎈 Abandoning the Static Site
Read Post »

Be the first to hear about posts, right in your inbox 💌