So, a colleague of mine recently showed me an interesting library called ParticleJs. Per the Git Repo for the library, it is A lightweight JavaScript library for creating particles. Just one of the many works of Vincent Garreau. particleJS Library gives oneself a way to add some dynamism in terms of particles to the otherwise static web page.
In my last article I used a widget dependency to add webslides library to our widget. This time however, we would use a direct CDN link in our widget HTML. So, what are we waiting for? Let’s jump right into it.
We start by creating a new widget. As always, giving it some identity by adding a name, and ID and some description for our future selves to make a sense of. 😉 I’m going to name it “particleHomepage” with id as “particle-homepage”. Also, I’m going to use “Has Preview” checkbox, it allows to quickly check the functionality in the widget editor itself. That should be enough information to save the widget and open it up in the widget editor. We would not be using the server side code for our widget, so we can uncheck the server side scripting box to make more room available to us in the editor.
Right, so first thing we’re going to do is add below lines in the HTML part of our widget editor.
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
<div class="particle-container">
<div id="particles-js"></div>
</div>First line, uses the CDN link directly inside our script. Other three lines create a simple div structure for hosting the particleJS canvas. First div is the container with a fixed height and width and second div creates the root element that the particleJS script will be using to load and show the particles.
Next, add below CSS inside CSS part of the widget.
/* -- A fixed container that will host the particleJS part -- */
.particle-container {
display: block;
height: 500px;
width: 500px;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}Save the record, the preview part would still be empty. That is because, we’re missing the data part for our page. It is a JSON object and can easily be constructed ourselves, however it is much easier to use the playground provided by Vincent on this page to generate the basic json.
For starters, let’s just download the default configuration available from above page. We add this code in the Client Controller part.
api.controller=function($timeout) {
/* widget controller */
var c = this;
$timeout(loadParticles, 1000);
function loadParticles() {
var particleJsConfig = {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"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": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": false
};
particlesJS("particles-js", particleJsConfig);
}
};
Before we delve deeper into the code, just save the record and check the Preview part, you will see the particleJS in action... 🙂
Now, looking back at the Client Controller function, we’ve injected a $timeout functionality to our widget. Reason being, we’re loading the dependency through a CDN link in the HTML part. So, if we try to access particleJS method directly, it will throw an error. Also, based on the network speed, it may take a while before the script is loaded properly. With $timeout, we add a delay of a second before we reference the script in our code with below line of code.
$timeout(loadParticles, 1000);Inside loadParticles(), we simply call the method particlesJS with two parameters, "particles-js" and the configuration object that we copied earlier.
There are three main attributes in the particleJsConfig
1. Particles
Attributes related to number of particles, their size, their shape, the direction that they move etc.
2. Interactivity
Attributes related to interactivity like hovering over or clicking on the particles. There are five separate actions,
i. Grab – Grabs particles that are in the vicinity
ii. Bubble – Enlarges particles in the vicinity
iii. Repulse – Forces the particles away
iv. Push – Adds new particles
v. Remove – Removes particles
3. Retina Detect
This is related to the high-resolution image rendering. We keep it off for our simpler objects.
By modifying Few properties in the particleJsConfig object, we get a completely different effect in the front-end. For example, to give it a shooting star appearance, change below attributes in the config object
shape.type = "star"
size.value = 10
line_linked.enable = false
move.direction = "bottom"And to give it a night sky effect, change the CSS attribute to black
background-color: #000000Pretty amazing, isn't it? And you could mix it with other widgets to create some really cool effects. I used it to to create a Halloween effect for the homepage search widget. You could find that share item here.
