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
}
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
}
}
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.