Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
animated neon thingies
/*
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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.