Hello! I am well overdue to post here so I thought I would write this to address an issue that keeps coming up for people getting started in creative coding with JavaScript.

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.

This performance issue can be caused by filling the JavaScript memory with too many Objects too quickly. JavaScript is pretty cool in that you don't have to manage memory allocation on your own, it has a garbage collector that will "clean up" old objects automatically. The downside to this automatic collection is that it takes some processing power from the browser to execute, which means there is less power to keep your framerate running smoothly, causing your animation to slow.


An example of what not to do

Behold! some bubbles:

Because I mean serious business here, I've created 2000 bubble particles which I'm adding to the canvas every 50 milliseconds. You might notice, the framerate is somewhat inconsistent. Checking the Memory timeline in Chrome dev tools, we can see after some seconds, the JavaScript memory heap becomes "full" and the garbage collector kicks in.

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!

The best way to avoid this happening in your creative code is to be mindful of how often you're creating JavaScript Objects. Wherever you can reuse objects - you should.

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.

If you get in the habit of seeing where you can reduce/reuse the number of JavaScript objects in your code, you can at least reduce the frequency at which that garbage collector will have to do its thing, resulting in smoother animation. This approach will not only help you with particle effects, but any other creative coding project where you're using a lot of JavaScript objects, or even more traditional projects that involve a lot of DOM.


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.

See the Pen Bubbles - better way utilizing object pool by Rachel Smith (@rachsmith) on CodePen.


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.


6,075 5 72