CODEWITHSUNDEEP
particles.js
Cédric
Cédric

Reputation: 470

Particles.js : limit number of particles

I can't find if it is possible to limit the total number of particles.

Is there any way of doing this?

Particles.js Github

Upvotes: 3

Views: 3404

Answers (6)

Sócrates López
Sócrates López

Reputation: 11

A solution can be(with javascript):

// Get total particles
let particles = window['pJSDom'][0].pJS.particles.array.length

// Here set limit value
if(particles == 25){
  // Get particles array
  let array = window['pJSDom'][0].pJS.particles.array
  // Remove (starting from zero) 16 particles starting from 5
  array.splice(5,15)
  // Set new particles array
  window['pJSDom'][0].pJS.particles.array = array
}

Upvotes: 1

Meir Roth
Meir Roth

Reputation: 35

I added a little on @Nicola Zaltron's solution making it responsive to the screen size by making the limit of particles based on the screen width and by doing that on smaller screens it wont look bad and it wont effect the performance. 

/* ---------- pJS functions - modes events ------------ */

pJS.fn.modes.pushParticles = function(nb, pos){

  pJS.tmp.pushing = true;

  var limitNumOfParticles = Math.floor(pJS.canvas.el.width / 20);

  if(pJS.particles.array.length < limitNumOfParticles){

    // console.log("limit: ", limitNumOfParticles);
    // console.log("array: ", pJS.particles.array.length);

    for(var i = 0; i < nb; i++){
      pJS.particles.array.push(
        new pJS.fn.particle(
          pJS.particles.color,
          pJS.particles.opacity.value,
          {
            'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,
            'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h
          }
        )
      )
      if(i == nb-1){
        if(!pJS.particles.move.enable){
          pJS.fn.particlesDraw();
        }
        pJS.tmp.pushing = false;
      }
    }
  }
};

Upvotes: 2

Emanuele Strazzullo
Emanuele Strazzullo

Reputation: 76

i've found a good solution! This is the simple code:

const maxParticles = 60;
particlesJS.load('particles', './assets/particlesjs.json', () => {
  const pJSIndex = 0;
  const pJS = pJSDom[pJSIndex].pJS;
  pJS.particles.array.splice(0, pJS.particles.array.length - maxParticles);
  pJS.interactivity.el.addEventListener('click', () => {
    pJS.particles.array.splice(0, pJS.particles.array.length - maxParticles);
  });
});

Upvotes: 0

C&#233;dric
C&#233;dric

Reputation: 470

I think that there is no way to limit the number of particles onscreen, so I changed the properties of the onHover and onClick so it won't add other particles. Solved my problem...

EDIT

This was previously marked as answer because at the time it solved my problem, but is not a proper answer. No longer marked as answer, since apparently @Nicola Zaltron answer works !

Upvotes: 0

Nicola Zaltron
Nicola Zaltron

Reputation: 225

You can modify particles.js (row 750) adding an additional check in the push function:

/* ---------- pJS functions - modes events ------------ */

  pJS.fn.modes.pushParticles = function(nb, pos){

    pJS.tmp.pushing = true;

    if(pJS.particles.array.length<140){
        for(var i = 0; i < nb; i++){
          pJS.particles.array.push(
            new pJS.fn.particle(
              pJS.particles.color,
              pJS.particles.opacity.value,
              {
                'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,
                'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h
              }
            )
          )
          if(i == nb-1){
            if(!pJS.particles.move.enable){
              pJS.fn.particlesDraw();
            }
            pJS.tmp.pushing = false;
          }
        }
    }

  };

I used 140 as maximum number since it is a good value in order to not lose performance. Obviously you can modify it as needed.

Upvotes: 3

Mohd Asim Suhail
Mohd Asim Suhail

Reputation: 2292

When initialising particlesJS, change the value of number.value to limit number of particles 

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": <change this to limit number of particles>,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
     ......
   }

See it in action : http://codepen.io/anon/pen/ggoRXy

Upvotes: -2

Related Questions