Adding own custom links.

[Hooman-studio]

Hi!

I have a question about adding links between two particles.

I was wondering if (and how if yes) it is possible to add lines (links it is called in tsParticles) between two particles which I specify and give those links special properties (such as a thicker line or different color)

I am using tsParticles-react

I start with 0 particles and then add them one by one using gsap:

const addParticle = () => {
      const particle = particles.addParticle(
        { x: Math.random() * width * 2, y: Math.random() * height * 2 },
        {
          opacity: {
            value: 0,
          },
        }
      );
      if (particle && particle.opacity) {
        particle.opacity.value = 0;
        gsap.to(particle.opacity, { value: 1, duration: 1 });
        if (particle.id < 3) {
          particlesRef.current.push(particle);
        }
      }
};

as you can see I store the first three particles I create in a ref. Which I then later want to call. I tried something like the following but it doesn't seem to update the state:

const newLink = () => {
     //getting the particles from ref
      const p = particlesRef.current;
     //adding a new link to the links array
      p[0].links.push({
        destination: p[1],
        opacity: 0.7,
      });
};

Any help in the right direction is appreciated!

[matteobruni]

I discussed a similar feature on Slack, for having custom links. This will be possible in v2 (#2297) since it will be more pluggable than now. Links in v1 are an internal plugin and I don't know how to replace them easily.

This will be the new links plugin/interaction: https://github.com/matteobruni/tsparticles/tree/dev/interactions/particles/links but the new structure is not ready to be released yet. Since it will be an external plugin, it could be not loaded and replaced by another custom made.

Changing only some particles properties in runtime could lead to unexpected behaviors so I think the better solution is to write custom plugins which are called with the right timing and you can create your own structures and options without trying to replace the existing one.