DevJMD/index.html

## index.html
<!doctype html>
<html>
    <head>
        <title>SnowJS</title>
        <script src="snow.js"></script>
    </head>
    <body>
        <canvas id="snow"></canvas>
    </body>
</html>

## snow.js
window.onload = function() {

	window.requestAnimFrame = (function() {

		return  window.requestAnimationFrame    ||
		window.webkitRequestAnimationFrame 		||
		window.mozRequestAnimationFrame    		||

		function(callback) {
			window.setTimeout(callback, 1000 / 60);
		};
	})();

		function createSnow() {

			var particles = [];

			var settings = {
				particleSize: 3,
				maxParticles: 2000,
				particleOpacity: 1,
				particleVelocity: 1
			}

		    // Initialize canvas
		    var canvas  = document.getElementById('snow');
		    var ctx     = canvas.getContext('2d');

		    // Get window width & height
		    var windowWidth = window.outerWidth;
		    var windowHeight = window.outerHeight;

		    console.log(windowWidth, windowHeight);

		    canvas.style.width = windowWidth;
		    canvas.style.height = windowHeight

		    // Apply canvas size based on window width & height.
		    // This can be changed to bound within an element instead.
		    canvas.width = windowWidth;
		    canvas.height = windowHeight;

		    // Push particle iteration
		    for (var i = 0; i < settings.maxParticles; i++) {

		    	particles.push({
			        // Particle x position
			        x: Math.random() * windowWidth,

			        // Particle y position
			        y: Math.random() * windowHeight,

			        // Particle radius
			        r: Math.random(Math.min(settings.particleSize)) * settings.particleSize,

			        // Particle density
			        d: Math.random() * settings.maxParticles,
		    	});
		    }

		    // Render particles
		    function render() {

		    	ctx.clearRect(0, 0, windowWidth, windowHeight);
		    	ctx.fillStyle = 'rgba(255, 255, 255, ' + settings.particleOpacity + ')';
		    	ctx.beginPath();

		    	for(var i = 0; i < settings.maxParticles; i++) {

			        // Iterate the particles.
			        var p = particles[i];

			        // Move particles along x, y.
			        ctx.moveTo(p.y, p.y);

			        // Draw particle.
			        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
			    }
			    ctx.fill();
				update();
			}

		    // To create a more dynamic and organic flow, we need to apply an
		    // incremental 'angle' that will iterate through each particle flow.
		    var angle = settings.particleVelocity;

		    // Update particles
		    function update() {

		    	for (var i = 0; i < settings.maxParticles; i++) {

		    		var p = particles[i];

		        // Offset the particles flow based on the angle.
		        p.y += Math.cos(angle + p.d) + p.r;
		        p.x += Math.sin(angle) / 10;

		        //Sending flakes back from the top when it exits
				//Lets make it a bit more organic and let flakes enter from the left and right also.
				if(p.x > windowWidth + 2.5 || p.x < - 2.5 || p.y > windowHeight) {

					if(i % 3 > 0) {

						particles[i] = {
							x: Math.random() * windowWidth,
							y: -5,
							r: p.r,
							d: p.d
						};

					} else {

						if(Math.sin(angle) > 0) {

							particles[i] = {
								x: -5,
								y: Math.random() * windowHeight,
								r: p.r,
								d: p.d
							};

						} else {

							particles[i] = {
								x: windowWidth + 5,
								y: Math.random() * windowHeight,
								r: p.r,
								d: p.d
							};
						}
					}
				}
			}
		}
		// Call function.
		(function runtime() {
			requestAnimFrame(runtime);
			render();
		})();
	} createSnow();
}
	<!doctype html>
	<html>
	<head>
	<title>SnowJS</title>
	<script src="snow.js"></script>
	</head>
	<body>
	<canvas id="snow"></canvas>
	</body>
	</html>
	window.onload = function() {

	window.requestAnimFrame = (function() {

	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|

	function(callback) {
	window.setTimeout(callback, 1000 / 60);
	};
	})();

	function createSnow() {

	var particles = [];

	var settings = {
	particleSize: 3,
	maxParticles: 2000,
	particleOpacity: 1,
	particleVelocity: 1
	}

	// Initialize canvas
	var canvas = document.getElementById('snow');
	var ctx = canvas.getContext('2d');

	// Get window width & height
	var windowWidth = window.outerWidth;
	var windowHeight = window.outerHeight;

	console.log(windowWidth, windowHeight);

	canvas.style.width = windowWidth;
	canvas.style.height = windowHeight

	// Apply canvas size based on window width & height.
	// This can be changed to bound within an element instead.
	canvas.width = windowWidth;
	canvas.height = windowHeight;

	// Push particle iteration
	for (var i = 0; i < settings.maxParticles; i++) {

	particles.push({
	// Particle x position
	x: Math.random() * windowWidth,

	// Particle y position
	y: Math.random() * windowHeight,

	// Particle radius
	r: Math.random(Math.min(settings.particleSize)) * settings.particleSize,

	// Particle density
	d: Math.random() * settings.maxParticles,
	});
	}

	// Render particles
	function render() {

	ctx.clearRect(0, 0, windowWidth, windowHeight);
	ctx.fillStyle = 'rgba(255, 255, 255, ' + settings.particleOpacity + ')';
	ctx.beginPath();

	for(var i = 0; i < settings.maxParticles; i++) {

	// Iterate the particles.
	var p = particles[i];

	// Move particles along x, y.
	ctx.moveTo(p.y, p.y);

	// Draw particle.
	ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
	}
	ctx.fill();
	update();
	}

	// To create a more dynamic and organic flow, we need to apply an
	// incremental 'angle' that will iterate through each particle flow.
	var angle = settings.particleVelocity;

	// Update particles
	function update() {

	for (var i = 0; i < settings.maxParticles; i++) {

	var p = particles[i];

	// Offset the particles flow based on the angle.
	p.y += Math.cos(angle + p.d) + p.r;
	p.x += Math.sin(angle) / 10;

	//Sending flakes back from the top when it exits
	//Lets make it a bit more organic and let flakes enter from the left and right also.
	if(p.x > windowWidth + 2.5 \|\| p.x < - 2.5 \|\| p.y > windowHeight) {

	if(i % 3 > 0) {

	particles[i] = {
	x: Math.random() * windowWidth,
	y: -5,
	r: p.r,
	d: p.d
	};

	} else {

	if(Math.sin(angle) > 0) {

	particles[i] = {
	x: -5,
	y: Math.random() * windowHeight,
	r: p.r,
	d: p.d
	};

	} else {

	particles[i] = {
	x: windowWidth + 5,
	y: Math.random() * windowHeight,
	r: p.r,
	d: p.d
	};
	}
	}
	}
	}
	}
	// Call function.
	(function runtime() {
	requestAnimFrame(runtime);
	render();
	})();
	} createSnow();
	}