EffectHub.com: your best source for gaming

Recommendation

More Effects...

/**
 * @author Nicolas Barradeau 
 * http://en.nicoptere.net
 * twitter @nicoptere
 */
(function() 
{
	
	var raf = 	window.requestAnimationFrame		||
				window.webkitRequestAnimationFrame 	||
				window.mozRequestAnimationFrame 	||
				window.msRequestAnimationFrame 		||
				window.oRequestAnimationFrame 		||
				function(func) { setTimeout(func, 1000 / 30 ); };
	
	var c,
		ctx,
		width,
		height,
		margin = 100,
		size,
		half,
		reference,
		polar,
		mover,
		projection,
    ready = false;
		
	
	window.onload = function()
	{
		
		c = document.getElementById( "canvas" );
		ctx = c.getContext( "2d" );
		
		window.onresize = onResize;
		onResize();
		
	}
	
	function reset()
	{
    
		margin = 100;
		size = Math.min( width, height ) / 2 - margin;
		half = size / 2;
		
		reference = new rect( width / 4 - size, height / 2 - half, size * 2, size );
		mover = new movable( new point( width / 4, height / 2 ), reference, true );
		
		polar = new circle( width / 2 + size, height / 2, size );
		projection = new movable( new point( width / 2, height / 2 ), reference, false );
    
	}
	
	function update()
	{
    
		ctx.clearRect( 0,0, width, height );
		//ctx.fillStyle = "rgba( 255,255,255, .08 )";//trails...
		//ctx.fillRect( 0,0,width, height );
		
		//draw reference space
		ctx.lineWidth = "1";
		ctx.strokeStyle = "#AAA";
		ctx.beginPath();
		ctx.strokeRect( reference.x, reference.y, reference.w, reference.h );
		ctx.closePath();
		
		//draw moving dot
		ctx.lineWidth = "1";
		mover.update();
		mover.render( ctx, "#666" );
		
		//draw polar space
		ctx.strokeStyle = "#AAA";
		ctx.beginPath();
		ctx.lineWidth = "0";
		ctx.arc( polar.x, polar.y, 2, 0, Math.PI * 2, true );
		ctx.stroke();
		ctx.arc( polar.x, polar.y, polar.r, 0, Math.PI * 2, true );
		ctx.stroke();
		ctx.closePath();
		
		//mapping from reference space to polar space
		var angle = utils.map( mover.p.x, mover.r.x, mover.r.x + mover.r.w, 0, Math.PI * 2 );
		var radius = utils.map( mover.p.y, mover.r.y, mover.r.y + mover.r.h, polar.r, 0 );
		
		//projection to polar space
		projection.p.x = polar.x + Math.cos( angle ) * radius;
		projection.p.y = polar.y + Math.sin( angle ) * radius;
		
		//draw projected dot
		projection.update();
		projection.render( ctx, "#666" );
		
		
		//visual helpers
		ctx.lineWidth = "2";
		
		//reference plane
		
		ctx.strokeStyle = "#F00";
		ctx.beginPath();
		ctx.moveTo( mover.p.x, mover.r.y );
		ctx.lineTo( mover.p.x, mover.p.y );
		ctx.stroke();
		ctx.closePath();
		
		ctx.strokeStyle = "#00F";
		ctx.beginPath();
		ctx.moveTo( mover.r.x, mover.r.y );
		ctx.lineTo( mover.p.x, mover.r.y );
		ctx.stroke();
		ctx.closePath();
		
		
		//polar coordinates
		
		ctx.beginPath();
		ctx.strokeStyle = "#F00";
		ctx.moveTo( polar.x + Math.cos( angle ) * polar.r, polar.y + Math.sin( angle ) * polar.r );
		ctx.lineTo( projection.p.x, projection.p.y );
		ctx.stroke();
		ctx.closePath();
		
		ctx.strokeStyle = "#00F";
		ctx.beginPath();
		ctx.arc( polar.x, polar.y, polar.r, 0, angle, false );
		ctx.stroke();
		ctx.closePath();
		
		raf( update );
    
	}
	
	function onResize( e )
	{
  	width = getWidth( document.body );
  	height = getHeight( document.body );
    c.width = width;
    c.height = height;
    
    
    reset();
    if( ready === false ) update();
    ready = true;
	}
	function getWidth( element ){return Math.max(element.scrollWidth,element.offsetWidth,element.clientWidth );}
	function getHeight( element ){return Math.max(element.scrollHeight,element.offsetHeight,element.clientHeight );}
	
	
	var point = function( x,y ){this.x = x||0;this.y = y||0;}
	point.prototype = 
	{
		add : function( p ){return new point( this.x + p.x, this.y + p.y );}
		,sub : function( p ){return new point( this.x - p.x, this.y - p.y );}
		,length : function(){return Math.sqrt( this.x * this.x + this.y * this.y );}
		,normalize : function ( scale ){scale = scale || 1;var l = this.length();this.x /= l;this.x *= scale;this.y /= l;this.y *= scale;return this;}
	}
	
	var circle = function( x,y,radius ){this.x = x||0;this.y = y||0;this.r = radius||0;}
	var rect = function( x,y,w,h ){this.x = x||0;this.y = y||0;this.w = w||0;this.h = h||1;}
	
	var movable = function( point, rect, automatic )
	{
		this.p = point;
		this.r = rect;
		this.speed = 2;
		this.trail = [];
		this.automatic = automatic || false;
	}
	movable.prototype = 
	{ 
		update : function() 
		{ 
			this.trail.push( this.p.x, this.p.y );
			if( this.automatic == false ) return;
			
			if( this.acc == null ) this.acc = new point(0,0); 
			if( this.vel == null ) this.vel = new point(0,0); 
			
			this.acc.x += ( Math.random() - .5 ) * .4;
			this.acc.y += ( Math.random() - .5 ) * .4;
			this.acc.normalize( .9 );
			
			this.vel = this.vel.add( this.acc );
			this.vel.x = utils.clamp( this.vel.x, -this.speed, this.speed );
			this.vel.y = utils.clamp( this.vel.y, -this.speed, this.speed );
			
			this.p.x += this.vel.x; 
			this.p.y += this.vel.y; 
			this.bounds();
			
			
		},
		bounds : function() 
		{ 
			if( this.p.x < this.r.x || this.p.x > this.r.x + this.r.w ) 
			{
				 this.vel.x *= -1;
				 this.acc.x *= -.9;
			}
			if( this.p.y < this.r.y || this.p.y > this.r.y + this.r.h )
			{
				this.vel.y *= -1;
				this.acc.y *= -.9;
			}
			
		},
		render : function( ctx, color ) 
		{ 
			ctx.fillStyle = color;
			ctx.beginPath();
			ctx.arc( this.p.x, this.p.y, 5, 0, Math.PI * 2 );
			ctx.fill(); 
			ctx.closePath();
			
			if( this.trail.length < 2 ) return;
			ctx.beginPath();
			ctx.strokeStyle = color;
			for( var i = 0; i < this.trail.length - 2; i+= 2 )
			{
				ctx.moveTo( this.trail[ i ], this.trail[ i + 1 ] );
				ctx.lineTo( this.trail[ i + 2 ], this.trail[ i + 3 ] );
			}
			ctx.stroke();
			ctx.closePath();
			if( this.trail.length > 2500 ) 
			{
				this.trail.shift();
				this.trail.shift();
			}
		}
	}
	
	var utils = function(){};
	utils.lerp = function( t, a, b ){ return a + t * ( b - a ); };
	utils.norm = function( t, a, b ){ return ( t - a ) / ( b - a ); };
	utils.map = function( t, a0, b0, a1, b1 ){ return utils.lerp( utils.norm( t, a0, b0 ), a1, b1 ); };
	utils.clamp = function( t, min, max ){ return Math.min( max, Math.max( t, min ) ); };
	
})();

CSS

HTML

Recommendation

Join Effecthub.com