user profile image

First time playing with canvas. Clicking on the screen generates an explosion of particles


  1. Very cool. I also want to learn how to make such animations, can you tell me where to learn from?

  2. @deanwagman , after ~40 clicks this codepen grinds to a halt, because it has too many particles to draw... while it is impossible to limit the number of particles if all are visible (without degrading quality, OFC), it is quite simple to just remove "out-of-bounds" particles, e.g. remove all particles that are invisible :).

    BTW, those particles are nice...

  3. Thanks @bojidar-bg. How would you suggest I go about doing that? Would I splice the particles array? Make the value null?

  4. @deanwagman Well, I would: 1. Create a new array and fill it with the still-alive particles. 2. Or use the null-value idea you gave. (But then you will fill the memory after many clicks. Maybe do null-value most of the time, but create a new array every N-th time?)

    If you think that the removeParticles operation will be a bottleneck, then you can run it with setTimeout/setInterval every 1000ms or so :D.

  5. @deanwagman Killing off particles (eg. splicing the array of particles to free their reference) will create a lot of wasted heap space that will be garbage collected and will cause stutter in the animation. See for a good write-up on how to recycle created object to maintain a "pool" of objects you can reuse without having GC lock up your rendering loop.

    The second part of the optimization deals with two things:

    1) Check that a particle is within the bounds of the screen before attempting to call draw functions. This is easily the best optimization you can make in your case, even if the particles end up looping back onto the screen (which in your case, don't).

    2) Check that a particle is outside of bounds and will never return (a safe assumption in your example, as they never loop back), meaning you can kill any particle that is outside of the bounds of the screen (with a margin equal to the radius of the largest circle you draw).

    Also, whenever you're optimizing, make sure that you're optimizing your graphics drawing calls rather than JavaScript -- calculating positions and doing math is at least 100× faster than any one draw call you make.

    My 2 cents. :)

  6. Thanks y'all for the great feedback!

    I'm going to check out these resources and make some changes.

    Thanks again!

  7. @deanwagman Nice trick with cleaning up the array on click :D +1

  8. @deanwagman BTW, I tried to improve the speed using caching. You can see my results here: . (Note, I also added motion blur :D)

  9. Hi there, great pen! How would I got about making a constant click with out actually clicking. If it makes sense. I'd like to make this a page, where it will have a navigation on top of this pen. I would like to have particles in the background either floating or doing the explosion. Any idea anyone?

  10. @DigitalVenom

    Hey there, the easiest way would be to set a time interval that calls the initParticles function. If you wanted to have the particles explode from a central point you can pass it an x and y position

    Sounds like a fun idea to me. Let me know if you have any more questions, and I'd love to see the final product.

    // Clean Up Array amd fire every 10 seconds
    setInterval(function() {
          // Find a random x position that is within the canvas width
      var x = Math.round(Math.random() * canvas.width),
               // Find a random y position
            y = Math.round(Math.random() * canvas.height);
          // Clean up those unused particles
          // Generate N number of particles at x and y
      initParticles(config.particleNumber, x, y)
  11. @all: Any ideas how to implement that animation using a background photo / how to change the background to image? Just curious how to make it possible. Several changes failed to far. :) Thanks for any help

  12. this is cool, I am trying to understand the part how to eliminate particles! =D

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.