<h3>COMPETITION&nbsp</h3><h1>should UNIFY</h1>
<br>
<h2>click & hold to unify</h2>
<canvas id="c"></canvas>
html,
body {
	height: 100%; 
	overflow: hidden;
	  cursor: pointer;
}

body {
	background: #000;
	overflow: hidden;
	    pointer-events: none;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; 
}

body:active {
     background: #fff;
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}
body:active h1 {
    color: rgba(255,255,255,0);
    transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
}
body:active h3 {
    color: rgba(255,255,255,0);
    transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
}
body:active h2 {
     transition: 2s ease;
     -webkit-transition: 2s ease;
     line-height: 1.5em;
     -webkit-transform: translateY(-60px);
     transform: translateY(-60px);
     color: #222;
}

h1 {
  font-family: 'futura pt', Helvetica, sans-serif;
  font-size: 3em;
  font-weight: 700;
  font-style: bold;
  text-align: center;
  color: #fff;
  margin-top: 19%;
	display: inline-block;
}
h2 {
    font-family: 'futura pt', Helvetica, sans-serif;
    font-size: 1.8em;
    color: #999;
    font-weight: 300;
	font-style: normal;
    text-align: center;
    margin-top: 22px;
    line-height: 0em;
	margin-left: 1%;
}
h3 {
  font-family: 'futura pt', Helvetica, sans-serif;
  font-size: 3em;
  letter-spacing: 0em;
  line-height: 1em;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  color: #BFFF00;
   margin-bottom: 10px;
	margin-left: 34%;
    display: inline-block;

    }

canvas {
	display: block;
    overflow: hidden;
	height: 125%;
	margin-top: -25%;
}
/* click to the atrract the snake bugs */

var a = document.getElementById( 'c' ),
	c = a.getContext( '2d' );

var chains = [],
	chainCount = 50,
	entityCount = 8,
	w = a.width,
	h = a.height,
	cx = w / 2,
	cy = h / 2,
	mx = cx,
	my = cy,
	md = 0,
	tick = 0,
	maxa = 2,
	maxv = 1,
	avoidTick = 20,
	avoidThresh = 70,
	TWO_PI = Math.PI * 2;

function rand( min, max ) {
	return Math.random() * ( max - min ) + min;
}

function Impulse() {
	this.x = cx;
	this.y = cy;
	this.ax = 0;
	this.ay = 0;
	this.vx = 0;
	this.vy = 0;
	this.r = 1;
}

Impulse.prototype.step = function() {
	this.x += this.vx;
	this.y += this.vy;
	if( this.x + this.r >= w || this.x <= this.r ) { this.vx = 0; this.ax = 0; }
	if( this.y + this.r >= h || this.y <= this.r ) { this.vy = 0; this.ay = 0; }
	if( this.x + this.r >= w ) { this.x = w - this.r; }
	if( this.x <= this.r ) { this.x = this.r; }
	if( this.y + this.r >= h ) { this.y = h - this.r; }
	if( this.y <= this.r ) { this.y = this.r; }

	if( md ) {
		this.vx += ( mx - this.x ) * 0.03;
		this.vy += ( my - this.y ) * 0.03;
	}
	
	this.ax += rand( -0.4, 0.4 );
	this.ay += rand( -0.4, 0.4 );
	this.vx += this.ax;
	this.vy += this.ay;
	this.ax *= Math.abs( this.ax ) > maxa ? 0.75 : 1;
	this.ay *= Math.abs( this.ay ) > maxa ? 0.75 : 1;
	this.vx *= Math.abs( this.vx ) > maxv ? 0.75 : 1;
	this.vy *= Math.abs( this.vy ) > maxv ? 0.75 : 1;
};

function Chain() {
	this.branches = [];
	this.impulse = new Impulse();
	this.branches.push( new Branch({
		chain: this,
		attractor: this.impulse
	}));
}

Chain.prototype.step = function() {
	this.impulse.step();
	this.branches.forEach( function( branch, i ) {
		branch.step();
	});

	this.branches.forEach( function( branch, i ) {
		branch.draw();
	});
};

function Branch( opt ) {
	this.entities = [];
	this.chain = opt.chain;
	this.avoiding = 0;
	var entity;
	for( var i = 0; i < entityCount; i++ ) {
		entity = new Entity({
			branch: this,
			i: i,
			x: cx,
			y: cy,
			radius: 1 + ( entityCount - i ) / entityCount * 5,
			damp: 0.2,
			attractor: i === 0 ? opt.attractor : this.entities[ i - 1 ]
		});
		this.entities.push( entity );
	}
}

Branch.prototype.step = function() {
	var i = chains.length;
	while( i-- ) {
		var impulse = this.chain.impulse,
			oImpulse = chains[ i ].impulse,
			dx = oImpulse.x - impulse.x,
			dy = oImpulse.y - impulse.y,
			dist = Math.sqrt( dx * dx + dy * dy );
		if( !md && impulse !== oImpulse && dist < avoidThresh ) {
			impulse.ax = 0;
			impulse.ay = 0;
			impulse.vx -= dx * 0.1;
			impulse.vy -= dy * 0.1;
			this.avoiding = avoidTick;
		}
	}

	this.entities.forEach( function( entity, i ) {
		entity.step();
	});

	if( this.avoiding > 0 ) {
		this.avoiding--;
	}
};

Branch.prototype.draw = function() {
	var self = this;
	c.beginPath();
	c.moveTo( this.entities[ 0 ].x, this.entities[ 0 ].y );
	this.entities.forEach( function( entity, i ) {
		if( i > 0 ) {
			c.lineTo( entity.x, entity.y );
		}
	});
	c.strokeStyle = 'hsla(' + ( md ? 210 : ( self.avoiding ? 200 : 240 ) ) + ', 70%, 60%, 0.7)';
	c.stroke();

	this.entities.forEach( function( entity, i ) {
		c.save();
		c.translate( entity.x, entity.y );
		c.beginPath();
		c.rotate( entity.rot );
		if( entity.i === 0 ) {
			c.fillStyle = ( md ? '#a4ff00' : ( self.avoiding ? '#a4ff00' : '#A300D9' ) );
		} else {
			c.fillStyle = 'hsla(' + ( md ? 270 : ( self.avoiding ? 120 : 290 ) ) + ', 90%, ' + Math.min( 50, ( 5 + ( ( entity.av / maxv ) * 20 ) ) ) + '%, ' + ( ( ( entityCount - i ) / entityCount ) ) + ')';
		}
		c.fillRect( -entity.radius, -entity.radius, entity.radius * 2, entity.radius * 2 );
		c.restore();
	});

};

function Entity( opt ) {
	this.branch = opt.branch;
	this.i = opt.i;
	this.x = opt.x;
	this.y = opt.y;
	this.vx = 0;
	this.vy = 0;
	this.radius = opt.radius;
	this.attractor = opt.attractor;
	this.damp = opt.damp;
}

Entity.prototype.step = function() {
	this.vx = ( this.attractor.x - this.x ) * this.damp;
	this.vy = ( this.attractor.y - this.y ) * this.damp;
	this.x += this.vx;
	this.y += this.vy;
	this.av = ( Math.abs( this.vx ) + Math.abs( this.vy ) ) / 2;

	var dx = this.attractor.x - this.x,
		dy = this.attractor.y - this.y;
	this.rot = Math.atan2( dy, dx );
};

function loop() {
	requestAnimationFrame( loop );

	c.globalCompositeOperation = 'destination-out';
	c.fillStyle = 'rgba(0, 0, 0, 1)';
	c.fillRect( 0, 0, a.width, a.height );
	c.globalCompositeOperation = 'lighter';

	chains.forEach( function( chain, i ) {
		chain.step();
	});

	tick++;
}

function resize() {
	a.width = window.innerWidth;
	a.height = window.innerHeight;
	w = a.width;
	h = a.height;
	cx = w / 2;
	cy = h / 2;
}

window.addEventListener( 'resize', resize );

window.addEventListener( 'mousedown', function() {
	md = 1;
});

window.addEventListener( 'mouseup', function() {
	md = 0;
});

window.addEventListener( 'mousemove', function( e ) {
	mx = e.clientX;
	my = e.clientY;
});

resize();

for( var i = 0; i < chainCount; i++ ) {
	chains.push( new Chain() );
}

loop();
reset();
Rerun