EffectHub.com: your best source for gaming

Recommendation

More Effects...

JS

var pointsDuration = 10000;
var pointsTimeout;
var unitSize;
var numPointsX;
var numPointsY;
var unitWidth;
var unitHeight;
var pointsArray;
var splines = '0.5 0.5 0.5 0.5';
var times = '0;1';

window.onload = onLoad;
window.onresize = onResize;

function onLoad() {	
	var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
	var svgNS = svg.namespaceURI;
	svg.setAttribute('width',window.innerWidth);
	svg.setAttribute('height',window.innerHeight);
	document.querySelector('#bg').appendChild(svg);	
	unitSize = (window.innerWidth+window.innerHeight)/20;
	numPointsX = Math.ceil(window.innerWidth/unitSize)+1;
	numPointsY = Math.ceil(window.innerHeight/unitSize)+1;
	unitWidth = Math.ceil(window.innerWidth/(numPointsX-1));
	unitHeight = Math.ceil(window.innerHeight/(numPointsY-1));	
	pointsArray = [];	
	for(var y = 0; y < numPointsY; y++) {
		for(var x = 0; x < numPointsX; x++)	{
			var newX = unitWidth*x;
			var newY = unitHeight*y;
			pointsArray.push({x:newX, y:newY, trueX:newX, trueY:newY});
		}
	}	
	randomizePoints();	
	for(var i = 0; i < pointsArray.length; i++)	{
		if(pointsArray[i].trueX != unitWidth*(numPointsX-1) && pointsArray[i].trueY != unitHeight*(numPointsY-1))	{
			var topLeftX = pointsArray[i].x;
			var topLeftY = pointsArray[i].y;
			var topRightX = pointsArray[i+1].x;
			var topRightY = pointsArray[i+1].y;
			var bottomLeftX = pointsArray[i+numPointsX].x;
			var bottomLeftY = pointsArray[i+numPointsX].y;
			var bottomRightX = pointsArray[i+numPointsX+1].x;
			var bottomRightY = pointsArray[i+numPointsX+1].y;
			var rando = Math.floor(Math.random()*2);			
			for(var n = 0; n < 2; n++) {
				var polygon = document.createElementNS(svgNS,'polygon');
				if(rando==0) {
					if(n==0) {
						polygon.point1 = i;
						polygon.point2 = i+numPointsX;
						polygon.point3 = i+numPointsX+1;
						polygon.setAttribute('points',topLeftX+','+topLeftY+' '+bottomLeftX+','+bottomLeftY+' '+bottomRightX+','+bottomRightY);
					}	else if(n==1)	{
						polygon.point1 = i;
						polygon.point2 = i+1;
						polygon.point3 = i+numPointsX+1;
						polygon.setAttribute('points',topLeftX+','+topLeftY+' '+topRightX+','+topRightY+' '+bottomRightX+','+bottomRightY);
					}
				}
				else if(rando==1)	{
					if(n==0) {
						polygon.point1 = i;
						polygon.point2 = i+numPointsX;
						polygon.point3 = i+1;
						polygon.setAttribute('points',topLeftX+','+topLeftY+' '+bottomLeftX+','+bottomLeftY+' '+topRightX+','+topRightY);
					}	else if(n==1)	{
						polygon.point1 = i+numPointsX;
						polygon.point2 = i+1;
						polygon.point3 = i+numPointsX+1;
						polygon.setAttribute('points',bottomLeftX+','+bottomLeftY+' '+topRightX+','+topRightY+' '+bottomRightX+','+bottomRightY);
					}
				}				
				polygon.setAttribute('fill','rgba(0,0,0,'+(Math.random()/3)+')');
				var animatePoints = document.createElementNS('http://www.w3.org/2000/svg','animate');
    		animatePoints.setAttribute('fill','freeze');
    		animatePoints.setAttribute('attributeName','points');
    		animatePoints.setAttribute('dur',pointsDuration+'ms');
			  animatePoints.setAttribute('keySplines',splines);
        animatePoints.setAttribute('keyTimes',times);
        animatePoints.setAttribute('calcMode','spline');
				 polygon.appendChild(animatePoints);
				 svg.appendChild(polygon);
			}
		}
	}	
	onPointsInterval();
}

function randomizePoints() {
	for(var i = 0; i < pointsArray.length; i++) {
		if(pointsArray[i].trueX != 0 && pointsArray[i].trueX != unitWidth*(numPointsX-1)) {
			pointsArray[i].x = pointsArray[i].trueX + Math.random()*unitWidth-unitWidth/2;
		}		
		if(pointsArray[i].trueY != 0 && pointsArray[i].trueY != unitHeight*(numPointsY-1)) {
			pointsArray[i].y = pointsArray[i].trueY + Math.random()*unitHeight-unitHeight/2;
		}
	}
}

function onPointsInterval() {
	randomizePoints();	
	for(var i = 0; i < document.querySelector('#bg svg').childNodes.length; i++) {
		var polygon = document.querySelector('#bg svg').childNodes[i];
		var animate = polygon.childNodes[0];		
		if(animate.getAttribute('to')) {
			animate.setAttribute('from',animate.getAttribute('to'));
		}
    animate.setAttribute('to', pointsArray[polygon.point1].x+','
                              +pointsArray[polygon.point1].y+' '
                              +pointsArray[polygon.point2].x+','
                              +pointsArray[polygon.point2].y+' '
                              +pointsArray[polygon.point3].x+','
                              +pointsArray[polygon.point3].y);
		animate.beginElement();
	}	
	pointsTimeout = setTimeout(function() {onPointsInterval();}, pointsDuration);
}

function onResize() {	
	while (document.getElementById("polygonContainer").hasChildNodes()) {
    	document.getElementById("polygonContainer").removeChild(document.getElementById("polygonContainer").lastChild);
	}	
	clearTimeout(pointsTimeout);
	onLoad();
}

CSS

HTML

Join Effecthub.com

Working with Global Gaming Artists and Developers!

Login
Sign Up

Or Sign Up with Your Email Address: