[Bug]: Particles speed up to ludicrous speeds over time

[Griefed]

Contact Details

github@griefed.de

What happened?

Heya everyone!

Thank you so much for this insane project. Coming from particleJS, this is a god send.

Now, for the bug:
Particles in the view speed up over time. The longer you leave the window open, the faster the particles become. Whilst it can look funny at times, it is also quite straining on the eyes after some time. 😅

• I can observe said behaviour on https://particles.js.org/, too.
• I can observe said behaviour in Opera GX, too, though that browser is not listed down below.
• I migrated from particlesJS to tsParticles, using the same configuration.

If you need anything else, let me know!

Cheers,
Griefed

Version

1.36.0

Which library are you using?

Vanilla (tsparticles)

tsParticles Configuration

{
  "particles": {
	"number": {
	  "value": 80,
	  "density": {
		"enable": true,
		"value_area": 800
	  }
	},
	"color": {
	  "value": ["#325358","#C0FFEE","#31CCEC","#6A1A78"]
	},
	"shape": {
	  "type": ["circle","triangle","edge","polygon"],
	  "stroke": {
		"width": 0,
		"color": ["#325358","#C0FFEE","#31CCEC","#6A1A78"]
	  },
	  "polygon": {
		"nb_sides": 6
	  }
	},
	"opacity": {
	  "value": 1,
	  "random": true,
	  "anim": {
		"enable": true,
		"speed": 1,
		"opacity_min": 0.1,
		"sync": false
	  }
	},
	"size": {
	  "value": 3.5,
	  "random": true,
	  "anim": {
		"enable": true,
		"speed": 1,
		"size_min": 0.1,
		"sync": false
	  }
	},
	"line_linked": {
	  "enable": true,
	  "distance": 150,
	  "color": "#C0FFEE",
	  "opacity": 0.4,
	  "width": 1
	},
	"move": {
	  "enable": true,
	  "speed": 1,
	  "direction": "right",
	  "random": true,
	  "straight": false,
	  "out_mode": "out",
	  "bounce": true
	}
  },
  "interactivity": {
	"detect_on": "canvas",
	"events": {
	  "onhover": {
		"enable": true,
		"mode": ["bubble","grab"]
	  },
	  "onclick": {
		"enable": true,
		"mode": "push"
	  },
	  "resize": true
	},
	"modes": {
	  "grab": {
		"distance": 140,
		"line_linked": {
		  "opacity": 1
		}
	  },
	  "bubble": {
		"distance": 200,
		"size": 4,
		"duration": 5,
		"opacity": 1,
		"speed": 0.1
	  },
	  "push": {
		"particles_nb": 4
	  }
	}
  },
  "retina_detect": true
}

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

Relevant log output

---

Code of Conduct

• I agree to follow this project's Code of Conduct

[xscode-auto-reply]

Thanks for opening a new issue. The team has been notified and will review it as soon as possible.

For urgent issues and priority support, visit https://xscode.com/matteobruni/tsparticles

[matteobruni]

Hi @Griefed,

thanks for reporting that, I’ll have a look on this later, for now can you try changing bounce to false?

[Griefed]

Heya matteobruni,

thanks for getting to this so quick!
Setting bounce to false seems to have done the trick. Been having the window open for a couple of minutes now and so far, the speed has not increased.

[matteobruni]

I checked also the website and it's the collisions feature that speeds up particles.

This happens because there's no friction so once a small particle collides with a big one it gains speed and is not losing it. There are mainly two different ways for reducing it:

• Reducing bounce effect using the bounce section under particles (docs: https://particles.js.org/docs/interfaces/Options_Interfaces_Particles_Bounce_IBounce.IBounce.html)
• Setting a tiny decay value in particles.move section so it will decrease over time

Hope it helps!

[Griefed]

Thanks, I'll check it out soon and report back when I find a configuration which works. Thanks for your hard work!

[Griefed]

Sorry for taking so long!

So, I tried playing around with decay though that has the tendency of stopping every particle dead in their tracks eventually. It was a good idea, though!

As for bounce, I couldn't get a nice config working here either. So, in the end, I stayed with no bounce and everything moving out to either the right hand side as well as the occasional particle moving out on the top or bottom.

Thank you for your suggestions and your help!
Keep up the great work, stay safe, and stay awesome!

Feel free to close this ticket.

Cheers,
Griefed

[hariscs]

hey everyone, I tried the above solutions but none worked for me, then I set particles collision to false, and that resolved the speeding-up issue. attaching my solution configuration below.

  fullScreen: { enable: false },
  fpsLimit: 60,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: 'push',
      },
      onHover: {
        enable: true,
        mode: 'repulse',
      },
      resize: true,
    },
    modes: {
      push: {
        quantity: 4,
      },
      repulse: {
        distance: 200,
        duration: 0.4,
      },
    },
  },
  particles: {
    color: {
      value: '#FFC952',
    },
    links: {
      color: '#FFC952',
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1,
    },
    collisions: {
      enable: false,
    },
    move: {
      directions: 'none',
      enable: true,
      random: true,
      speed: 3,
      straight: false,
      bounce: false,
    },
    number: {
      density: {
        enable: true,
        area: 800,
      },
      value: 80,
    },
    opacity: {
      value: 1,
    },
    shape: {
      type: 'circle',
    },
    size: {
      value: { min: 1, max: 5 },
    },
  },
  detectRetina: true,
};

[Liam1809]

collisions: {
enable: false,
},
move: {
directions: 'none',
enable: true,
random: true,
speed: 5,
straight: false,
bounce: false,
},
enable collisions to false and increase speed