Is there a limit to the number of particle colors?

[adamalston]

I am using 5 colors on one of my projects:

"color": {
    "value": [
        "#FF6961",
        "#FFD300",
        "#90EE90",
        "#4DC9FF",
        "#C311E7"
    ]
},

I was wondering if there is a limit to the number of colors that could be specified? Further, do more colors require more computation/processing power?

[matteobruni]

Hi @adamalston,

There’s no limit on particles colors array length, the color will be picked randomically from 0 to length-1 when the particle is created so a longer array has the same performance of a shorter one.

If you have a performance drop let us know, I’ll inspect it deeply

[adamalston]

Thanks for the clarifications.

The only performance issues I am running into seem to be rooted in Chrome. I don't believe the particles are responsible for the performance drop however since the site runs fine on every other browser. Also, this article from the WSJ detailed how unoptimized Chrome is in terms of memory management.

[adamalston]

@matteobruni Another question. Is there a list somewhere of every option that can be set?

I am trying to set a minimum size for the particles. I have looked at tsParticles and I cannot get any of these objects to work for minimum size.

Here is the current size object that I have:

        "size": {
            "value": 4,
            "random": true,
            "anim": {
                "enable": false,
                "speed": 30,
                "size_min": 2,
                "sync": true
            }
        },

[matteobruni]

You can see https://particles.js.org (I'm working on that site to add more documentation as possible, and samples) that is the website containing all the objects used in the tsParticles project.

Actually there are two minimum size, one for random and one for animation.

You can set it like this

        "size": {
            "value": 4,
            "random": {
                "enable": true,
                "minimumValue": 2
            },
            "animation": {
                "enable": false,
                "speed": 30,
                "minimumValue": 2,
                "sync": true
            }
        },

[adamalston]

Works now, thanks!