The Falling Snow Effect


Does your browser’s developer tools console show any error? If you aren’t familiar with the console, this will help: :slight_smile:


Thanks for the great tutorial on snowflakes! I love the depth of your explanation… not many people go through the trouble… you’re the bomb!


Help plz. I’ve got like 25 cm of snow now and I don’t know how to make it stop. I tried stop(); but it didn’t work. Please tell me how to stop falling snow effect. Urgent!


Sorry, I don’t know the metric system. Can’t help :persevere:


Did you try getTimer()? It should stop all snow.



PS: 25 cm is about nine sixtyfourths of a fathom, if that helps you imperial-minded folks.


I’m personally more concerned with the falling snow affect rather than the falling snow effect. How can we replicate it in code? Kirupa’s tutorial doesn’t work at all for me in terms of affect in Mosaic 3.


Hello !

This is an amazing piece of code and an equally amazingly clear presentation!

I am not conversant with Javascript. I would like to modify the call of script “fallingsnow_v6.js” to pass numberOfSnowflakes as an argument (or global variable?)… How can I do it?

The aim of this will be to program more or less snow falls at different times of the day and the year, including no snow whenever numberOfSnowflakes = 0.


@Bernard_Bel you can set numberOfSnowflakes to whatever you want in your own copy of fallingsnow_v6.js. This can be a different number, or something you calculate from the time of day or year. This, for example, uses a sine wave to make it more snowy in the middle of January and less snowy in at the start or end of the month - assuming January is the only month it snows :wink:

var numberOfSnowflakes = getNumberOfFlakes(); // function defined below:

function getNumberOfFlakes() {

  var now = new Date(); // today's date
  var month = now.getMonth(); // months are 0-11 where 0 is January

  if (month === 0) {
    var day = now.getDate(); // day in the month
    var percentInMonth = day/31; // based on 31 days in January
    var curve = Math.sin(percentInMonth * Math.PI);
    var maxFlakes = 50;
    return Math.round(maxFlakes * curve); // 0-50 flakes

  // it is not january, so no snowflakes
  return 0;


This is fine. However I was hoping to compute numberOfSnowflakes in the PHP code and pass on its value to “fallingsnow_v6.js”.


In that case, remove the variable from the js file and echo a computed php value in an in-line script tag before it. Something like

<script>var numberOfSnowflakes = <?= $myFlakeCount ?>;</script>
<script script="fallingsnow_v6.js"></script>


It works perfectly. Thank you!


Isn’t that is for a single value . But I wish to use multiple unique values in one go . How can I do that ?


You would do something similar for each variable. If you’re dealing with many variables, a loop to generate the JavaScript declarations can be used.