Particles js is a fun little javaScript project

These days I have been playing around with all kinds of javaScript projects just to get a better feel of all that there is out there that is helpful, or just interesting. In my travels of researching what to write about I have come across something called particles.js on github which is also available via npmjs also. There are many other similar projects with similar names, but in this post I am working with this older project.

Particles js is a fun little toy to play with for a short while if you are looking for something alone those lines. I can not think of any piratical use for particles.js really it is just a fun artful thing to do with javaScript just for the sake of fun, which is the main reason why I got into javaScript to begin with.

1 - particles js basics

The particles js project is a client side javaScript project, but it can still be installed via npm. It is an older project that as of this writing appears to no longer be supported. However just because an older project is not longer supported that does not mean that it no longer works. It also does not mean that there might even be anything wrong with it.

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.

2 - Starting up a node project because of issues with file protocol.

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.

1
2
3
$ mkdir test_particles
$ cd test_particles
$ npm install particles.js

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.

2.1 - The server.js file at the root of the project folder

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var http = require('http'),
fs = require('fs'),
path = require('path'),
port = process.argv[2] || 8888, // port 8888
root = path.join(process.cwd(), 'demos'); // assume current working path is root
// create and start the server
http.createServer(function (req, res) {
// get the path to the request file
var p = path.join(root, req.url);
// get stats of that path
fs.stat(p, function (e, stat) {
// if error end request
if (e) {
res.writeHead(500);
res.write(e.message);
res.end();
}
// if stats check it out
if (stat) {
// if it is not a file append index.html to path, and try that
if (!stat.isFile()) {
p = path.join(p, 'index.html')
}
// try to read the path
fs.readFile(p, 'binary', function (e, file) {
// if error end request
if (e) {
res.writeHead(500);
res.write(e.message);
res.end();
}
// if file, send it out
if (file) {
res.writeHead(200);
res.write(file, 'binary');
res.end();
}
});
}
});
}).listen(port, function () {
console.log('particles.js project is up on port: ' + port);
console.log('hosting root path at : ' + root);
});

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.

3 - The demos folder

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.

3.1 - The index.html file

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="the-container"></div>
<script src="node_modules/particles.js/particles.js"></script>
<script>
particlesJS.load('the-container','basic.json', function(){
console.log('we be good man.');
});
</script>

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.

3.2 - Basic example with basic.json

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{
"particles": {
"number": {
"value": 10
},
"color": {
"value": "#00ffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 5,
"color": "#000000"
}
},
"opacity": {
"value": 0.3
}
},
"interactivity": {
"events": {
"onclick": {
"enable": false
}
}
}
}

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.

4 - Conclusion

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. If I get around to it I might expand this post one day when it comes to writing my own particles js project, but for now there is some more more to write about when it comes to javaScript, and all it has to offer.