200 particles, tween or canvas?

[Learning]

Hi guys,

 

This is not really a script problem, but more of an advice needed.

If I'm doing a 200 particle, particle effect, is it better to tween 200 individual items or to use canvas drawing?

If I understand correctly, if you're using tweens, the browser will be managing individual 200 items every second to animate while if you use canvas, it will be managing one big item but still drawing 200 items in it every second. Is there a performance difference to this?

Also, most particle effects I see are using shapes to generate, but if I need to use img files to generate out the particles, is it a bad idea?

[Dipscom]

Hi Learning,

 

Canvas.

 

If you can work with Canvas, go with it. It gives you better performance than DOM elements, specially when you start adding larger amounts of particles.

 

There are dozens of threads around here going over particles and GSAP, do a quick search (or just hunt down OSUBlake's posts) and you'll see loads of examples.

 

Here's a couple:

See the Pen BjNZYP by osublake (@osublake) on CodePen

 

See the Pen vNwRdO by osublake (@osublake) on CodePen

[Learning]

Hi Dipsom,

Yea, I actually searched the threads for particle examples and built one with an example in the threads.
I don't really see a lag in it, but just to be safe I wanted to know if it's the optimal way of doing particles.

I will go check out OSUBlake's posts as suggested!

[Dipscom]

You'll get away with a certain number of particles on DOM elements, desktops will not break a sweat, mobiles might struggle a bit.

 

The optimal way of doing particles is using Canvas, more optimal would be using WebGL (but that can be overkill) - A specialised library such as Pixi will be the best solution, really. But Canvas will suffice if you're not doing much else.