First time playing with canvas. Clicking on the screen generates an explosion of particles
Very cool. I also want to learn how to make such animations, can you tell me where to learn from?
@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...
Thanks @bojidar-bg. How would you suggest I go about doing that? Would I splice the particles array? Make the value null?
@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.
@deanwagman You might also want to have a look at this: http://stackoverflow.com/questions/7674421/html5-canvas-better-to-re-draw-objects-or-use-bitmaps
@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 http://www.html5rocks.com/en/tutorials/speed/static-mem-pools/ 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).
My 2 cents. :)
Thanks y'all for the great feedback!
I'm going to check out these resources and make some changes.
@deanwagman Nice trick with cleaning up the array on click :D +1
@deanwagman BTW, I tried to improve the speed using caching. You can see my results here: http://codepen.io/bojidar-bg/pen/qdKMOJ . (Note, I also added motion blur :D)
@bojidar-bg very cool!
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?
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
// 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)
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
this is cool, I am trying to understand the part how to eliminate particles! =D
Need to know how to enable it? Go here.