Particles.js : 限制粒子数

Question

我找不到是否可以限制粒子总数。

有什么办法吗？

Answer 1

初始化particlesJS时，改变number.value的值来限制粒子数

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

查看实际效果：http://codepen.io/anon/pen/ggoRXy

Answer 2

我认为没有办法限制屏幕上的粒子数量，所以我更改了 onHover 和 onClick 的属性，使其不会添加其他粒子。解决了我的问题...

编辑

这之前被标记为答案，因为当时它解决了我的问题，但不是正确的答案。不再标记为答案，因为显然@Nicola Zaltron 答案有效！

Answer 3

您可以修改 particles.js（第 750 行），在推送功能中添加额外的检查：

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

  };

我使用 140 作为最大值，因为它是一个很好的值，不会损失性能。显然你可以根据需要修改它。

Answer 4

我找到了一个很好的解决方案！这是简单的代码：

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

Answer 5

我在@Nicola Zaltron 的解决方案中添加了一些内容，通过根据屏幕宽度限制粒子来使其对屏幕尺寸做出响应，并且通过在较小的屏幕上这样做，它看起来不会很糟糕，也不会影响性能。

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

Answer 6

一个解决方案可以是（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
}

Particles.js : 限制粒子数

Particles.js : limit number of particles

particles.js

编辑