animated neon thingies

gistfile1.js

/*

    Author: Stephen Bussard
    Twitter: @sbussard

*/

var sin = Math.sin;
var cos = Math.cos;
var tan = Math.tan;
var ln = Math.log;
var log = Math.LOG10E;
var pi = Math.PI;
var sqrt = Math.sqrt;
var rnd = Math.random;
var abs = Math.abs;

var canvas = document.createElement('canvas');
canvas.width = W = window.innerWidth;
canvas.height = H = window.innerHeight;
canvas.style.position = "absolute";
canvas.style.zIndex = -2;
document.body.appendChild(canvas);


//var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var t = 0;

var X = -121;
var Y = 336;

var phases = [];

//var p = new Particle();
var particles = [];
for(var i=0;i<75;i++) {
  particles.push(new Particle());
}

var modif = false;

document.body.onclick = function() {
  modif = modif?false:true;
};

document.body.onmousemove = function(event){
  if(modif) {
    cx = event.clientX;
    cy = event.clientY;
    X = (cx - W/2);
    Y = (cy - H/2);
    console.log(X,Y);
  }
};

function Particle() {
	this.radius = (rnd()*100>>0)/10+1;

  //phase offset
  var phs = (rnd()*pi*100 >> 0);
	while(phases.indexOf(phs) != -1 && phases.length > 0) { 
		phs = (rnd()*75 >> 0); 
	}
	this.phase = phs;
	phases.push(phs);
	
/*//pastels
  var h = Math.random()*360>>0;
  var s = Math.random()*100>>0;
  var l = Math.random()*100>>0;
	this.color = "hsl("+h+",5%,20%)";
*/	
  //green-blue neons
  var h = (Math.random()*110>>0) + 100;
  var s = (Math.random()*20>>0) + 80;
  var l = 20;
  var a = Math.random()*.8+.2;
	this.color = "hsla("+h+","+s+"%,"+l+"%,"+a+")";
}


function draw() {
	ctx.globalCompositeOperation = "source-over";
	ctx.fillStyle = "rgba(0, 0, 0, 1)";
	ctx.fillRect(0, 0, W, H);
	ctx.globalCompositeOperation = "lighter";
	
	t++;
	
  for(var i=0;i<particles.length;i++) {
    p = particles[i];
    
    ctx.beginPath();
    ctx.fillStyle = p.color;
    ctx.arc(f( p ), g( p ), p.radius, Math.PI*2, false);
    ctx.fill();
    
    var A = sin(t/50)*p.radius*.5;
    var B = cos(t/50)*p.radius*.5;
    
    
    ctx.beginPath();
    ctx.fillStyle = p.color;
    ctx.arc(f( p ) + A, g( p ) + B, p.radius, Math.PI*2, false);
    ctx.fill();
  }
	setTimeout(draw, 33);
}


function f(p) {
	var u = t/5000 + p.phase;
//	return p.x + W/2 + (H/6+X)*(cos(u/100)*cos(u)*2+sin(u));
	return ((W-X)/2)*(cos(u)*.2+sin(u*10)*.6+sin(u*100/2)*.3) + W/2;
}

function g(p) {
  var u = t/5000 + p.phase;
//  return p.y + H/2 + (H/6+Y)*(sin(u/100)*sin(u)*2+cos(u));
	return ((H-Y)/2)*(sin(u)*.2+cos(u*10)*.6+cos(u*100/2)*.3) + H/2;
}

draw();