Software creative always looking for a challenge

Snow in JavaScript


Winter is finally over, but we can still make nice digital snow to cool us down during hot summer days. We will start by considering the path snow flakes take before they hit the ground, then we will find out how to implement it using mathematics. Finally we will implement this idea using Object Oriented Programming in JavaScript.

If you think of the fall pattern of snow in terms of a math function, you will realize it is in fact a sin function (see figure 1). Now all we have to do is to express x as a function of y. We will change y using a linear function (i.e increase y by a constant value) and calculate x based on that. So x = sin(y), y = t * c where t is time and c is a constant value.

Figure 1 – Sin graph resembles the path snow flakes take when falling down. Imaging the graph on its side may help you visualize how this works.

Note that it is easy to express both x and y as a function of t as well. This can be quite useful when we want to make our animation dependent on time alone. Say we wanted the animation to last exactly 5 seconds, we could then limit the range of the t variable to help us do that. In our case, we won’t need that, it will be simpler to stick to our original formulas.

Next we need to use transformations to help us bend the sin graph to our needs. If you look at figure 1, you will notice the f(x) only varies from -1 to 1, but that means that in our formula x will only be moving across 3 pixels (-1, 0 and 1) since we use integers for pixels. Instead, we want our x to vary between -W and W where W is some constant width. To do this we change our x to be x = W * sin(y) this is known as changing the amplitude of the sin graph. So this transforms our graph to be in a desired amplitude range. But what about the wavelength, well it is exactly 2π  which we want to change to be an arbitrary value L. Let us change the equation for x again to be: x = W * sin((2π  / L) * y). The transformations we just performed are based on this formula:

y = a + b sin(k(x - c))

The period length is 2π  / k.
Amplitude is b.
Shifting the graph up or down is achieved by using a. Which we will later use to position our snow particles.
Shifting the graph left or right is achieved by usingc. But we will not need it here.

If you plug in the changes we made to the original sin graph, you will see that we indeed get the results we want. An online graphing calculator is also a good way to play with graphs to create even more interesting animations. A simple online sin graph transformation can be used or a more generic graphing calculator can be used to find more interesting curves.

Here is the HTML code we use:

Note how flexable the code is, thanks to functional programming we can take any math function and plug it in as our movement pattern. This means that we are not limited to just snow, but we can in fact animating anything with the same code. For example if we wanted to animate falling leaves or falling rain just by changing the path function.

Another important thing to note is the use of random values to make the simulation (yes this is a simulation) more real. Since real life is more or less random, so is our animation. Randomness adds a great deal of realism and is used quite often throughout simulations.

Here is a demo page implementing this code. As you can see below, this makes a pretty neat effect 🙂 (when used responsibly of course).

Update 1: Changed SnowFlake class to use prototype for methods instead of using this.MethodName. This reduced the memory footprint to about one fifth (7MB) of the original (35MB). Go prototypes! 🙂

Want to do this in HTML5 with no Javascript? WordPress San Francisco had a great session about it. Check it out:

Be Sociable, Share!