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.
So particles js is a fun little project to play around with, but there is not much to it really just a way to have a bunch of particles floating around. However it is not to hard to just go about writing my own module when it comes to doing this sort of thing, and often I find myself doing just that. It seems like making modules that are ways of just creating arrays of objects that move around my one way or another is just one of those artful things to do with code that just comes up naturally.
With that being said I have made several canvas example that have to do with what I have also come to call particles. One example has to do with a kind of binary particle thing where there are two kinds of particles and when they come together they end up causing an explosion. Another canvas particles example has to do with one type of particle that attacks and destroys other particles in the area. In time I am sure that I will make even more canvas examples like this, so I will see about expanding this post farther as I make even more of them.
I am not sure that this sort if thing should always be done by just using someone else’s code, there is getting started by looking at what al other peoples code examples of course. However in the log run making your own particles.js module might be called for, and also it is something that should maybe me made on a per project basis, or have some kind of plug in system. They reason why I say that is because it is not just a question of using a particles.js module, but what it is that you can add to a module such as this to make something interesting.