Pixi.js: Multiple particles decrease frames per seconds

[AlainBarrios]

I am creating an effect with particles, where when passing the mouse these particles repel. The problem is that the animation of the particles is executed with low fps.
I am using Firefox Dev Edition, Windows 10, Radeon 550 Series GPU.

https://codepen.io/AlainBarrios/pen/MRXJxg?editors=0100 This is the codepen.

[distinctdan]

So I'm not on the pixi team, but I took a look, and it looks like one big performance hog is you're doing a square root 100000 times a second in your distance check, which is an expensive operation. Instead, just check if the squared distance is less than the squared radius. I updated your pen: https://codepen.io/anon/pen/wZEbob?editors=0010

Edit: Actually, you're doing 100k square roots per tick x 60fps, so actually 6mil square roots per second.

[distinctdan]

Chrome also has a very good profiling tool that can help you isolate which functions are taking your CPU time.

[AlainBarrios]

I have removed some features and added what you said, it has improved in Chrome but in Firefox it remains the same.

Firefox

Chrome

[distinctdan]

Have you profiled it in firefox to see where your slowdown is? If not, that's where you should start.

A couple optimization ideas:

• Use less particles
• You're putting lots of particles on the black areas, which aren't seen, so they're wasting resources. You could use a library like opentype.js to get vectors of the letters, so that you only fill the letters.
• You're moving and doing a mouse hit check for every particle every tick. If you put your particles in an optimization structure like a kd-tree, you could do a lookup for the mouse location to only get the particles that are close enough. Once a particle had returned to its original location, you could mark it as "inactive" so that it doesn't tick until the mouse comes near it again. However, the area your mouse interacts with is big enough that this might actually be slower, not sure.

[AlainBarrios]

I have been able to fix some frames https://codepen.io/AlainBarrios/pen/BEGYoV?editors=0010.

Thanks you!.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.