Change particle link distance on interval

[joedecerce]

with Particles.js i was able to vary the line link distance on an interval as seen below. How do I achieve this same effect?

Basically is looks like no links and increases to heavily linked points then back to minimal links. repeat...

var i = 40;
var j = 1;
var interv = setInterval(increaser,200)

function increaser() {
  if (i <= 250 && j==1) {
    i=i+2;
    window.pJSDom[0].pJS.particles.line_linked.distance=i;
    }
    else if(i>=40 && j==0){
      i=i-2;
      window.pJSDom[0].pJS.particles.line_linked.distance=i;
    }
    else{
      //clearInterval(interv)
      if(j==1){j=0;}else{j=1}
    }
  }

[matteobruni]

Hi @joedecerce,

This is a difficult trick to do programmatically since each particle has its own options and values, links are set on particles too. This is because you can have particles without links or with different ids.

If you have 30 particles with link id A and 30 particles with link id B they will only link with the same link id, this is useful when using particles groups or emitters.

If you want to change the distance you have to update each particle link distance.

But there's a plugin system inside tsParticles and you can create something like this:

const customLinksPlugin = {
    id: "customLinks",
    needsPlugin: () => true, // it has options parameter, if you want to customize it
    getPlugin: () => { // has a container parameter, this is the tsParticles.domItem return value
        return {
            particleUpdate: (particle) => { // this function is called before the movement, it's a good point to update options since they are not used yet. There's also a second parameter delta that contains a delta object for calculating time passed since previous frame
                particle.retina.linksDistance += 2;
            }
        };
    },
    loadOptions: () => {} // you can customize options here, destination options are the first parameter, source options are the second one
};

tsParticles.addPlugin(customLinksPlugin);

This is the addPlugin parameter interface: https://github.com/matteobruni/tsparticles/blob/main/engine/src/Core/Interfaces/IPlugin.ts

This is the getPlugin return value: https://github.com/matteobruni/tsparticles/blob/main/engine/src/Core/Interfaces/IContainerPlugin.ts

This is the delta object: https://github.com/matteobruni/tsparticles/blob/main/engine/src/Core/Interfaces/IDelta.ts

If you have more questions or need more help, I'm here

I created a working sample here: https://codepen.io/matteobruni/pen/LYLJeqJ

[joedecerce]

wow. That worked well!

The only issue I am having is on chrome/firefox mobile. It seems retina detect is fouling with the distances so it seems like the density is poor and the connections distance is much lower.

I can disable retina detect, but the lines look pretty rough and aliased and the timing is a little off.
What is the timing of this function? is it every 1/60th of a second (cpu/gpu permitting)...

[matteobruni]

Every distance or size or similar values are affected by retina displays.

There’s the correct aspect ratio here: container.retina.pixelRatio

You can multiply that value to min and max distances to have the right effect.

That function is executed for every frame, so it depends on the FPS, you can use the delta class described in the comments to check how much time has passed. The delta.value contains the milliseconds difference from the previous frame, you can use a variable to sum every delta value to check how much time has passed.

I've updated the sample with retina support and an time interval check.