EffectHub.com: your best source for gaming

Recommendation

More Effects...

window.requestAnimFrame = (function(){
  	  return  window.requestAnimationFrame       ||
	          window.webkitRequestAnimationFrame ||
	          window.mozRequestAnimationFrame    ||
	          function( callback ){
	            window.setTimeout(callback, 1000 / 60);
	          };
	})();

(function(window, document, undefined){
	$(document).ready(function (){
		init();
	});

var can, ctx, origin = {}, particles = [], G=-0.01, frame=0, 
		dir = ['up', 'left', 'down', 'right'],
		mDir={
			up: [1, 0, 0, 1],
			left: [0, 1, -1, 0],
			down: [-1, 0, 0, -1],
			right: [0, -1, 1, 0]
		},
		colDir={
			up: function(){
				return "rgb("+(255-Math.floor(Math.random()*50))+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*50)+")";
			},
			left: function(){
				return "rgb("+(255-Math.floor(Math.random()*50))+","+(255-Math.floor(Math.random()*50))+","+Math.floor(Math.random()*50)+")";
			},
			down: function(){
				return "rgb("+Math.floor(Math.random()*50)+","+Math.floor(Math.random()*200)+","+(255-Math.floor(Math.random()*50))+")";
			},
			right: function(){
				return "rgb("+Math.floor(Math.random()*200)+","+(255-Math.floor(Math.random()*50))+","+Math.floor(Math.random()*50)+")";
			}
		},
		keysDown={
			up: false,
			left: false,
			down: false,
			right: false
		},
		spinSpeed = 3, 
		bounce = 2,
		damping = 0.5,
		diminish = 1, 
		moveSpeed = 6;

function init(){

can = document.getElementById('canvas');

ctx = can.getContext('2d');

ctx.canvas.width  = window.innerWidth;
  		ctx.canvas.height = window.innerHeight;

origin.x = ctx.canvas.width/2;
  		origin.y = ctx.canvas.height/2;
  		origin.dX = 0;
  		origin.dY = 0;

keyListener();

resizeListener();

docs();

renderLoop();

}

});
	}

function docs(){
		var $key = $('.key');
		$('.close', $key).on('click', function(){
			$key.addClass('hide');
		});
		$('.open', $key).on('click', function(){
			$key.removeClass('hide');
		});

}

function cX(m){
		return m*(Math.random()*0.8 - 0.4);
	}

function cY(m){
		return m*(Math.random() - 3);
	}

function d(m1, m2, m3, m4){
		return cX(m1) * Math.cos( spinSpeed*frame*(2*Math.PI/360) )  +  cY(m2) * Math.sin( spinSpeed*frame*(2*Math.PI/360) ) + cX(m3) * Math.sin( spinSpeed*frame*(2*Math.PI/360) )  +  cY(m4) * Math.cos( spinSpeed*frame*(2*Math.PI/360) );
	}

function renderLoop(){
		requestAnimFrame(renderLoop); 
		render();
	}

function render(){
		
		frame+=1;

ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);

originMovement();

catherineWheelDirection();

}

origin.x += origin.dX;
		origin.y += origin.dY

switch(bounce){
			case 2: 
				if(origin.y < 0){
					origin.y = 0;
				}
				if(origin.x < 0){
					origin.x = 0;
				}else if(origin.x > ctx.canvas.width){
					origin.x = ctx.canvas.width;
				}
			case 1:
				if(origin.y > ctx.canvas.height){
					origin.y = ctx.canvas.height;
				}
			default:

break;

}

function catherineWheelDirection(){
		for( var j = 0; j < dir.length; j++){
			particles.push(newParticle(mDir[dir[j]], colDir[dir[j]]()));	
		}

for( var i = 0; i < particles.length; i++){
			particles[i].draw();

particles[i].dY -= G;
			particles[i].y += particles[i].dY;
			particles[i].x += particles[i].dX;

switch(bounce){
				case 2:
					if(particles[i].y < 0){
						particles[i].y = -particles[i].y;
						particles[i].dY = -particles[i].dY * damping;
					}
					var pastX = particles[i].x - ctx.canvas.width;
					if(particles[i].x < 0){
						particles[i].x = -particles[i].x;
						particles[i].dX = -particles[i].dX * damping;
					}else if(pastX > 0){
						particles[i].x = ctx.canvas.width - pastX;	
						particles[i].dX = -particles[i].dX * damping;
					}
				case 1:
					var pastY = particles[i].y - ctx.canvas.height;
					if(pastY > 0){
						particles[i].y = ctx.canvas.height - pastY;	
						particles[i].dY = -particles[i].dY * damping;
					}
				default: 
					break;
			}

particles[i].w *= (1-(particles[i].age/(diminish*1000)));

if( particles[i].w < 0.25 ){
				particles.splice(i,1);
			}
			particles[i].age++;
		}	
	}
}(window, document));

CSS

* {
  margin: 0; 
  padding: 0; 
}
html, body { 
  height: 100%; 
  width: 100%; 
}
canvas { 
  display: block; 
  background-color:#000000;
}
dl{
  font-family: arial;
  font-size: 11px;
  opacity: .999;
  -webkit-transition: opacity 0.5s ease-in-out 0.5s;
  -moz-transition: opacity 0.5s ease-in-out 0.5s;
  transition: opacity 0.5s ease-in-out 0.5s;
}
dt{
  clear: left;
  font-weight: bold;
  float: left; 
  width: 120px;
  text-align: right;
}

dd{
  float: left;
  margin-left: 10px;
}

.key{
  background-color: #fff;
  position: fixed;
  top: 10px;
  right: 10px;
  padding:10px;
  width: 330px;
  height: 98px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.key a{
  position: absolute;
  top: 10px;
  right: 10px;
  text-decoration: none;
  color: black;
  font-size: 16px;
  height: 16px;
  line-height: 12px;
}

.key a:hover{
  font-weight: bold;
}

.key a.open{
  display: none;
}

.key.hide a.close{
  display: none;
}

.key.hide a.open{
  display: block;
}

.key.hide dl{
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.key.hide{
  width: 18px;
  height: 16px;
  -webkit-transition: all 0.5s ease-in-out 0.5s;
  -moz-transition: all 0.5s ease-in-out 0.5s;
  transition: all 0.5s ease-in-out 0.5s;
}

HTML

Recommendation

Join Effecthub.com