This Javascript creates a snowfall effect on a web page. Thanks to VerkkoNet for his tutorial video. OK, I won’t deny it, I copy pasted a little, but that is only because I don’t know what functions to call. I somehow needed an idea. But now that I know the functions, I’m finally beginning to understand why the code works.
Also, I know this might be a little late since it’s already the spring solstice. It could have been a good animation back in the winter equinox. Perhaps, I should start creating blooming flowers animation instead… anyway…
If you guys want to download the file, you can download it here.
You can also see this as a pen in CodePen.
Let’s talk about the Code
This is our complete code in the HTML file. I will just comment as we scroll down the code. Also, I will only highlight some functions. You guys may have to figure out what others do.
<html>
<head>
<title>Snow Effect</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
body{
background: #000;
text-align: center;
vertical-align: middle;
}
#winter-field{
top: 50%;
transform: translateX(-50%) translateY(-50%); /* vertically aligns the canvas in the middle of the page */
position:absolute;
}
</style>
<script type="text/javascript">
function init (){
var portrait = document.getElementById('winter-field');
var context = portrait.getContext('2d');
// .width returns the width of the element
var w = portrait.width;
// .height returns the height of the element
var h = portrait.height;
// create new image function
var background = new Image();
// source of the background image for the canvas
background.src = "images/snowy_park.jpg";
// container for the array of snowflakes
var snowflakes = [];
function snowfall (){
// clearRect 0 0 and setting width and height to itself not only clears the canvas, it clears all canvas state.
// This is ideal for redrawing
context.clearRect(0, 0, w, h);
// set the background image in x-position: 0 and y-position: 0
context.drawImage(background, 0, 0);
// Run addSnowFlake and snow functions
addSnowFlake();
snow();
};
function addSnowFlake (){
// create random numbers and round it off to avoid floating numbers then multiply it to the width of the element.
var x = Math.ceil(Math.random() * w);
// same as above but multiply it with a constant
var s = Math.ceil(Math.random() * 3);
// The push() method adds new items to the end of an array, and returns the new length. Colon passes the value of var x to array of x, y to array of y, and s to array of s.
snowflakes.push({"x": x, "y": 0, "s": s});
};
function snow (){
// for loop condition. If i is less than the value of length, increment i
for (var i = 0; i < snowflakes.length; i++){
// create multiple containers for the snowflakes
var snowflake = snowflakes[i];
// The beginPath() method begins a path, or resets the current path. Think of it like your pencil or brush.
context.beginPath();
// The color of your brush
context.fillStyle = "rgba(255, 255, 255, 0.7)";
// creates circles in random sizes since var x and s are using Math.random. y is zero but it gets new value from s divided by 2. The circle starts at 0 degree radian, and ends at 2 * 3.14159, making up a 360 degree radius, thus, draws a perfect circle
context.arc(snowflake.x, snowflakes[i].y += snowflake.s/2, snowflake.s/2, 0, 2 * Math.PI);
// The fill() method fills (modifies) all the elements of an array from a start index (default zero) to an end index (default array length) with a static value. It returns the modified array. This makes our snowflakes go down to the bottom.
context.fill();
// if the content of the array of y is greater than the height of an element, remove value from array. This makes sure that are snowflakes don't go beyond our height.
if(snowflakes[i].y > h){
snowflakes.splice(i, 1);
}
};
};
// the time interval between script firing
setInterval(snowfall, 20);
};
window.onload = init;
</script>
</head>
<body>
<canvas id="winter-field" width="450" height="298"></canvas>
</body>
</html>
Our code here is lightweight, by adding and removing array context values, we don’t run into memory overload and we lessen CPU usage even when using a full screen canvas.
Another point… setting the multiplier constant for var s from 3 to something higher will make some snowflakes turn into a snowball and will make it fall faster than the others. That is due to the fact that s is use to draw the circles and when multiplied to a bigger number yields a bigger circumference for our circle. s also controls how fast our array is being pushed.
Follow me at:
