Search code examples
javascriptparticles

Particles.js — modify on frame-change

Apologies for my complete lack of javascript intuition, but I was wondering if it is possible to change properties of a particles.js object dynamically:

I'm using jQuery to detect when a user moves a slider on the screen (successfully). However, I was wondering how to apply these slider-value changes to the particles.js canvas I have in the background.

I.e. Move the slider across, and the particles get larger.

However, I'm not sure how to update the particles.js — is anyone familiar with a callback or animation loop function that I can drop my property changes into?

Solution

  • There is an open issue on this subject. But you can change it manually by accessing the radius property of each particle:

    pJS.particles.array.forEach(function(p) { 
    p.radius = p.radius * sliderValue; // change by a factor
    p.radius = sliderValue; // change to a single size
});