Tsparticles: change Line-Linked color based on Particles property

[erwanp]

Hello, and well done for this project !

I set up tsparticles on the new Github Page of my project. Works great ! https://radis.github.io/slack-invite/

What I'm looking for is a way to adjust the color of the Line-Linked based on the property of the two Particles it's connected to. Basically I want to mix the colors !

Is this something doable in the long term ?

[issue-label-bot[bot]]

Issue Label Bot is not confident enough to auto-label this issue. See dashboard for more details.

[matteobruni]

Hi @erwanp, this feature is already a thing so you can start using it now 😉!

I probably need to document it better

    links: {
      blink: false,
      color: "random",
      consent: false
    },

If you set links like this, those are the 3 properties required to be like that, you'll have links coloured like the particles they're connected.

The gradient length is calculated using particles sizes, so if you have two particles of different size the gradient won't be centered.

If you set blink to true the random color will change every frame, if consent is set to true a random color is picked, color set to "random" uses those flags to determine what random is.

[erwanp]

Excellent news !

Regarding the implementation, currently I have

    line_linked: {
      enable: true,
      distance: 50,
      color: "random",
      opacity: 1,
      width: 8, 
    },

which itself is an attribute of particles. Should I understand that links is another property of the same level as particles ? Would you have a link to an example that already implements this ? (I tried to search through your repo with no luck)

[matteobruni]

Links is just the new name of lineLinked or line_linked. I still support all of them but officially is links

[erwanp]

Thanks, I actually tried directly in the meantime and it worked. Result is great !!

[erwanp]

In grab mode, however, the link ends up blinking with random colors although there is only one particle nearby. Do you have any idea [on how to set the color to be the 1 particle color in that case ] ? Example here: https://radis.github.io/slack-invite/

Edit: trying by keeping it empty, we'll see! The documentation is not very explicit on this

[matteobruni]

Probably grab has no support for that, this could be the missing feature!

Thanks for reporting, I'll include that in a future release, I don't know at the moment if it will be in the 1.17 milestone or 1.18.

When this will be fixed I'll let you know

[matteobruni]

tsParticles 1.17.7 is released and has this feature! If you use random color in grab mode you can control it using consent and blink in the same spot.

grab: {
  color: "random" 
}

this is enough to have grab links related to particles color