HTML Canvas & Vanilla JavaScript Animation Series 1 – Floating Particles Effect

Hi everyone, welcome to my first ever
video series. So far my tutorials were only focused on CSS animations, it’s time
to go to the next level and try some JavaScript. In this series we will create
animated background effects you can use for your website, you saw some of them in
the first few seconds of the video. Today I will show you how to create this
floating particles effect and we will build our code so that we can easily
transform this into another effect in later videos. Thank you very much for
watching, don’t forget to like if you liked it, subscribe to the channel for
more and click the bell icon to get notified when I release a new video. We
will work with three files index . html style . css and script . js. All we
need to do in index . html is to link the style in script files and create a
canvas element with an ID of canvas 1 In style CSS file I like to start with
basic reset rules so we don’t get any unexpected behaviour across browsers. I
will give the canvas position:absolute width 100%, height 100% and background will be a linear gradient between three colours. In script . js file we will start with
declaring basic variables to set our canvas up we grab the canvas element
with getElementByID and save it to a constant variable I called canvas. Then
we created two dimensional rendering context with canvasGetContext(2d) we
set canvas width to window.innerWidth and canvas height to window.innerHeight. Declare let variable for particleArray, we will use this later. Now we want to populate our canvas with particles so
we will use so-called constructor function, these are used if you need a
blueprint to create many objects of the same type each particle will have
position on x and y axis to set its coordinates, Direction X and Direction Y
property to set speed – how fast the particle is moving along the axis, size
and colour properties. Next we will add a draw method to our
particle object. We could also declare this method inside the Particle
constructor function itself by saying this.draw=function(){…}, however
that is considered a bad practice because it would create a copy of that
method for each particle we generate. Instead we want to place this method
directly on the particle prototype. When we call the method and JavaScript
interpreter cannot find a method on the particle itself, it will travel down the
prototype chain to find it there. This way each particle is referring to a
single draw method instead of having the draw method in multiple places in our
memory for each particle separately which would cause performance issues.
Draw method will draw of a single particle on the canvas, we can test it by
calling new particle, by giving it position x and y=10, direction x and y=1,
size 20 and colour white. Now I call the draw method, it is not working because I
placed the script file before the canvas element in index . html file, so
JavaScript cannot find the canvas with getElementByID. All I need to do to
fix that is to put the script file all the way to the bottom of the page. Tt is
not moving yet, we will need to create another method I called update to make
it move. The update method is the thing that will
be called over an over frame-by-frame before we draw each frame we want to
check if the particle hasn’t reached the edge of the screen yet, if it has we will
switch its direction. I do this with simple if statement – if this dot X plus
the size of the particle is bigger than canvas width or if this.x coordinate
is smaller than 0 we say directionX is equal to minus directionX. If directionX is plus 1 for example this will switch it to minus 1 and particle will start
moving in the opposite direction until it reaches the other end of the screen
and it will switch again. Each particle is basically a slowly
moving bouncing ball. We do the same for vertical y-axis so very similar code but
we are chicken for canvas height this time. So if this.y + this.size is bigger than canvas height or this.y – this.size is smaller
than zero this.directionY is equal to -this.directionY. Once we
checked we draw a particle at its current XY location by calling this.draw() Since we want to create many particles
and each will have random size and speed we need to create an array of objects
and declare values for each one. I will create a function that will initialize
the array and assign random values to each particle. I’m calling that function
init, we have already created particle array variable earlier, now we assign
empty array to it in case it’s not empty at the moment. Then we create a for loop
let’s loop through 100 items and this will create 100 randomised
particles. Size will be a random number between 0 and 20, position X will be
random between 0 and canvas width, position y will be a random number
between 0 and canvas height. We will also need to account for our particle size
when assigning the initial position to make sure our particles are not stuck in the wall. Both directionX and directionY will be a random number
between minus 0.2 and plus 0.2. We want our particles to be bouncing very slowly to look like they’re floating in liquid And for now let’s make all of them
white. We can randomise the colours later. Now I will push this randomised particle
object into our particle array. Finally animation function to get
everything moving. I call the function animate but you can call it whatever you
want I will use requestanimationframe API and call animate. First in each frame
we want to clear our canvas otherwise our particles will be living trails, just
called ctx,clearRect ( 0, 0, inner width, inner height. This will delete our
entire canvas over and over so it’s ready for the next updated draw. Now “for” loop that will iterate over the entire particle array length each time and run
our update method for each particle. If you remember the update method first
checks if the particle hasn’t reached the edge of the screen and if it hasn’t
it will draw it. Now we call “init” and we call “animate” It is not moving let’s see, right, one
thing I forgot to do “update” function also has to update particle position by
adding its directionX and directionY values to its X&Y coordinates Now it’s all moving nicely, there is one
issue though if you resize the canvas everything stretches. We don’t want this
behaviour what we want is to run “init” again and refill our particles array and
calculate positions for each particle within our new canvas dimensions I will
add eventlistener for window resize event each time user changes window size
our canvas will adjust its width and height and init function will run to
redistribute particles evenly across the new available space. Like this. One last
thing I want to show you is how easy it is to customise and change this animation. I can just go into our init function and I can change size colour or number of
particles to achieve a different effect. Feel free to play with it an experiment
like I did. Anyway that’s all for the first part, thank you very much for
watching, don’t forget to like the video if you liked, it subscribe for more and
click the bell icon to get notified whenever I release a new video. See you
next time !

Add a Comment

Your email address will not be published. Required fields are marked *