问题

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

回答1:

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.

回答2:

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;
      }
    }
  }
};

回答3:

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 !

回答4:

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);
  });
});

回答5:

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

来源：https://stackoverflow.com/questions/41934968/particles-js-limit-number-of-particles

标签

particles.js

Particles.js : limit number of particles