Particles.js: Uncaught TypeError: Cannot read property 'r' of undefined

Created on 19 Apr 2018  路  1Comment  路  Source: VincentGarreau/particles.js

In some configurations I get this error:
Uncaught TypeError: Cannot read property 'r' of undefined at Object.i.fn.interact.linkParticles (particles.min.js?ver=2.0.0:9) at Object.i.fn.particlesUpdate (particles.min.js?ver=2.0.0:9) at Object.i.fn.particlesDraw (particles.min.js?ver=2.0.0:9) at Object.i.fn.modes.removeParticles (particles.min.js?ver=2.0.0:9) at Object.i.fn.vendors.densityAutoParticles (particles.min.js?ver=2.0.0:9) at Object.i.fn.vendors.init (particles.min.js?ver=2.0.0:9) at Object.i.fn.vendors.checkBeforeDraw (particles.min.js?ver=2.0.0:9) at Object.i.fn.vendors.start (particles.min.js?ver=2.0.0:9) at new pJS (particles.min.js?ver=2.0.0:9) at window.particlesJS (particles.min.js?ver=2.0.0:9)

It mainly happens in combinations where density is enabled and move is disabled. Disabling density or enabling move somehow makes the error disappear. I wonder if I'm doing something wrong here in general. This is a sample config where the problem occures:

{ "particles": { "number": { "density": { "value_area": 800, "enable": true }, "value": 14 }, "color": { "value": "#ff0000" }, "shape": { "stroke": { "color": "#ff0000", "width": 5 }, "polygon": {}, "image": {}, "type": "circle" }, "opacity": { "anim": { "enable": false, "sync": false }, "value": 0.5, "random": false }, "size": { "anim": { "enable": false, "sync": false }, "value": 50, "random": false }, "line_linked": { "color": "#ff0000", "enable_auto": false }, "move": { "attract": { "enable": false }, "enable": false, "random": false, "straight": false, "bounce": false } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": {}, "onclick": {} }, "modes": { "grab": { "line_linked": {} }, "bubble": {}, "repulse": {}, "push": {}, "remove": {} }, "mouse": {} }, "retina_detect": true }

Most helpful comment

Play around with number.value and number.density.value_area.

Lowering value_area will prevent the error occurring on small devices/resolutions. and tweaking value will allow you to get a similar appearance that you have with a higher value_area. (lowering value_area alone will result in a much denser pattern).

Settings that I have working, with no error on any of the default devices in chrome dev tools.

number: {
      value: 60,
      density: {
        enable: true,
        value_area: 150
      }
}

>All comments

Play around with number.value and number.density.value_area.

Lowering value_area will prevent the error occurring on small devices/resolutions. and tweaking value will allow you to get a similar appearance that you have with a higher value_area. (lowering value_area alone will result in a much denser pattern).

Settings that I have working, with no error on any of the default devices in chrome dev tools.

number: {
      value: 60,
      density: {
        enable: true,
        value_area: 150
      }
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

khamarzama picture khamarzama  路  5Comments

cedriccharles4 picture cedriccharles4  路  3Comments

harshamv picture harshamv  路  3Comments

ghost picture ghost  路  7Comments

NoelAnnParisi picture NoelAnnParisi  路  4Comments