Particles.js with Wordpress - json

Question

My particles.js won't load with my WorpdPress custom theme.
The console throws this error:
I found plugin for this Particles effect, but I don't know how to use it :D And, I'd like to implement my own.
So, particles worked just fine, until I transformed my website into a WordPress theme... It's obviously problem with a JSON file....how can I go around this?
btw....it's on localhost....would it make difference when on a server?

Answer 1

Ok, so I managed to solve this problem. Not sure if it's THE solution, but what worked for me was: I had to put the JSON config inline, in a custom app.js file. Then it worked.
When the JSON config is in a separate file, WP has a problem loading it. It throws GET 404 not found. So....this worked for me...
I found the solution here: https://github.com/VincentGarreau/particles.js/issues/157

Answer 2

what I did was include the json settings in a variable and place that code in the javascript file that you put this code
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
But I did not use particlesJS.load, just particlesJS. So it would look something like this
var config = {
particles: {
number: {
value: 100
},
color: {
value: "#d4d4d4"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#d4d4d4"
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: "#d4d4d4",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: false,
straight: false,
out_mode: "out",
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
retina_detect: true
}
particlesJS("your-id-or-class", config, function () {})