Mouse interaction with an array of squares. Colored like spring time :) Mousedown to enhance the effect.
window.onload=function(){var d=[],m=0,n=0,h=6,j,k;j=c.width=window.innerWidth;k=c.height=window.innerHeight;for(var r=j/2-275,s=k/2-110,e=1;20>=e;e++)for(var l=1;50>=l;l++){var p=11*l+r,q=11*e+s;d.push({x:p,y:q,b:p,c:q,d:5,a:0})}c.onmousemove=function(b){m=b.pageX;n=b.pageY};c.onmousedown=function(){h=24};c.onmouseup=function(){h=6};window.setInterval(function(){for(var b in d){var f=d[b].x-m,e=d[b].y-n,g=Math.sqrt(f*f+e*e),f=Math.atan2(e,f);v1o=d[b].x-d[b].b;v2o=d[b].y-d[b].c;vDo=Math.sqrt(v1o*v1o+ v2o*v2o);vAo=Math.atan2(v2o,v1o)+0.78554;200>g?(d[b].x+=Math.cos(f)*(20*h/g),d[b].y+=Math.sin(f)*(20*h/g)):(d[b].x-=Math.cos(vAo)/(20/vDo),d[b].y-=Math.sin(vAo)/(20/vDo));g=Math.round(128*(vDo/200));d[b].a="rgba(0,"+(0+g)+","+(128-g)+",1)"}a.fillStyle="#112211";a.fillRect(0,0,j,k);a.save();a.globalCompositeOperation="lighter";for(b=0;b<d.length;b++)a.fillStyle=d[b].a,a.fillRect(d[b].x,d[b].y,12,12);a.restore()},33)};
d2luZG93Lm9ubG9hZD1mdW5jdGlvbigpe3ZhciBkPVtdLG09MCxuPTAsaD02LGosaztqPWMud2lkdGg9d2luZG93LmlubmVyV2lkdGg7az1jLmhlaWdodD13aW5kb3cuaW5uZXJIZWlnaHQ7Zm9yKHZhciByPWovMi0yNzUscz1rLzItMTEwLGU9MTsyMD49ZTtlKyspZm9yKHZhciBsPTE7NTA+PWw7bCsrKXt2YXIgcD0xMSpsK3IscT0xMSplK3M7ZC5wdXNoKHt4OnAseTpxLGI6cCxjOnEsZDo1LGE6MH0pfWMub25tb3VzZW1vdmU9ZnVuY3Rpb24oYil7bT1iLnBhZ2VYO249Yi5wYWdlWX07Yy5vbm1vdXNlZG93bj1mdW5jdGlvbigpe2g9MjR9O2Mub25tb3VzZXVwPWZ1bmN0aW9uKCl7aD02fTt3aW5kb3cuc2V0SW50ZXJ2YWwoZnVuY3Rpb24oKXtmb3IodmFyIGIgaW4gZCl7dmFyIGY9ZFtiXS54LW0sZT1kW2JdLnktbixnPU1hdGguc3FydChmKmYrZSplKSxmPU1hdGguYXRhbjIoZSxmKTt2MW89ZFtiXS54LWRbYl0uYjt2Mm89ZFtiXS55LWRbYl0uYzt2RG89TWF0aC5zcXJ0KHYxbyp2MW8rIHYybyp2Mm8pO3ZBbz1NYXRoLmF0YW4yKHYybyx2MW8pKzAuNzg1NTQ7MjAwPmc/KGRbYl0ueCs9TWF0aC5jb3MoZikqKDIwKmgvZyksZFtiXS55Kz1NYXRoLnNpbihmKSooMjAqaC9nKSk6KGRbYl0ueC09TWF0aC5jb3ModkFvKS8oMjAvdkRvKSxkW2JdLnktPU1hdGguc2luKHZBbykvKDIwL3ZEbykpO2c9TWF0aC5yb3VuZCgxMjgqKHZEby8yMDApKTtkW2JdLmE9InJnYmEoMCwiKygwK2cpKyIsIisoMTI4LWcpKyIsMSkifWEuZmlsbFN0eWxlPSIjMTEyMjExIjthLmZpbGxSZWN0KDAsMCxqLGspO2Euc2F2ZSgpO2EuZ2xvYmFsQ29tcG9zaXRlT3BlcmF0aW9uPSJsaWdodGVyIjtmb3IoYj0wO2I8ZC5sZW5ndGg7YisrKWEuZmlsbFN0eWxlPWRbYl0uYSxhLmZpbGxSZWN0KGRbYl0ueCxkW2JdLnksMTIsMTIpO2EucmVzdG9yZSgpfSwzMyl9Ow==
var c, a;
window.onload = function(){
var points = [], mX = 0, mY = 0, mE = 6, w, h;
c = document.getElementById('canvas')
a = c.getContext('2d');
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
function move(){
for(var p in points){
var v1m = points[p].x - mX,
v2m = points[p].y - mY,
vDm = Math.sqrt(v1m*v1m + v2m*v2m),
vAm = Math.atan2(v2m, v1m);
v1o = points[p].x - points[p].origX,
v2o = points[p].y - points[p].origY,
vDo = Math.sqrt(v1o*v1o + v2o*v2o),
vAo = Math.atan2(v2o, v1o) + 0.78554;
if(vDm < 200){
points[p].x = points[p].x + (Math.cos(vAm) * (mE*20/vDm));
points[p].y = points[p].y + (Math.sin(vAm) * (mE*20/vDm));
} else {
points[p].x = points[p].x - Math.cos(vAo)/(20/vDo);
points[p].y = points[p].y - Math.sin(vAo)/(20/vDo);
}
var col = Math.round((vDo/200)*128);
points[p].c = "rgba(0," + (0+col) + "," + (128-col) + ",1)";
}
}
function draw(){
a.save();
a.globalCompositeOperation = "lighter";
for(var p = 0; p < points.length; p++){
a.fillStyle = points[p].c;
a.fillRect(points[p].x, points[p].y, 6*2, 6*2);
}
a.restore();
}
function animate(){
move();
a.fillStyle="#112211";
a.fillRect(0,0,w,h);
draw();
}
var hX = w/2 - 275,
hY = h/2 - 110;
for(var y = 1; y <= 20; y++){
for(var x = 1; x <= 50; x++){
var bX = (x * 5 * 2.2) + hX,
bY = (y * 5 * 2.2) + hY;
points.push({x:bX,y:bY,origX:bX,origY:bY,r:5,c:0});
}
}
c.onmousemove = function(e){
mX = e.pageX;
mY = e.pageY;
};
c.onmousedown = function(){
mE = 24;
};
c.onmouseup = function(){
mE = 6;
};
window.setInterval(animate, 33);
}