MediaWiki:Snieg.js

// KOD NA ŚNIEG – autor: Szewek
(function() {
	'use strict';
	var NUM_FLAKES = 40;
	var status = true, handle, SBTN, flakes, Flake, PI_2, canvas, context, drawCircle, i, range, resizeWindow, xpos;
	SBTN = $('<button id="snieg-switch">Przełącz śnieg</button>').appendTo("div#content");
	SBTN.click(function(){
		status = !status;
		if (status) 
			handle = requestAnimationFrame(step);
		else {
			cancelAnimationFrame(handle);
			context.clearRect(0, 0, w, h);
		}
	});	
	PI_2 = 2 * Math.PI;
	canvas = $('<canvas style="z-index: 500; pointer-events: none; position: fixed; top: 0; left: 0;" id="snieg"></canvas>').appendTo("body")[0];
	context = canvas.getContext("2d");
	window.w = 0;
	window.h = 0;
	resizeWindow = function() {
		window.w = canvas.width = window.innerWidth;
		return (window.h = canvas.height = window.innerHeight);
	};
	window.addEventListener('resize', resizeWindow, false);
	$(function() {return setTimeout(resizeWindow, 0);});
	range = function(a, b) {return (b - a) * Math.random() + a;};
	drawCircle = function(x, y, r) {
		context.beginPath();
		context.arc(x, y, r, 0, PI_2, false);
		context.fill();
		context.stroke();
	};
	xpos = 0.5;
	document.onmousemove = function(e) {return (xpos = e.pageX / w);};
	window.requestAnimationFrame = (function() {
		return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
			return window.setTimeout(callback, 1000 / 60);
		};
	})();
	Flake = (function() {
		function Flake() {
			this.r = ~~range(4, 8);
			this.r2 = 2 * this.r;
			this.replace();
		}
		Flake.prototype.replace = function() {
			this.x = range(-this.r2, w - this.r2);
			this.y = range(-20, h - this.r2);
			this.xmax = w - this.r;
			this.ymax = h - this.r;
			this.vx = range(0, 2) + 8 * xpos - 5;
			this.vy = 0.5 * this.r + range(-0.5, 0.5);
		};
		Flake.prototype.draw = function() {
			var f;
			this.x += this.vx;
			this.y += this.vy;
			if (this.y > this.ymax) {
				this.replace();
			}
			if (!((0 < (f = this.x) && f < this.xmax))) {
				this.x = (this.x + this.xmax) % this.xmax;
			}
			drawCircle(~~this.x, ~~this.y, this.r);
		};
		return Flake;
	})();
	flakes = (function() {
		var i, a = [];
		for (i = 0; i < NUM_FLAKES; i++)
			a.push(new Flake());
		return a;
	})();
	window.step = function() {
		var i, len;
		context.clearRect(0, 0, w, h);
		context.fillStyle = "rgba(255,255,255,1)";
		context.lineWidth = 2;
		context.strokeStyle = "rgba(0,0,0,0.25)";
		for (i = 0, len = flakes.length; i < len; i++)
			flakes[i].draw();
		handle = requestAnimationFrame(step);
	};
	handle = requestAnimationFrame(step);
	console.log("Załadowano śnieg");
})();