bzdgn · December 31, 2016 22:51 · bzdgn · Dec 31, 2016
diff --git a/snowFlakesEnhanced.html b/snowFlakesEnhanced.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 	<title>HTML5 Canvas Snowflakes Enhanced Demo</title>
 	<style>
 		html, body {
 			overflow: hidden;
 		}
 	</style>
 </head>
 <body onload="doTimer()" onresize="resizeCanvas()">
 	<canvas id="mainCanvas">
 	</canvas>
 		<script>
 		<!-- Written by Levent Divilioglu -->
 		<!-- 1.1.2017 -->
 			(function () {
 				canvas = document.getElementById('mainCanvas');
 				ctx = canvas.getContext("2d");
 				
 				canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 				canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
 				WIDTH	= canvas.width;
 				HEIGHT	= canvas.height;
 				
 				BLACK = "black";
 				WHITE = "white";
 				BLUE  = "blue";
 				
 				clearScreen();
 				
 				VELOCITY_MIN = 4;
 				VELOCITY_MAX = 10;
 				
 				WIND_MIN = 1;
 				WIND_MAX = 5;
 				X_PHASE = WIDTH/8;
 				GENERATION_Y = HEIGHT/10;
 				
 				previousTimestamp = 0;
 				
 				MAX_R = 4;
 				NUMBER_OF_SNOW_FLAKES = 500;
 				snowFlakes = generateSnowFlakes(NUMBER_OF_SNOW_FLAKES);
 				
 			})();
 			
 			function resizeCanvas() {
 				canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 				canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
 				
 				WIDTH = canvas.width;
 				HEIGHT = canvas.height;
 			}
 			
 			function generateSnowFlakes(num) {
 				var snowFlakes = [];
 				
 				for(var i = 0; i < num; i++) {
 					snowFlakes.push( { "index": i, "r": Math.random()*MAX_R, "x": getRandom(-X_PHASE, WIDTH-X_PHASE), "y": getRandom(0, GENERATION_Y), "v_x": getRandom(WIND_MIN, WIND_MAX), "v_y": getRandom(VELOCITY_MIN,VELOCITY_MAX)} );
 				}
 				
 				return snowFlakes;
 			}
 			
 			function handleSnowFlakes(timestamp) {
 				for(var i = 0; i < snowFlakes.length; i++) {
 					if( 
 						( (snowFlakes[i].y + snowFlakes[i].r) >= HEIGHT ) 
 						||
 						( (snowFlakes[i].x + snowFlakes[i].r) >= WIDTH )
 					){
 						snowFlakes[i].y = getRandom(0, GENERATION_Y);
 						snowFlakes[i].r = Math.random()*MAX_R;
 						snowFlakes[i].x = getRandom(-X_PHASE, WIDTH-X_PHASE);
 						snowFlakes[i].v_x = getRandom(WIND_MIN, WIND_MAX);
 						snowFlakes[i].v_y = getRandom(VELOCITY_MIN,VELOCITY_MAX);
 					} else {
 						snowFlakes[i].y += snowFlakes[i].v_y;
 						snowFlakes[i].x += snowFlakes[i].v_x;
 					}
 				}
 			}
 			
 			function drawSnowFlakes() {
 				for(var i = 0; i < snowFlakes.length; i++) {
 					ctx.beginPath();
 					ctx.fillStyle = "rgba(255, 255, 255, " + (1.0 - (snowFlakes[i].y / 600.0)) + ")";
 					ctx.arc(snowFlakes[i].x + snowFlakes[i].r, snowFlakes[i].y + snowFlakes[i].r, snowFlakes[i].r, 0, 2 * Math.PI, false);
 					ctx.fill();
 				}
 			}
 			
 			function animate(timestamp) {
 				timedelta = timestamp - previousTimestamp;
 				previousTimestamp = timestamp;

 				clearScreen();
 				
 				handleSnowFlakes(timedelta);
 				drawSnowFlakes();
 				
 				requestAnimationFrame(animate);
 			}
 			
 			function clearScreen() {
 				var grd = ctx.createLinearGradient(0,0,0,HEIGHT);
 				grd.addColorStop(0,"#000000");
 				grd.addColorStop(1,"#0000A0");
 				
 				
 				ctx.fillStyle = grd;
 				ctx.fillRect(  0, 0, WIDTH, HEIGHT );
 				
 				ctx.fillStyle = "#FFFFFF";
 				ctx.font = "180px Verdana";
 				var text = "2017";
 				var len = ctx.measureText(text).width;
 				ctx.fillText(text, WIDTH/2-len/2, HEIGHT/2 + 240/3);
 			}
 			
 			function doTimer() {
 				window.requestAnimationFrame(animate);
 			}
 			
 			function getRandom(a,b) {
 				return a + Math.random()*(b-a);
 			}
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title>HTML5 Canvas Snowflakes Enhanced Demo</title>
	<style>
	html, body {
	overflow: hidden;
	}
	</style>
	</head>
	<body onload="doTimer()" onresize="resizeCanvas()">
	<canvas id="mainCanvas">
	</canvas>
	<script>
	<!-- Written by Levent Divilioglu -->
	<!-- 1.1.2017 -->
	(function () {
	canvas = document.getElementById('mainCanvas');
	ctx = canvas.getContext("2d");

	canvas.width = window.innerWidth \|\| document.documentElement.clientWidth \|\| document.body.clientWidth;
	canvas.height = window.innerHeight \|\| document.documentElement.clientHeight \|\| document.body.clientHeight;
	WIDTH = canvas.width;
	HEIGHT = canvas.height;

	BLACK = "black";
	WHITE = "white";
	BLUE = "blue";

	clearScreen();

	VELOCITY_MIN = 4;
	VELOCITY_MAX = 10;

	WIND_MIN = 1;
	WIND_MAX = 5;
	X_PHASE = WIDTH/8;
	GENERATION_Y = HEIGHT/10;

	previousTimestamp = 0;

	MAX_R = 4;
	NUMBER_OF_SNOW_FLAKES = 500;
	snowFlakes = generateSnowFlakes(NUMBER_OF_SNOW_FLAKES);

	})();

	function resizeCanvas() {
	canvas.width = window.innerWidth \|\| document.documentElement.clientWidth \|\| document.body.clientWidth;
	canvas.height = window.innerHeight \|\| document.documentElement.clientHeight \|\| document.body.clientHeight;

	WIDTH = canvas.width;
	HEIGHT = canvas.height;
	}

	function generateSnowFlakes(num) {
	var snowFlakes = [];

	for(var i = 0; i < num; i++) {
	snowFlakes.push( { "index": i, "r": Math.random()*MAX_R, "x": getRandom(-X_PHASE, WIDTH-X_PHASE), "y": getRandom(0, GENERATION_Y), "v_x": getRandom(WIND_MIN, WIND_MAX), "v_y": getRandom(VELOCITY_MIN,VELOCITY_MAX)} );
	}

	return snowFlakes;
	}

	function handleSnowFlakes(timestamp) {
	for(var i = 0; i < snowFlakes.length; i++) {
	if(
	( (snowFlakes[i].y + snowFlakes[i].r) >= HEIGHT )
	\|\|
	( (snowFlakes[i].x + snowFlakes[i].r) >= WIDTH )
	){
	snowFlakes[i].y = getRandom(0, GENERATION_Y);
	snowFlakes[i].r = Math.random()*MAX_R;
	snowFlakes[i].x = getRandom(-X_PHASE, WIDTH-X_PHASE);
	snowFlakes[i].v_x = getRandom(WIND_MIN, WIND_MAX);
	snowFlakes[i].v_y = getRandom(VELOCITY_MIN,VELOCITY_MAX);
	} else {
	snowFlakes[i].y += snowFlakes[i].v_y;
	snowFlakes[i].x += snowFlakes[i].v_x;
	}
	}
	}

	function drawSnowFlakes() {
	for(var i = 0; i < snowFlakes.length; i++) {
	ctx.beginPath();
	ctx.fillStyle = "rgba(255, 255, 255, " + (1.0 - (snowFlakes[i].y / 600.0)) + ")";
	ctx.arc(snowFlakes[i].x + snowFlakes[i].r, snowFlakes[i].y + snowFlakes[i].r, snowFlakes[i].r, 0, 2 * Math.PI, false);
	ctx.fill();
	}
	}

	function animate(timestamp) {
	timedelta = timestamp - previousTimestamp;
	previousTimestamp = timestamp;

	clearScreen();

	handleSnowFlakes(timedelta);
	drawSnowFlakes();

	requestAnimationFrame(animate);
	}

	function clearScreen() {
	var grd = ctx.createLinearGradient(0,0,0,HEIGHT);
	grd.addColorStop(0,"#000000");
	grd.addColorStop(1,"#0000A0");


	ctx.fillStyle = grd;
	ctx.fillRect( 0, 0, WIDTH, HEIGHT );

	ctx.fillStyle = "#FFFFFF";
	ctx.font = "180px Verdana";
	var text = "2017";
	var len = ctx.measureText(text).width;
	ctx.fillText(text, WIDTH/2-len/2, HEIGHT/2 + 240/3);
	}

	function doTimer() {
	window.requestAnimationFrame(animate);
	}

	function getRandom(a,b) {
	return a + Math.random()*(b-a);
	}
	</script>
	</body>
	</html>