shards.js

/**
* Shards jQuery plug-in
* Multilayered gradient background effect
*
* @author Jean-Christophe Nicolas <mrjcnicolas@gmail.com>
* @homepage http://bite-software.co.uk/shards/
* @version 1.1
* @license MIT http://opensource.org/licenses/MIT
* @date 03-06-2013
*/
(function($) {

var Plugin = function(me,c1,c2,sh,steps,wheel,light,alf,fs){

	this.el = me;
	this.sharp = true;
	this.fs = fs;
	this.filter = '';
	this.colours = {
		c1 		: c1,
		c2 		: c2,
		c3		: c2,
		shade 	: sh,
		alpha 	: alf,
		steps 	: steps,
		wheel	: wheel,
		light 	: ~~(light)
	}	
	this.init();
}
Plugin.prototype.init = function(){

	this.cssPrefix = false;

	var ua = navigator.userAgent;
	if(/Chrome\/(\S+)/.test(ua)|| /AppleWebKit\/(\S+)/.test(ua)) {
		this.cssPrefix = '-webkit';
	}
	else if(/Firefox\/(\S+)/.test(ua)) {
		this.cssPrefix = '-moz';
	}else if(window.opera) {
		this.cssPrefix = '-o';
	}else if(/MSIE ([^;]+)/.test(ua)) {
		this.cssPrefix = '-ms';
	};

	if(this.cssPrefix){
		var steps = this.colours.steps;
		
		while( steps > 0){
			this.percents = this.percentage();
			this.stringBuilder();
			this.colourFilter();
			steps -= 1;
			if(steps > 0) this.filter += ', ';
		}
		this.el.css('background-image',this.filter);
		
		if(this.fs) this.fit();
	}else{
		console.log('sorry bro, your browser isnt supported.');
	}

}
Plugin.prototype.stringBuilder = function(){

	var col = this.colours,
		c1 = this.catcol(col.c1),
		c2 = this.catcol(col.c2),
		c3 = this.catcol(col.c3),
		shade = this.catcol(col.shade),
		deg = ~~(Math.random()*360);
	
	this.filter += this.cssPrefix+'-linear-gradient('+deg+'deg,'+c1+' '+this.percents.a+' ,'+shade+' '+this.percents.b+', '+c2+' '+this.percents.c+', '+c3+' '+this.percents.d+')';	
	
}
Plugin.prototype.catcol = function(col){
		
	var beg = 'rgba(',
		end = ')',
		part = col.toString();

	return beg.concat(part).concat(end);
}
Plugin.prototype.fit = function(){
	this.el.css({
		'width':'100%',
		'height': window.innerHeight
	})
}

Plugin.prototype.percentage = function(){
		
	var p1 = ~~(Math.random()*85),
	p2 = p1 + ~~(Math.random()*15),
	p3 = p2,
	p4 = 100-p2 + ~~(Math.random()*p2);	
	
	var percents = {
		a:p1+'%',
		b:p2+'%',
		c:p3+'%',
		d:p4+'%'
	}

	return percents;
}
Plugin.prototype.colourFilter = function(){

	var col = this.colours;
	
	col.c1 = this.colstep(col.c1);
	col.c1.push(col.alpha);
	col.c2 = this.colstep(col.c2);
	col.c2.push(col.alpha);
	col.c3 = this.colstep(col.c2);
	col.c3.push(col.alpha);
	col.shade = this.colstep(col.shade);
	col.shade.push(col.alpha);
}
Plugin.prototype.colstep = function(col){
	
	var hsl = this.hsl(col),
		wheel = this.colours.wheel,
		hue = (360 * wheel);

	if(this.colours.light>3) this.colours.light = 3;

	hsl[0] = hsl[0] - (~~(Math.random()*hue/2)) + (~~(Math.random()*hue/2));
	hsl[1] = wheel * 100;
	hsl[2] = 30 * this.colours.light;
	return this.rgb(hsl);
}
Plugin.prototype.hsl = function(rgb){

	var r1 = rgb[0] / 255;
	var g1 = rgb[1] / 255;
	var b1 = rgb[2] / 255;
	var maxColor = Math.max(r1,g1,b1);
	var minColor = Math.min(r1,g1,b1);
	//Calculate L:
	var L = (maxColor + minColor) / 2 ;
	var S = 0;
	var H = 0;
	if(maxColor != minColor){
	    //Calculate S:
	    if(L < 0.5){
	        S = (maxColor - minColor) / (maxColor + minColor);
	    }else{
	        S = (maxColor - minColor) / (2.0 - maxColor - minColor);
	    }
	    //Calculate H:
	    if(r1 == maxColor){
	        H = (g1-b1) / (maxColor - minColor);
	    }else if(g1 == maxColor){
	        H = 2.0 + (b1 - r1) / (maxColor - minColor);
	    }else{
	        H = 4.0 + (r1 - g1) / (maxColor - minColor);
	    }
	}

	L = L * 100;
	S = S * 100;
	H = H * 60;
	if(H<0){
	    H += 360;
	}

	var result = [H, S, L];
	return result;
	
}
Plugin.prototype.rgb = function(hsl){
	var h = hsl[0];
	var s = hsl[1];
	var l = hsl[2];
	
	var m1, m2, hue;
	var r, g, b;
	s /=100;
	l /= 100;
	if (s == 0)
		r = g = b = (l * 255);
	else {
		if (l <= 0.5)
			m2 = l * (s + 1);
		else
			m2 = l + s - l * s;
		m1 = l * 2 - m2;
		hue = h / 360;
		r = this.hue2rgb(m1, m2, hue + 1/3);
		g = this.hue2rgb(m1, m2, hue);
		b = this.hue2rgb(m1, m2, hue - 1/3);
	}
	return [Math.round(r), Math.round(g), Math.round(b)];
}
Plugin.prototype.hue2rgb = function(m1, m2, hue) {
	var v;
	if (hue < 0)
		hue += 1;
	else if (hue > 1)
		hue -= 1;

	if (6 * hue < 1)
		v = m1 + (m2 - m1) * hue * 6;
	else if (2 * hue < 1)
		v = m2;
	else if (3 * hue < 2)
		v = m1 + (m2 - m1) * (2/3 - hue) * 6;
	else
		v = m1;

	return 255 * v;
};
$.fn.shards = function(colour1, colour2, shadeColour, steps, wheel, lightness, alpha, fullscreen){

	var el = $(this);
	var shards = new Plugin(el,colour1,colour2,shadeColour,steps,wheel,lightness,alpha,fullscreen);
	
	if(fullscreen){
		$(window).resize( function(){
			shards.fit();
		});
	}

	return this.el;	
}

})(jQuery);