So you've started making particle effects on CodePen
That is awesome! Particle effects are my favourite. Sometimes, when people create particle effects, everything is going great guns for the first few seconds of the animation, and then the framerate begins to slow. The framerate might even stutter after a while.
An example of what not to do
Behold! some bubbles:
Another little tip - did you know? The particle examples in this post are using the canvas .arc() method to draw "bubbles" but drawing the circles over and over again is a bit of work for the browser to do. A much more performant way to do this is to use an image - as the browser can cache the image once rendered and only 'repeat' it across particles. So where possible, use images instead of arc() for your particle effects and watch your framerate improve!
Recycle your objects whenever you can!
Take our example above - I've refactored it a little to use only 100 objects instead of 2000. Instead of creating a new bubble, I'm resetting the bubble's position back to the beginning of the stream when it leaves the canvas. This gives the impression that there is a never-ending stream of bubbles when in reality I'm using the same bubbles over and over.
Edit: using prototype
A helpful Tweeter and @clindsey in the comments below brought up that using prototype inheritance also improved memory efficiency.
Below is a forked version of the above example utilising the prototype constructor.
If you have any questions for me please send them in! They give me a hint to what I should write about next :) Leave a comment for me below, send me a tweet at @rachsmithtweets or flick me an email at contact at rachsmith dot com.