In this post I will not just be giving a simple particles js example, but will also be going over a simple static server script that will work with nodejs also in the process. You do not need to bother with this script assuming that you have another means to host particles js, and the additional code via http.
So even though particles js is a client side javaScipt project it can still be installed via npm. I ended up creating a demo folder in the root of the project folder and that is where I places particles.js though. So I coped and pasted it from the node_modules folder in other words. If you want you can grab a copy of particles js from the github folder, or check out my test_particles github folder that goes with this post.
I will also need a means to setup a static server to serve up the index.html as this is one of those projects that will not work well with the file:// protocol. So with that said I put together this simple sever.js example that worked for me.
here is the server.js file that I worked out for this project. A file like this is something that I keep reinventing now and then when it comes to some of these projects when it comes to just using nodejs by itself. If interested a better alternative might be to just use express static. This will make things a little more complicated as I am now depending on more than just node, but once express is part of the project it is very easy to just set up a static web sever to host files via http.
If you have something better in mind go with that, as long as you have a way to sever up the index.html via http.
So in the root of the project folder I have made a demos folder that will be the folder that will be hosted. In this folder I have an index.html file that will load particles.js that I have in a js folder of this demos folder. I also have a basic.json file that contains the basic stats that are to be used with paricles js.
Now that I have everything set up with demos folder, and I have my sever.js file ready to go it’s time to throw together a simple index.html file for the project.
This html file just needs to grab the particles.js file, and also a json file that will be used to set up the particles.
As you may have gathered the load method will use what is in the given json file to setup particles which will be used in the given container element. as such also in the root path of the project I places my basic.json file that looks like this:
This allows me to define some values for the particles that are going to be displayed. Also for my basic example I decided to disable interactivity.