Tsparticles: Reduce duplicated particles

[ovidyou]

I am trying to display a set of images as particles and I would like each image to be displayed exactly once. Currently is not possible, because each particle gets assigned a random image, thus some of the images will appear multiple times and others won't show at all.

https://github.com/matteobruni/tsparticles/blob/91681123649caec3e221755e2aa4b847d1393fcb/core/tsparticles/src/Core/Particle.ts#L283

---

Would it be possible to have an additional configuration option specifically for preventing duplicates as much as possible?
It could be a boolean option like reduceDuplicates under params.particles.shape options and when enabled, following behaviour would be expected:

• if params.particles.number.limit <= image array length, then there will be no duplicates
• if params.particles.number.limit > image array length, then duplicates are to be expected

I am seeing as possible implementation to have 2 image arrays: original and copy. The original array would be immutable, and the copy array would get consumed with each particle that gets generated, then when the copy array gets empty, will get refreshed from the original array.

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.87. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[matteobruni]

Hi @ovidyou, thanks for the idea.

I was thinking about it for a while but I was focused in other more complex features. Since this is requested I'll introduce it in 1.17.x.

If you want to try yourself to add this feature feel free to contribute.

[ovidyou]

@matteobruni alright, will try to implement this feature

[matteobruni]

Thanks! Just a reminder, use dev branch for this feature.

[sonya-ninja]

Hi there!

I was about to open a request for this exact issue! So happy someone else needs the same functionality. I created a custom shape (drawer) that accepts an array of labels and colors for the particles. It would be great if the sets were repeated rather than random individual particles. (See attached screenshot - I had to refresh the page a few times to see a complete set of particles.)

I would also like to ask a question about how to programmatically add particles - it's not an issue - I just need some assistance. Is there a support forum? I would like to add a particle when someone completes a form.

Any assistance would be appreciated!

Thanks,

Sonya

[matteobruni]

Hi @sonya-ninja, sorry but there's no forum atm.

If you want to add particles programmatically you can check this pen: https://codepen.io/matteobruni/pen/GRpYdGv

It uses the addParticle method, it's really simple

[sonya-ninja]

Thanks so much! Will check it out.

[matteobruni]

I forgot a thing, if you want more direct support there's a Slack, the invite is in the Readme

[matteobruni]

Reducing duplicates can be applied to other shapes too including color and shape type and text particles.

Imagining the scenario with 3 colors set and shape types of square, circle and polygon (pentagon) the result would be 3 colored square, three colored circles and three colored polygons repeated particles number / combinations times.

Sizes and Opacity should not be considered, color animation neither.

For shapes that can have multiple values like images every value count as a combination

[ovidyou]

@matteobruni sure, can apply to other shapes as well.

Wat do you think about having an option, say generateMode that would accept 3 different modes:

• random - default mode, the way it is now
• distinct - the particle combination that will get rendered will be random, but with reduced duplicates (a combination can reappear only after all possible combinations were already generated)
• sequential - no more randomness here, the particles will be created in the order they were defined (best use case would be for shapes that can have multiple values)

[matteobruni]

Yes it's fine. Colors (fill and stroke) should be considered too in generation order, not just shapes.

Every shape can have multiple values by design, there are not many samples with that configuration but I can create some of these.

Colors can have a "random" value, this should be considered like a single value for every shape

[matteobruni]

This issue won't be in 1.17.0, it'll be scheduled in another version because it needs some extra work and I'd like to release 1.17.0 soon, I need to start making tests of the upcoming release.