Particles JS Effect with Pure Vanilla JavaScript | Animated Background Tutorial with Examples

Hi everyone. Welcome to another video in my canvas animation series, where we use HTML canvas element and pure vanilla JavaScript to create all different kinds of interactive animated backgrounds. The purpose of this tutorial series is to show you how to create animations you can use for your website, show off on your personal portfolio or just to practice your coding skills. So in this video we will build this beautiful animated effect ... how about now is it better? Don't worry that was just m

y first attempt. I have gone through many many attempts before achieving this. Creating this one in pure vanilla JavaScript with no libraries was kind of a challenge but I figured it out and I will share all the techniques with you in this tutorial. In this video we will build this amazing popular animation you see on the screen right now from particles js website, but we will do it with no libraries, just pure vanilla JavaScript. We will build all the functionality from scratch so we have compl

ete control over the code and we will be able to customize it in any way we want .Don't forget to like the video if you like my stuff and want me to make more, subscribe to the channel and click the bell icon to get notified when I release a new video. Just so you know I listen to your feedback this video was not my idea. In this episode I was going to show you how to draw stars on canvas. thanks Will. Also, I was asked why don't I use ES6 classes instead of constructor functions for this series

and there isn't really any reason not to use classes so in this video that's what we will do. Although I should say I still believe everyone who is serious about JavaScript should understand constructor functions first, because ES6 classes are just a new way to do the same thing. They are so-called "syntactic sugar" over function constructors, underneath JavaScript still does the same thing. Functionality stays the same under the hood, classes are just a different syntax which is easier to work

with for people come into JavaScript from different programming languages. This is the third video in my vanilla JavaScript and HTML canvas animation series, if you missed the previous episodes you should see the links on the screen right now or you can find it in the video description down below. You might have noticed that the complexity is increasing in with each video, this one will definitely be the most complex one yet, but the result will be worth it so stay with me. I try to make my vid

eos beginner-friendly while also keeping them interesting for advanced developers so if you think I'm going too fast or too slow please let me know in the comments. This is a new channel and I can use your feedback. To create this animation we have three problems to solve we have not encountered in this series yet. First is collision detection with a circle around the mouse. Previously we did only square, which is slightly easier and more intuitive I think. Second, every particle needs to be awa

re of every other particles current location to decide if they are close enough to be connected with a line. For this one we will need to use "nested loops", which means loop inside of another loop, and we will create one quite complex if statement. Third, if you notice the line connecting the dots is not the same all the time. it animates from being invisible to being fully visible the closer the particles are together. Without this you will get very jiggly effect as the lines snap in and out q

uickly, like you saw in my first attempt. Also if you stay until the end of the video as usual I will show you a few ways you can modify and customise this effect and create your own unique animations. Let's start. In index.html we link our style.css and script JS files and create html5 canvas element with an ID of "#canvas1". In style.css file we set basic reset rules so we don't get unexpected behaviour in different browsers. We set our canvas to cover the browser window and give it a radial g

radient background. Radial gradient is a progressive transition between two colors in a shape of a circle, so the colors are coming from the center of our canvas. That's it for the index HTML and style CSS files, everything else will be done in our JavaScript file. First we declare basic canvas variables. I will target the canvas element with "getElementById" and save it in a constant variable I called canvas. Then we set our context (shortcut CTX) variable with canvas get context 2d. We set can

vas width and height to the current window size and declare particle array variable which we will later use to store our randomised particles. We will also need mouse position. I will create custom object I called mouse. Give it X&Y properties and set them to null for now. Also we will give it radius property, which will determine the size of an area around the mouse in which the particles react to it. I want that area to scale depending on canvas size so that's why you see the simple formula th

ere. You can also use static number but you will have to experiment with it a bit to get it. I did a lot of trial and error testing while preparing for this tutorial. To get the current mouse position we will create an event listener for "mousemove". This will fire every time user moves the mouse. This listener has access to the event object, which we will need. I will set mouse x to event.x and mouse y to event.y. Now we create a class for particle. We will use it to create a randomized particl

e object every time we call it with the "new" keyword. This is how we fill our particle array with individual particles with randomized values. As I said before JavaScript classes are "syntactical sugar" over prototype based inheritance, that was introduced with ES6 in 2015. In the previous videos we use constructor functions, now we are doing the same thing just with a slightly different simplified syntax. We declare the constructor which is a special method for creating and initializing an obj

ect created with a class. Each particle will need x and y coordinates, these are different and independent from mouse x and y coordinates so don't confuse the two. DirectionX and directionY, which will hold the value for number of pixels our particles animate each step along the x and y axis. This can be a positive or negative number as the particles will be bouncing back and forth around the canvas. Each particle will also need size and color properties. Now we create a method that will draw in

dividual particle. We will be calling it over and over from our update function I will create soon. it will be called for every particle for every frame of our animation, after we calculated particles current position and mouse interactions. This method will just draw a regular circle on canvas. We use arc method and give it current x and y coordinates and particle size. Another method we will create on our class is update. It's a custom method so you can call it whatever you want. In here I wil

l check the current particles position, check mouse position, move the particle accordingly and call .draw() method from here, once we know where to draw the particle. As the particles are basically bouncing around the canvas we will first check if the particle has reached the edge of the screen. If it has we will reverse its directionX or directionY value, to make it animate in the opposite direction. I've already explained this in the previous videos. Now we need to check if the current mouse

position overlaps with the current particle position. We call this "collision detection". In previous videos we checked for collision in a square around the mouse, so basically just if the particle was within certain distance from the mouse on the x and y axis. Now we want to do the same thing, but we want the area to be a circle. To do that we take two center points of our circles one is the center of our particle the other one is the mouse cursor. We check in the distance between two center po

ints is less than two radii added together. Mouse radius is declared in our mouse.radius variable particle radius is it's this.size value because that's what we used in canvas "arc" method to draw our particles as circles. To calculate that we use this common formula. "dx" is the difference between the current mouse position and the particles position on the x axis, and "dy" is the difference between mouse position and particle position on the y axis. Then we calculate the distance by taking squ

are root from dx times dx plus dy times dy. As I said now we compare radii of both circles and check if they are bigger than the distance variable. If they are smaller that means our particles are colliding, so if the distance is smaller than mouse radius plus particle radius represented here by this.size value, we have a collision. Inside this if statement we need to do additional checks to see which side the particle is coming from so we can decide which direction we want to push it. Since we

are nesting "if" statements these checks are only done for colliding particles. First we check if mouse.x is smaller than this.x, which is particles current position. If that's true we know the mouse is currently to the left of our particle and we will push the particle to the right. Yes. Which means in plus direction on the x-axis. We also want to check if the particle is far enough from the edge of our canvas to make sure we don't push it over the edge, because it will get stuck there. I chose

buffer area of particle size this.size * 10 around the canvas. If the particle is closer to the edge then 10 times its size (actually it's radius - half circle) we will not push it any further. We need to do this for all four sides we check to see if the current mouse coordinates are bigger or smaller than particles position on the X and Y axis and push particles in the appropriate direction so it appears like they are being pushed away from the center of our mouse radius circle. As we push the

particles around we also check if there is a buffer of "particle size times 10" between its position and the edge of the screen for all four sides - top, bottom, left, right. After we have checked all of this we will move the other particles that are currently not colliding with the mouse, along their x and y axis by adding their directionX and directionY value to their X&Y coordinates and then we draw it by calling this.draw(). Keep in mind that the entire update method will run for every par

ticle separately over and over for every step of our animation. Now we need to create a function that will randomize values for each particle and push it into our particle array. I call that function "init". First we take a "particleArray" variable we declared on top and assign it to an empty array in case it's not empty at the moment. Then we calculate a number of particles from the current canvas dimensions the bigger canvas the more particles we create. We save that into "numberOfParticles" v

ariable. First we declare size because we will need its value to calculate x and y-coordinates. Size will be a random number between 1 and 5. X and Y coordinates will be a random number between 0 and canvas width and height with particle size value as a buffer around the canvas to make sure we don't get stuck in a wall. DirectionX and directionY, which basically determine how many pixels the particles animate each step in our "update" function (so that's our movement speed) will be random number

between "-2.5" and "+2.5" and we set a color as well. Then with the "new" keyword we will use particle class constructor we declared earlier to create a particle object with our randomize values and use array push method to push it into our empty particlesArray. "for" loop will do this over and over until we reach the number defined by the numberOfParticles variable. We will also need animation loop. I will call this function "animate". I will use requestAnimationFrame API for smooth animation.

Clear rectangle method with our canvas dimensions to clear the old canvas paint in every step and "for" loop that will call the update method for each individual particle. Update method if you remember, checks if the particle collided with the wall or mouse, updates particles coordinates accordingly and draws it. Now I call "init" to fill our array with randomized particles and I call "animate". Now you can see we already got something going on. Particles are bouncing around the canvas and reac

t to the mouse. There are few bugs here, we will deal with that a bit later. We want to check if particles are close enough to draw a line between them. I will build another function and call it connect. We will use nested loops for this. First we will cycle through variable "a" and inside we will cycle through variable "b". Variable "a" will represent each individual particle in our array and a variable "b" will represent all the consecutive particles in the same array. You can see the inner lo

op says b equals a. We need to do this to allow us to compare their x and y coordinates and calculate their distance. Basically outer loop will take every particle in our particlesArray one by one and for each of them it will run the inner loop with "b" variable against every other consecutive particle. What we're doing here basically is 1 compared to 2, 1 compared to 3, 1 compared to 4, 1 compared to 5... until we reach the length of the array and we exit the inner loop, outer loop will set "a"

to a value of "2" and we enter the inner loop again - 2 compared to 3, 2 compared to 4, 2 compared to 5... I'm not sure if I'm explaining this clearly. Basically it's a lot of calculations and these need to take place for every single frame of our animation, so be careful, if you create too many particles you can give your computer a hard time. I will save this value in a "distance" variable because we will need it for one more thing later. For now we check if the distance is smaller than canva

s width divided by seven times canvas height divided by seven. I came up with these numbers by trial and error if you divide the canvas by a smaller number you will get longer lines but more distant particles will be connecting, so this will also affect your performance. You can experiment and find the right balance and effect you like. You can also use a static number here, but I prefer the lines to get longer on larger screens. I want this effect to be dynamic. So for each pair of particles th

at are close enough to each other we enter the"if" statement. We set stroke color, line width and draw a line from the first particles X and Y coordinates to the second particles X and Y coordinates. I think I made a few typos here. It is spelled "particlesArray" with an S but I spelled it "particleArray" , let's quickly fix that. Now in our animate method, we call "connect", so this entire monsters function will run for every frame of our animation. There's a problem somewhere. Yeah misplaced p

arenthesis. That's better. Let's move the connect function up to stay organized. We are not done yet. There are few things I don't like about this animation still. We need to polish it up a bit. First problem is that the canvas stretches when we resize our window. To fix that I will create an event listener for window resize event and every time user resizes the browser we will set the canvas width and height to the new innerWidth and innerHeight and we will recalculate mouse radius, as we want

bigger radius for bigger canvas size. Then we call "init" to redistribute our particles randomly in the new canvas dimensions. Another problem is that the particles interact with the mouse even when we leave the canvas, because that area becomes the last known mouse position. I will create another event listener for "mouseout" event and I will set mouse x and mouse y as undefined. Now it's fixed. Setting it to null would be a better practice, but for some reason it's not working for me. Right no

w you can see the lines appear and disappear quickly. Snap in and out with no animation. I would prefer if they were animated as well. To do this we can go up to our custom connect function and create a variable called "opacityValue". I will set it to 1, then down in the "if" statement we will set the value dynamically to 1 minus distance divided by 20,000. I got this number by trial and error. In stroke style we just concatenate the value to our RGBA color declaration. Now the line is at full o

pacity of 1 while the particles are closed and slowly grows invisible as the distance between the particles grows. Let's add more particles so you can see that the mouse collision area is is a circle. So that's all done for the basic effect. In case you are wondering HTML canvas is well supported now and this code will work in all browsers including Internet Explorer. This video is running long already. I will create another one to show you how to customize this effect. There are few things I wa

nt to show you with this one. Links should be on the screen right now and in the description down below. Except for the obvious modifications like changing particle size, color, line width, line length, particle shape and so on with this one we have many more options. I will show you how to modify this code and split the canvas and particles by colors, how to create "sunrays" effect, breaking particle trail that follows the mouse around, "vacuum-cleaner" effect and more. Thank you very much for

watching, don't forget to like the video to let me know you like this type of content. Subscribe to the channel and click the bell icon to get notified when I release a new video. Also while you're here you can check out some other content on my channel. For example do you know how to create this effect with pure CSS? See you next time!