console
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback/*, element*/) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
})();
function generateNeonBall(w, h, r, g, b, a) {
var tempCanvas = document.createElement("canvas");
tempCanvas.width = w;
tempCanvas.height = h;
var imgCtx = tempCanvas.getContext("2d");
var gradient = imgCtx.createRadialGradient( w/2, h/2, 0, w/2, h/2, w/2 );
gradient.addColorStop( 0, 'rgba(255,255,255,' + a + ')' );
gradient.addColorStop( 0.3, 'rgba(' + [r, g, b, a * .5] + ')' );
gradient.addColorStop( 1, 'rgba(' + [r, g, b, 0] + ')' );
imgCtx.fillStyle = gradient;
imgCtx.fillRect( 0, 0, w, h);
return tempCanvas;
}
var div = document.querySelector('#canvas')
, canvas = document.querySelector('canvas')
, ctx = canvas.getContext('2d')
;
function rand(max, min) {
min = min || 0;
return (Math.random() * (max - min)) + min;
}
function sig() {
return (Math.floor(Math.random() * 3 % 3) ? 1 : -1);
}
var colorPoints = {}
, red = [
Math.floor(rand(255, 100))
, Math.floor(rand(255, 100))
, Math.floor(rand(255, 100))
]
, green = [
Math.floor(rand(255, 100))
, Math.floor(rand(255, 100))
, Math.floor(rand(255, 100))
]
, blue = [
Math.floor(rand(255, 100))
, Math.floor(rand(255, 100))
, Math.floor(rand(255, 100))
]
;
function Point() {
var obj = {
x : 0
, y : rand(div.clientHeight)
, w : (sig() + sig()) || sig()
, h : (sig() - sig()) || sig()
, r : false ? red[Math.floor(rand(3))] : 255
, g : true ? green[Math.floor(rand(3))] : 255
, b : false ? blue[Math.floor(rand(3))] : 255
, a : Math.floor(rand(100)) * .01
}
, colorKey = 'rgb(' + [obj.r, obj.g, obj.b] + ')'
;
if (!colorPoints.hasOwnProperty(colorKey))
colorPoints[colorKey] = [];
colorPoints[colorKey].push(obj);
colorPoints[colorKey].neon = generateNeonBall(32, 32, obj.r, obj.g, obj.b, 1);
return obj;
}
var valid = false
, w = 1
, h = 1
, points = []
, max = 250
;
!function drawwing() {
requestAnimationFrame(drawwing);
if (valid)
return;
valid = true;
if (div.clientWidth != canvas.width) {
canvas.width = div.clientWidth;
}
if (div.clientHeight != canvas.height) {
canvas.height = div.clientHeight;
}
if (max > points.length)
points.push(Point());
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, .2)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'lighter';
ctx.fillStyle = "none";
var arr, l, x, y, xo, yo;
for(var key in colorPoints) {
if (!colorPoints.hasOwnProperty(key))
continue;
ctx.beginPath();
ctx.strokeStyle = key;
arr = colorPoints[key];
l = arr.length;
while(l--) {
point = arr[l];
x = point.x;
y = point.y;
ctx.moveTo(point.x, point.y);
point.x += rand(rand(5)) * point.w;
point.y += rand(rand(5)) * point.h;
point.x = (xo = point.x > canvas.width)
? canvas.width
: (xo = point.x < 0)
? 0
: point.x
;
xo && (point.w *= -1)
point.y = (yo = point.y > canvas.height)
? canvas.height
: (yo = point.y < 0)
? 0
: point.y
;
yo && (point.h *= -1);
ctx.lineTo(point.x, point.y);
if (xo || yo)
ctx.drawImage(arr.neon, x - 16, y - 16, 32, 32);
}
ctx.stroke();
ctx.fill();
}
ctx.restore();
valid = false;
}();
<div id="canvas"><canvas></canvas></div>
html, body, div {
width : 100%;
height : 100%;
overflow : hidden;
background : black;
padding: 0;
margin: 0;
}