How to Make it Snow (in your web browser)

(This is just for some holiday fun: not a serious technical post. I wrote about this on my blog and the folks at O'Reilly asked me to share it here, too.)

The easy way: First, bookmark this link Let it Snow! Don't click on it: O'Reilly's site will force it to open in a new tab and it won't work. Just bookmark it by dragging it to your bookmarks toolbar. Or right-click on it and select "bookmark this link" or something similar.

Now, click on the bookmark and watch the pretty snowflakes. (This demo uses the HTML5 canvas tag and does not work in IE8 or before. It works on many sites in IE9 beta, but not on sites that put IE into an older compatibility mode.) Its not just this site with snowy weather: wherever you go, you can click on your bookmark and watch the snow fall.

The harder way: take a look at the attached file of Javascript code (I had to rename it as a text file so that this site would allow me to upload it) and play with it to your heart's content. The snowflake() function is the one that draws the snowflakes: they are a kind of fractal known as a Koch snowflake. snowflake() is a recursive function that makes heavy use of the rotate(), scale() and translate() transformation methods of the canvas. snowflake() appears as an example in my new book Canvas Pocket Reference. The rest of the Javascript makes the snowflakes drift randomly down the screen. You can learn how that part of the code works with a book like Javascript: The Definitive Guide.

Learn more about this topic from Canvas Pocket Reference. 

The Canvas element is a revolutionary feature of HTML5 that enables powerful graphics for rich Internet applications, and this pocket reference provides the essentials you need to put this element to work. If you have a working knowledge of Javascript, this book will help you create detailed, interactive, and animated graphics from charts to animations to video games, whether you're a web designer or a programmer interested in graphics.