I’m going to quickly break down each section. If you’re new to JavaScript remember that code executes top to bottom.

First up, globals variables. Variable scope is a pretty easy concept to understand. A global variables is a variable that they can be accessed anywhere in the script. There are three globals variables in this code. Canavas is the reference to the canvas object on the HTML code. Particles is an array that we will be using to store the animation particles and tick is just a simple ticker variable.

The all the function loop does is call the other functions in the script. It’s repeated using the setInterval method below the function. The method, setInterval() takes two parameters, the loop function and a integer 30. Thirty represents the how long the the setInterval() method should wait before calling loop again, also it’s defined in milliseconds. If you want to make the animation faster insert a lower number and likewise use a larger number if you want to speed it up.

The function createParticles() adds objects to the particles array. The first if checks the ticker has a remainder of 0 when modular division of 10 is used. The next, nested if statement checks makes sure the array only holds 100 objects at a time. Inside the nested if statement, the push command is used to add an particle to the array. A particle object is made up of a x/y coordinate, speed rate it will fall at, radius of the circle, and a random color. The randomColor() fucntion is the only code I made myself. I’ll show you that later, but in Josh’s example every circle was white.

This function is pretty simple. Instead of having all white circles, I decided to add a bit of color to them. I made a simple switch statement that will return a random color between red, white, blue, green, gold. I’ve also added an extra return color of purple before the function ends. My function randomColor() should never return purple but in the unlikely case a number out side the range of 0-4 is picked, the circle will be purple.

The function updateParticles controls how the particles fall down the canvas. All it is a simple for loop that adds the speed rate onto the particle’s y coordinate. I’ve also added code to make the particles wiggle as the fall down. You can also make the fall at an angle if you wish by doing something part.x += 1 or part.x -=1.

In Josh’s example he had a function called killParticles but that seemed a little deceiving so I renamed it to resetParticles. I also had to add a little more logic to it. The this function core is a for loop that iterates through all the particles stored in the array. In Josh’s example he just rest the particles y coordinate if it went outside the canvas limits. Since I’m also moving the particles on the x coordinate I’ve added another if statement to check if the particles leave the canvas limits.