Particles.js crashes in Google Chrome about particles.js

[ashleykinguk]

I had an issue where chrome would crash, I fixed it by changing this:

case 'circle':
pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false);
break;

To this:

case 'circle':
try {
pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false);
} catch(err) {
//alert(err);
}
break;

You'll see the error that occurs if you uncomment the alert

[VincentGarreau]

Hi @4DiGITS,
Are you on a retina display, or have you set an svg image as a particle for example (into the json config)?
These two cases involve heavy calculations and may crash the browser unfortunately.

Thanks for your quick response. I am not working on a retina display nor do I use svg particles. However, retina detection is set to 'true'. Don't know if that has a performance implication. Would appreciate your comment on my json configuration, which I adapted from the original setting. Maybe there is some room for performance improvements:

{
  "particles": {
    "number": {
      "value": 100,
      "density": {
        "enable": true,
        "value_area": 1920
      }
    },
    "color": {
      "value": "#fff"
    },
    "shape": {
      "type": "none",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      }
    },
    "opacity": {
      "value": 1,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 1,
        "sync": false
      }
    },
    "size": {
      "value": 7,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#fff",
      "opacity": 1,
      "width": 1.2
    },
    "move": {
      "enable": true,
      "speed": 3,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": false,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "repulse": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 50
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

[VincentGarreau]

Hi @4DiGITS, sorry for the late reply!
I just tested your configuration, and i have no problem. I tested the script on Windows, OSX, but not on Linux, i hope this is not the issue :s

[Serse]

Hi @VincentGarreau, great library.
I'm playing around with it but if I put a svg image it crashes both on Chrome and Firefox on Mac.
It happens even if I choose a very small amount of particles (10-20 of them).
Have you got any suggestions?
Thank you

[VincentGarreau]

Hi @Serse, thanks!
Load svg image is actually a heavy process unfortunately, i'll try to improve it. If your svg image is heavy it may crash with a very small amount of particles. Try with a lighter svg image maybe, or png :)

[Serse]

Thank you @VincentGarreau
Keep up the good job ;)

[brickpop]

Something similar happens here.
Memory consumption in Chrome starts growing at a rate of ~2Mb per second...
At some point, the only way to continue using Chrome is to kill the tab (f it doesn't crash by itself)

Any clue on possible memory leaks or unclean loops/intervals?
Thank you!

[seminice]

Bad memory leak .. chrome, firefox , everywhere.... My workaround was to destroy the instance and recreate to free memory and re allocate, but this is not a solution ..

[ping2ayan]

I have used particle.js as a background of a website! The problem is, it is running only in firefox 46. but not in chrome or chromium or Microsoft edge! Not able to understand the problem! :(

[jdegger]

I'm currently also experiencing the memory leaks. Is there a proven fix for this already? As you can see I use the script as a dependency of pagekit/theme-avion.

-edit-
Currently testing the solution of @ashking08

[jdegger]

Thanks @ashking08 that indeed seemed to do the trick.

[ashleykinguk]

No worries @jdegger glad I could help