pelf · November 26, 2010 02:51 · buothz · Jul 31, 2011 · sidonaldson · Sep 19, 2012
diff --git a/snow.html b/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>
diff --git a/snow.js b/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;
	};
	}