Tsparticles: Avoid spawning on top of each other when collisions are enabled.

[mattjis]

Which version are you using?
1.18.11

Is the latest version affected?

• [x] Yes
• [ ] No

Which library are you using?

• [ ] Vanilla JS (tsparticles)
• [x] React (react-tsparticles)
• [ ] Vue.js 2.x (particles.vue)
• [ ] Vue.js 3.x (particles.vue3)
• [ ] Angular (ng-particles)
• [ ] Svelte (svelte-particles)
• [ ] Preact (preact-particles)
• [ ] Inferno (inferno-particles)
• [ ] jQuery (jquery-particles)

Is your feature request related to a problem? Please describe.
I don't want my particles ever overlapping.
Collisions solve half the issue, but they often spawn on top of each other.

Describe the solution you'd like
I want the particles spawned away from each other.

[xscode-auto-reply[bot]]

Thanks for opening a new issue. The team has been notified and will review it as soon as possible.

For urgent issues and priority support, visit https://xscode.com/matteobruni/tsparticles

[mattjis]

I've got a related issue, let me know what you think.

So I've set outModes on the top and the bottom to be bounce, occasionally they're initially rendered past the "bounce area" chopping half of them off, until the animation has run long enough to correct the issue.

[matteobruni]

I'll check that, I've created an option to enable/disable overlap in the particles.collisions section

[mattjis]

@matteobruni it seems to only be an issue when bounce is set via outModes, but works fine when using outMode

[matteobruni]

outMode is just an obsolete alias that sets the default property of outModes

[mattjis]

@matteobruni ah well in that case all I had to do was change the default to bounce and set the left and right to out instead. Thanks!

[matteobruni]

I released 1.19.0-alpha.3 with this feature, it's disabled by default but you can enable it in the collision section.

Checkout this file:

https://github.com/matteobruni/tsparticles/blob/dev/core/main/markdown/Options/Particles/Collisions.md