Wycombe Applets - Snow Day

Snow Day Applet

Step one: Copy and paste this JavaScript code into the <BODY> of your Web page (a good place is right before the closing </BODY> tag).

Snow day script

<SCRIPT language="JavaScript1.2">
<!--
//Original script by Altan (Snow@altan.hr), copyright 1999 Altan d.o.o.
// http://www.altan.hr/snow/index.html
// Modified by Paul Anderson, copyright 2001 CNET Builder.com

var snowflake = "snow.gif";
var no = 9; // number of snowflakes on the screen
var speed = 12; // smaller numbers make the snow fall faster
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var obj, i, doc_width = 800, doc_height = 600;

function winSize() {
doc_width = window.innerWidth?window.innerWidth:document.body.clientWidth;
doc_height = window.innerHeight?window.innerHeight:document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
winSize();
document.write("<STYLE type=\"text/css\">.flake {position:absolute;top:-200;}</STYLE>");
for (i = 0; i < no; i++) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-30) +10; // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
document.write("<div id=\"dot"+ i +"\" class=\"flake\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}

function snowMove(id,left,top) {
obj = document.getElementById?document.getElementById(id).style:
document.all?document.all[id].style:
document.layers?document.layers[id]:null;
if (obj) {
obj.left=left;
obj.top=top;
}
}

window.onload=snow;
// -->
</script>

Step two: Decide what kind of snowflake lover you are. Plates? Dendrites? Plate-dendrites? Find or create a snowflake image and save it as snow.gif in the same directory as your page. Or maybe you're yearning for something more than snow? You can always go a little seasonally crazy and substitute in an image of anything that you'd like to see falling from the sky: flowers, leaves, benjamins, or heads of election officials dropping gently towards bamboo spikes.
Step three: Fine-tune the snowfall by modifying the first three lines of the script:

var snowflake = "snow.gif";
var no = 9; // number of snowflakes on the screen
var speed = 12; // smaller numbers make the snow fall faster

Change snowflake to use an image name other than snow.gif, or substitute a complete URL if the image must sit in a separate directory. Adjust no to change the number of snowflakes; large menacing ones are more effective in smaller numbers. Finally, speed is the delay between snow movements, so increase or decrease this number to slow down or speed up the snowfall.
Diversify: If you're into high stimulation, you can have a flurry of images instead of identical snowflakes. Replace the first two lines above with:

var snowflake = new Array();
snowflake[0]="snow.gif";
snowflake[1]="snow1.gif";
snowflake[2]="snow2.gif";
var no = snowflake.length;

containing as many snowflake[ ] iterations as you want. Now go to the line:

document.write(snowflake + "\" border=\"0\"></div>");

and change snowflake to snowflake[i]. If all of your images are in place as indicated, you should get heterogeneous snow.
Reverse gravity: To appropriately reward those optimists who have read this far, you can make your snowflakes float upward like champagne bubbles by implementing yet another script tweak.

In the function snow(), replace the lines:

yp[i] += sty[i];
if (yp[i] > doc_height+doc_scroll-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_scroll;
with:
yp[i] -= sty[i];
if (yp[i] < doc_scroll-40) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height+doc_scroll;

and you will exalt your page with a gravity-defying technique seldom seen outside of the better plastic surgeons' offices on Rodeo Drive. Your longer attention span has paid off again.