pelf/snow.html

## snow.html
<!DOCTYPE html>
<head>
	<title>Snow</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<script src="snow.js" type="text/javascript"/></script>
</head>
<body onload="init();">
	<canvas id="bgcanvas" width="410" height="316"  style="position:absolute;z-index:2"></canvas>
	<img src="globe_layers_2.png" style="position:absolute;z-index:3">
	<canvas id="fgcanvas" width="410" height="316"  style="position:absolute;z-index:4"></canvas>
	<img src="globe_layers_3.png" style="position:absolute;left:100;top:100;z-index:5">
	<script type="text/javascript">
		var mouseX, mouseY, orientation, orientX;

		jQuery(document).ready(function(){
			// mouse
			$(document).mousemove(function(e){
				mouseX = e.pageX;
				mouseY = e.pageY;
			});

			// orientation on firefox
			function handleOrientation(orientData) {
				orientation = true;
				orientX = orientData.x;
			}
			window.addEventListener("MozOrientation", handleOrientation, true);

			// orientation on mobile safari
			if (window.DeviceMotionEvent!=undefined) {
				orientation = true;
				window.ondevicemotion = function(event) {
					orientX = event.accelerationIncludingGravity.x;
				};
			}
		});
	</script>
</body>

## snow.js
var bgflakes = new Array();
var fgflakes = new Array();
var bgFlakeCount = 200;
var fgFlakeCount = 50;
var frameCount = 0;
var wind = 0;
var dwidth;

function init() {
	dwidth = $(document).width();
	bgcanvas = document.getElementById("bgcanvas");
	fgcanvas = document.getElementById("fgcanvas");
	if (!bgcanvas.getContext) return; // bye IE!
	for (i=0;i<bgFlakeCount;i++) {
		bgflakes.push(new Flake(bgcanvas.width, bgcanvas.height,0,3));
	}
	for (i=0;i<fgFlakeCount;i++) {
		fgflakes.push(new Flake(fgcanvas.width, fgcanvas.height,0.2,4));
	}
	setInterval(draw,50);
}

function setWind() {
	if (!orientation) {
		var mx = mouseX - dwidth/2;
		wind = (mx/dwidth)*3;
	} else {
		wind = parseFloat(orientX)*3;
	}
	if (isNaN(wind)) {
		wind = 0;
	}
}

function draw() {
	frameCount += 1;
	g = bgcanvas.getContext("2d");
	h = fgcanvas.getContext("2d");
	g.fillStyle = "black";
	g.fillRect(0,0,bgcanvas.width,bgcanvas.height);
	h.clearRect(0,0,fgcanvas.width,fgcanvas.height);
	setWind();
	for (i=0;i<bgFlakeCount;i++) {
		bgflakes[i].move(frameCount, wind);
		bgflakes[i].draw(g);
	}
	for (i=0;i<fgFlakeCount;i++) {
		fgflakes[i].move(frameCount, wind);
		fgflakes[i].draw(h);
	}
}

function Flake(w,h,a,s) {
	this.canvasWidth = w;
	this.canvasHeight = h;
	this.x = 200;
	this.y = Math.random()*-1*h;
	this.alfa = Math.random()*0.5 + a;
	this.color = "rgba(255,255,255,"+this.alfa+")";
	this.speed = Math.random();
	this.size = s - this.speed - this.alfa;
	this.amp = Math.random() * 2;
	this.shift = Math.random() * 25 + 25;
	if (Math.random()>0.5) this.shift*=-1;
	this.drift = Math.random() - 0.5;

	this.draw = function(g){
		g.fillStyle = this.color;
		g.beginPath();
		g.arc(this.x, this.y, this.size, 0, Math.PI*2, true);
		g.closePath();
		g.fill();
	};

	this.move = function(f, wind) {
		this.y += this.speed;
		this.x += Math.cos((f)/this.shift) * this.amp + this.drift + wind;
		if (this.y>this.canvasHeight) {
			this.restart();
		}
	};

	this.restart = function(){
		this.y = -20;
		this.shift = Math.random() * 25 + 25;
		this.x = 200;
	};
}
	<!DOCTYPE html>
	<head>
	<title>Snow</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<script src="snow.js" type="text/javascript"/></script>
	</head>
	<body onload="init();">
	<canvas id="bgcanvas" width="410" height="316" style="position:absolute;z-index:2"></canvas>
	<img src="globe_layers_2.png" style="position:absolute;z-index:3">
	<canvas id="fgcanvas" width="410" height="316" style="position:absolute;z-index:4"></canvas>
	<img src="globe_layers_3.png" style="position:absolute;left:100;top:100;z-index:5">
	<script type="text/javascript">
	var mouseX, mouseY, orientation, orientX;

	jQuery(document).ready(function(){
	// mouse
	$(document).mousemove(function(e){
	mouseX = e.pageX;
	mouseY = e.pageY;
	});

	// orientation on firefox
	function handleOrientation(orientData) {
	orientation = true;
	orientX = orientData.x;
	}
	window.addEventListener("MozOrientation", handleOrientation, true);

	// orientation on mobile safari
	if (window.DeviceMotionEvent!=undefined) {
	orientation = true;
	window.ondevicemotion = function(event) {
	orientX = event.accelerationIncludingGravity.x;
	};
	}
	});
	</script>
	</body>
	var bgflakes = new Array();
	var fgflakes = new Array();
	var bgFlakeCount = 200;
	var fgFlakeCount = 50;
	var frameCount = 0;
	var wind = 0;
	var dwidth;

	function init() {
	dwidth = $(document).width();
	bgcanvas = document.getElementById("bgcanvas");
	fgcanvas = document.getElementById("fgcanvas");
	if (!bgcanvas.getContext) return; // bye IE!
	for (i=0;i<bgFlakeCount;i++) {
	bgflakes.push(new Flake(bgcanvas.width, bgcanvas.height,0,3));
	}
	for (i=0;i<fgFlakeCount;i++) {
	fgflakes.push(new Flake(fgcanvas.width, fgcanvas.height,0.2,4));
	}
	setInterval(draw,50);
	}

	function setWind() {
	if (!orientation) {
	var mx = mouseX - dwidth/2;
	wind = (mx/dwidth)*3;
	} else {
	wind = parseFloat(orientX)*3;
	}
	if (isNaN(wind)) {
	wind = 0;
	}
	}

	function draw() {
	frameCount += 1;
	g = bgcanvas.getContext("2d");
	h = fgcanvas.getContext("2d");
	g.fillStyle = "black";
	g.fillRect(0,0,bgcanvas.width,bgcanvas.height);
	h.clearRect(0,0,fgcanvas.width,fgcanvas.height);
	setWind();
	for (i=0;i<bgFlakeCount;i++) {
	bgflakes[i].move(frameCount, wind);
	bgflakes[i].draw(g);
	}
	for (i=0;i<fgFlakeCount;i++) {
	fgflakes[i].move(frameCount, wind);
	fgflakes[i].draw(h);
	}
	}

	function Flake(w,h,a,s) {
	this.canvasWidth = w;
	this.canvasHeight = h;
	this.x = 200;
	this.y = Math.random()-1h;
	this.alfa = Math.random()*0.5 + a;
	this.color = "rgba(255,255,255,"+this.alfa+")";
	this.speed = Math.random();
	this.size = s - this.speed - this.alfa;
	this.amp = Math.random() * 2;
	this.shift = Math.random() * 25 + 25;
	if (Math.random()>0.5) this.shift*=-1;
	this.drift = Math.random() - 0.5;

	this.draw = function(g){
	g.fillStyle = this.color;
	g.beginPath();
	g.arc(this.x, this.y, this.size, 0, Math.PI*2, true);
	g.closePath();
	g.fill();
	};

	this.move = function(f, wind) {
	this.y += this.speed;
	this.x += Math.cos((f)/this.shift) * this.amp + this.drift + wind;
	if (this.y>this.canvasHeight) {
	this.restart();
	}
	};

	this.restart = function(){
	this.y = -20;
	this.shift = Math.random() * 25 + 25;
	this.x = 200;
	};
	}