Dabbling in the World of Particle Animation

• 2 min read

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.

22 cheers
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?
Hacker News Reddit


Recommended Posts ✍🏻

See All »
• 3 min read
🚅 Next Stop, Yaak
Read Post »
• 3 min read
✨ HTML Share Buttons
Read Post »
• 4 min read
💻 Wait for User to Stop Typing, in JavaScript
Read Post »