Particles.js: Change no. particles, properties on the fly?

[kelvinz]

Hihi,

Wondering how I can access the properties and change the no. of particles there are on the fly?

Thanks in advance!

[VincentGarreau]

Hi @kelvinz,

Yep you can:
pJSDom[0].pJS.particles.number.value = 30
pJSDom[0].pJS.fn.particlesRefresh()

[kelvinz]

Thanks @VincentGarreau ! =)

[BrunnerLivio]

When I change it, the background rerenders. So the existing nodes jump around. Is there a way to add nodes without the jumping?

[nathanmal]

Just started using this library, but yes it looks like the particlesRefresh() function resets everything.

If you want to do this at runtime you have to access the particle array directly, example:

$(document).on('click', function(e){
      const newColor = '#FF2222';
      $.each(pJSDom[0].pJS.particles.array, function(i,p){
        pJSDom[0].pJS.particles.array[i].color.value = newColor;
        pJSDom[0].pJS.particles.array[i].color.rgb = hexToRgb(newColor);
      });
 });

notice that to change color, you actually have to set the color.rgb value (ie not just the color.value), also the hexToRgb function is in the main particles.js file, this example refers to that function

i haven't tested everything yet but i'm pretty sure you could set any of the values of any particle at runtime using this method. hope that helps!

[dukehh]

how can i do this from the angular particles library?

[Soullighter]

Just started using this library, but yes it looks like the particlesRefresh() function resets everything.

If you want to do this at runtime you have to access the particle array directly, example:

$(document).on('click', function(e){
      const newColor = '#FF2222';
      $.each(pJSDom[0].pJS.particles.array, function(i,p){
        pJSDom[0].pJS.particles.array[i].color.value = newColor;
        pJSDom[0].pJS.particles.array[i].color.rgb = hexToRgb(newColor);
      });
 });

notice that to change color, you actually have to set the color.rgb value (ie not just the color.value), also the hexToRgb function is in the main particles.js file, this example refers to that function

i haven't tested everything yet but i'm pretty sure you could set any of the values of any particle at runtime using this method. hope that helps!

Its working! But how we can change line color as well? i try with
pJSDom[0].pJS.particles.line_linked.color = newColor;
and nothing happend

UPDATE:

I found it, here is a link

[sjhendriksz]

Hi.

I'm trying to change some of the properties with either Jquery of JS.
I did it a while back and with the browser debugger, were able to see the library properties somewhere that showed the objects in a dropdown menu which made it very easy to find the object needed. No idea how to find it anymore. Any help would be appreciated.

I would like to do:
pJSDom[0].pJS.particles.array[i].shape.stroke.color

[Soullighter]

@sjhendriksz
Try to read core js, it helps me to find a solution

[ArginLerit]

$(document).on('click', function(e){
const newColor = '#FF2222';
$.each(pJSDom[0].pJS.particles.array, function(i,p){
pJSDom[0].pJS.particles.array[i].color.value = newColor;
pJSDom[0].pJS.particles.array[i].color.rgb = hexToRgb(newColor);
});
});

I tried exactly this but it's changing the color of all the particles. Has anybody else tried changing the properties of a specific particle?