Particles.js: How to decrease density of particles on mobile screen?

[rahulsimpact]

Hey Vincent Thanks for this :)
I am having a little problem as
Your online preview " http://vincentgarreau.com/particles.js/ " looks so smooth on all screens.
When I am running file locally(in small screens) i get the view as

The particles are condensing too much on the sides of window when i resize the window
Could you please help me where I am missing out to get a smooth view like yours?

[VincentGarreau]

Hi, thanks!

The plugin has no "responsive mode", but i'll work on it ;)

For now, you can define different configurations depending on the size of the screen. You can set multiple break points, with a configuration settings for each one.

On the particles.js page, a break point is set at 1100: http://vincentgarreau.com/particles.js/
If the width of the screen is greater than 1100, a function is launched ("pJS_desktop"). If it is lower, another function is called ("pJS_mobile").

The code: http://vincentgarreau.com/particles.js/js/app.js

/* LAUNCH */

if(window.innerWidth > 1100){ // pJS_desktop and pJS_mobile = my settings functions
  pJS_desktop();
}else{
  pJS_mobile();
}

/* on resize */

window.addEventListener('resize', function() { // use ".addEventListener", not ".onresize"
  checkOnResize();
}, true);

function checkOnResize(){
  if(window.innerWidth > 1100){
    if(pJS.particles.nb != 150){ // 150 = desktop setting
      console.log('desktop mode')
      pJS.fn.vendors.destroy();
      pJS_desktop();
    }
  }else{
    if(pJS.particles.nb == 150){ // 150 = desktop setting
      console.log('mobile mode');
      pJS.fn.vendors.destroy();
      pJS_mobile();
    }
  }
}

[rahulsimpact]

Thanks for the support.

[nOttenga]

This is a great plugin. I walked on this mobile density "problem" and i solved like this, transforming it in something responsive. (the important thing is var num_nb)

    width = $(document).width();
    if (width>768){
        num_nb = Math.round(Math.sqrt(width * 15));
    }else{
        num_nb = Math.round(Math.sqrt(width * 3));
    }
    console.log(num_nb)

     particlesJS('particles-js', {
        particles: {
            color: '#008391',
            shape: 'circle', // "circle", "edge" or "triangle"
            opacity: .6,
            size: 5,
            size_random: true,
            nb: num_nb,
            line_linked: {
                enable_auto: true,
                distance: 110,
                color: '#008391',
                opacity: 1,
                width: 1,
                condensed_mode: {
                    enable: false,
                    rotateX: 600,
                    rotateY: 600
                }
            },
            anim: {
                enable: true,
                speed: 1
            }
        },
        interactivity: {
            enable: true,
            mouse: {
                distance: 250
            },
            detect_on: 'canvas', // "canvas" or "window"
            mode: 'grab',
            line_linked: {
                opacity: .5
            },
            events: {
                onclick: {
                    enable: false,
                    mode: 'push', // "push" or "remove" (particles)
                    nb: 4
                }
            }
        },
        /* Retina Display Support */
        retina_detect: true
    });

[VincentGarreau]

Hey,

Great solution @nOttenga, thank you!

The plugin has now a "responsive mode". With the v1.1.0 version, you can enable a "density_auto" param to "true", and set a "density_area". The number of particles on the screen depends on this "density_area":

I want pJS.particles.nb particles when the canvas area (canvas width * canvas height / 1000) is equal to density_area.

number of particles on the screen = pJS.particles.nb * (canvas width * canvas height / 1000) / density_area

Check the v1.1.0 log: https://github.com/VincentGarreau/particles.js/releases/tag/1.1.0

Hope this helps :)

[ummahusla]

@nOttenga Awesome solution mate! Thank you.