particles.js

/*
 * particle.js
 * 
 * Originally taken from http://alexanderjam.es/
 * 
 * Menu:
 *  globals
 *  class
 *  class functions
 *  utils
 *  init
 */
;(function(window, document, undefined) {
	
	'use strict';
	
	var canvas;
	var context;
	
	// Globals
	var Dots = [];
	var colors = ['#1ABC9C','#2ECC71', '#3498DB','#E74C3C', '#E67E22', '#F1C40F'];
	var maximum = 256;
	var maxDiameter = 1.1;
	var minDiameter = 0.7;

	// Init
	function Initialize() {
		var mycanvas = document.createElement('canvas');
		mycanvas.id = 'dots';
		document.body.appendChild(mycanvas);
		
		canvas = document.getElementById('dots');
		context = canvas.getContext('2d');

		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		
		GenerateDots();

		Update();
	}

	// Class
	function Dot() {
		this.active = true;

		this.diameter = (Math.random() * maxDiameter) + minDiameter;

		this.x = generateRandomPosition('x');
		this.y = generateRandomPosition('y');

		this.velocity = {
			x: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.06,
			y: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.06
		};

		this.alpha = Math.random()*0.8;
		if(this.alpha > 0.4) {
			this.alphaDown = true;
		} else {
			this.alphaUp = true;
		}

		this.hex = colors[Math.floor(Math.random() * colors.length)];
		this.color = HexToRGBA(this.hex, this.alpha);
	}

	// Class functions
	Dot.prototype = {
		Update: function() {

			if(this.alpha > 0.98) {
				this.alphaUp = false;
				this.alphaDown = true;
			}
			if(this.alpha < 0) {
				// The vanishing act
				this.x = generateRandomPosition('x');
				this.y = generateRandomPosition('y');
				this.alphaUp = true;
				this.alphaDown = false;
			}

			if(this.alphaUp) {
				this.alpha += 0.0015;
				this.color = HexToRGBA(this.hex, this.alpha);
			}
			if(this.alphaDown) {
				this.alpha -= 0.02;
				this.color = HexToRGBA(this.hex, this.alpha);
			}

			this.x += this.velocity.x;
			this.y += this.velocity.y;

			if(this.x > canvas.width + 5 || this.x < 0 - 5 || this.y > canvas.height + 5 || this.y < 0 - 5) {
				this.active = false;
			}

			if(Math.floor(Math.random() * 5) === 1) {
				var modifier = Math.random() < 0.5 ? -1 : 1;
				this.velocity.x = this.velocity.x + (Math.random() * (0.015 * modifier));
				this.velocity.y = this.velocity.y + (Math.random() * (0.015 * modifier));
			}
		},

		Draw: function() {
			context.fillStyle = this.color;
			context.beginPath();
			context.arc(this.x, this.y, this.diameter, 0, Math.PI * 2, false);
			context.fill();
		}
	}

	function Update() {
		GenerateDots();

		Dots.forEach(function(Dot) {
			Dot.Update();
		});

		Dots = Dots.filter(function(Dot) {
			return Dot.active;
		});

		Render();
		requestAnimationFrame(Update);
	}

	function Render() {
		context.clearRect(0, 0, canvas.width, canvas.height);
		
		Dots.forEach(function(Dot) {
			Dot.Draw();
		});
	}

	function GenerateDots() {
		if(Dots.length < maximum) {
			for(var i = Dots.length; i < maximum; i++) {
				Dots.push(new Dot());
			}
		}

		return false;
	}
	
	// Utils
	function HexToRGBA(hex, alpha) {
		var red = parseInt((TrimHex(hex)).substring(0, 2), 16);
		var green = parseInt((TrimHex(hex)).substring(2, 4), 16);
		var blue = parseInt((TrimHex(hex)).substring(4, 6), 16);

		return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';
	}

	function TrimHex(hex) {
		return (hex.charAt(0) == "#") ? hex.substring(1, 7) : h;
	}
	
	function generateRandomPosition(axis) {
		if(axis === 'x') {
			return Math.round(Math.random() * canvas.width);
		} else {
			return Math.round(Math.random() * canvas.height);
		}
			
	}

	window.onresize = function() {
		Dots = [];
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	}
	
	// init
	function init() {
		Initialize();
	}
	
	init(); // Remove this and uncomment the line below to call it from your script
	//window.init = init;
	//document.addEventListener("DOMContentLoaded", init);
})(window, document);