Add option to draw particles when in Radial mode

[Staijn1]

Hi!

What does it do?

I thought it would be cool to add rendering of particles, that fly towards you from the center of the screen when radial is set to true.
This creates a similar effect commonly seen in YouTube videos, e.g. any video from Trap Nation.

How does it work?

A particle spawns every frame. It spawns in a random location inside an invisible circle around the center of the screen. If every particle spawns from the exact center, it looks very unnatural.
When a particle is outside the canvas, it 'dies' and is removed from the array containing the particles to draw.

Remarks

• If this feature is unwanted, please abandon this PR - no hard feelings
• Feel free to roast me on the PR, again, no hard feelings
• I could not get the drawing order right. This is especially noticeable when using a line / area graph with fill. You will be able to see the particles on the foreground, which they should not be. Help on this is greatly appreciated
• When showParticles is on, and the user resizes / toggles fullscreen, the particles are temporarily still moving from their old position. The particles will die over time and disappear.
• If we are able to set/get the size of the radial in the future (2 Feature Requests: Let user decide the size of the circle / use existing canvas #63), this PR might require tweaking to make sure the particles always spawn inside the radial

I've updated the fluid demo to include the new showParticles property

[hvianna]

Thanks, that's a really cool effect! I like how you use the energy to change the speed and size of particles.

I'm not sure about incorporating it into the module though, since it doesn't actually affect the spectrum. I think this can work just as well via the onCanvasDraw callback, yes? Maybe we could think about plugins for audioMotion for an easy way of integrating additional effects! 👀💡

About the drawing order, the mirror/reflex effects currently don't make it possible to have something truly in the "background". If you draw too soon the particles will be replicated by these effects. This already happens with the level/dB scale. It would be necessary to use an extra canvas to solve this, but I'm afraid it would affect performance and/or complexity (copying one canvas content to another or keeping multiple layered canvases). I still need to experiment with OffscreenCanvas to see if it can help improving performance.

[Staijn1]

Hey Hvianna, thanks for your reply and sorry for my very late response.

I think a plugin approach would be very interesting, but it will require some design work as a plugin can potentially also extend / override functionality not related to drawing on the canvas. Also adding Typescript support for plugins will be interesting.
Unfortunately I don't have much experience with a plugin architecture

I think for now, I will abandon this PR and move the code into my onCanvasDraw callback.