Particles.js: Responsiveness

Created on 17 Mar 2015 · 7Comments · Source: VincentGarreau/particles.js

It's not responsive. What are the options to make it responsive?

Source

akashnimare

Most helpful comment

Hi @akashnimare , @dabockster :)

To make it responsive, juste set the "density_auto" option to "true". And with the "density_area" option, you can set an area relative to the defined number of particles (particles.nb option).

particlesJS('particles-js', {
  particles: {
    nb: 80
  },
  interactivity: {
    events: {
      onresize: {
        enable: true,
        density_auto: true,
        density_area: 400 // nb_particles = particles.nb * (canvas width *  canvas height / 1000) / density_area
      }
    }
  }
});

There is a demo juste here: http://vincentgarreau.com/particles.js/responsive

VincentGarreau on 20 Mar 2015

👍3

All 7 comments

Is it the topmost

or is there stuff above it in your body tag?

dabockster on 18 Mar 2015

It is the topmost.

akashnimare on 19 Mar 2015

Hi @akashnimare , @dabockster :)

To make it responsive, juste set the "density_auto" option to "true". And with the "density_area" option, you can set an area relative to the defined number of particles (particles.nb option).

particlesJS('particles-js', {
  particles: {
    nb: 80
  },
  interactivity: {
    events: {
      onresize: {
        enable: true,
        density_auto: true,
        density_area: 400 // nb_particles = particles.nb * (canvas width *  canvas height / 1000) / density_area
      }
    }
  }
});

There is a demo juste here: http://vincentgarreau.com/particles.js/responsive

VincentGarreau on 20 Mar 2015

👍3

@VincentGarreau Thank you!

akashnimare on 8 Apr 2015

Hi Vincent, i love particles.
The code you provide about responsiveness, where i need to put it? I have the json file with all the configuration. Thanks!

n6ither on 5 Apr 2016

I am having a similar issue with responsiveness of the particles as well as the mouse location on window size change. Here are examples of what is occuring.

Before screen size change:
https://media.giphy.com/media/xBpGtoZh7l6PAbmlpi/giphy.gif

After: (mouse location moves, and scale of lines/nodes are different)
https://media.giphy.com/media/khOqDEduaH6GsTFBYq/giphy.gif

Bullkn0x on 13 Jun 2018

I am having a similar issue with responsiveness of the particles as well as the mouse location on window size change. Here are examples of what is occuring.

Before screen size change:
https://media.giphy.com/media/xBpGtoZh7l6PAbmlpi/giphy.gif

After: (mouse location moves, and scale of lines/nodes are different)
https://media.giphy.com/media/khOqDEduaH6GsTFBYq/giphy.gif

Can you post your json and your css.