Imagine creating a watercolor painting with a thousand tiny, living brushes. That's what this is. Let it run for a while and use your mouse to lure the brushes. Or don't and let them paint on their ow…
y=document;var b=y.getElementById("c"),c=b.width=window.innerWidth-24,f=b.height=window.innerHeight-24,g=b.getContext("2d");y.onmousemove=h;var j=true;y.onmouseover=function(){j=true};y.onmouseout=function(){j=false};var k=8,l=[];function m(a){return Math.floor(Math.random()*a)}function n(a){return m(a)*(Math.random()*2-1)}function o(){return"rgba("+m(256)+","+m(256)+","+m(256)+","+Math.random()+")"}var p=0,q=0;function h(a){p=a.pageX;q=a.pageY;if(p<0)p=0;if(q<0)q=0}var r=0;
function s(){for(var a=0;a<l.length;a++){var d;try{var e=g.getImageData(l[a].x+n(10),l[a].y+n(10),1,1).data;d="rgba("+e[0]+","+e[1]+","+e[2]+","+e[3]+")"}catch(t){d=o()}if(d.indexOf("rgba(0,0,0")>-1)d=l[a].b;g.fillStyle=d;if(j&&m(2)==1&&p>0&&q>0){d=p>l[a].x?1:-1;var i=q>l[a].y?1:-1;l[a].x+=m(3)*d;l[a].y+=m(3)*i}else{l[a].x+=n(3);l[a].y+=n(3)}g.fillRect(l[a].x,l[a].y,l[a].a,l[a].a)}if(l.length<1E3){a=m(c-k);d=m(f-k);i=m(k);e=g.fillStyle=o();g.fillRect(a,d,i,i);l[l.length]={x:a,y:d,a:i,b:e}}r++;setTimeout(s,
20)}s();
eT1kb2N1bWVudDt2YXIgYj15LmdldEVsZW1lbnRCeUlkKCJjIiksYz1iLndpZHRoPXdpbmRvdy5pbm5lcldpZHRoLTI0LGY9Yi5oZWlnaHQ9d2luZG93LmlubmVySGVpZ2h0LTI0LGc9Yi5nZXRDb250ZXh0KCIyZCIpO3kub25tb3VzZW1vdmU9aDt2YXIgaj10cnVlO3kub25tb3VzZW92ZXI9ZnVuY3Rpb24oKXtqPXRydWV9O3kub25tb3VzZW91dD1mdW5jdGlvbigpe2o9ZmFsc2V9O3ZhciBrPTgsbD1bXTtmdW5jdGlvbiBtKGEpe3JldHVybiBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkqYSl9ZnVuY3Rpb24gbihhKXtyZXR1cm4gbShhKSooTWF0aC5yYW5kb20oKSoyLTEpfWZ1bmN0aW9uIG8oKXtyZXR1cm4icmdiYSgiK20oMjU2KSsiLCIrbSgyNTYpKyIsIittKDI1NikrIiwiK01hdGgucmFuZG9tKCkrIikifXZhciBwPTAscT0wO2Z1bmN0aW9uIGgoYSl7cD1hLnBhZ2VYO3E9YS5wYWdlWTtpZihwPDApcD0wO2lmKHE8MClxPTB9dmFyIHI9MDsNCmZ1bmN0aW9uIHMoKXtmb3IodmFyIGE9MDthPGwubGVuZ3RoO2ErKyl7dmFyIGQ7dHJ5e3ZhciBlPWcuZ2V0SW1hZ2VEYXRhKGxbYV0ueCtuKDEwKSxsW2FdLnkrbigxMCksMSwxKS5kYXRhO2Q9InJnYmEoIitlWzBdKyIsIitlWzFdKyIsIitlWzJdKyIsIitlWzNdKyIpIn1jYXRjaCh0KXtkPW8oKX1pZihkLmluZGV4T2YoInJnYmEoMCwwLDAiKT4tMSlkPWxbYV0uYjtnLmZpbGxTdHlsZT1kO2lmKGomJm0oMik9PTEmJnA+MCYmcT4wKXtkPXA+bFthXS54PzE6LTE7dmFyIGk9cT5sW2FdLnk/MTotMTtsW2FdLngrPW0oMykqZDtsW2FdLnkrPW0oMykqaX1lbHNle2xbYV0ueCs9bigzKTtsW2FdLnkrPW4oMyl9Zy5maWxsUmVjdChsW2FdLngsbFthXS55LGxbYV0uYSxsW2FdLmEpfWlmKGwubGVuZ3RoPDFFMyl7YT1tKGMtayk7ZD1tKGYtayk7aT1tKGspO2U9Zy5maWxsU3R5bGU9bygpO2cuZmlsbFJlY3QoYSxkLGksaSk7bFtsLmxlbmd0aF09e3g6YSx5OmQsYTppLGI6ZX19cisrO3NldFRpbWVvdXQocywNCjIwKX1zKCk7
// setup the canvas
var c = document.getElementById("c");
var a = c.width = window.innerWidth-24;
var b = c.height = window.innerHeight-24;
var x = c.getContext('2d');
document.onmousemove = gm;
var mio = true;
document.onmouseover = function() { mio = true; };
document.onmouseout = function() { mio = false; };
var e = 8; // max object size
var z = []; // object array
// returns random number between 0 and 1
function h() {
return Math.random();
}
// returns random round number between 0 and g
function f(g) {
return Math.floor(h()*g);
}
// returns random number between -aa and aa
function rn(aa) {
return f(aa)*((h()*2)-1);
}
// returns random color
function rc() {
return "rgba("+f(256)+","+f(256)+","+f(256)+","+h()+")";
}
// return color of xx,yy coordinate
// if something error happen, return random color
function gc(xx,yy) {
try {
var pix = x.getImageData(xx,yy,1,1).data;
return "rgba("+pix[0]+","+pix[1]+","+pix[2]+","+pix[3]+")";
} catch (er) {
return rc();
}
}
// randomly returns true of false
function tf() {
return f(2)==1;
}
var tx = 0;
var ty = 0;
// retrieve mouse pos
function gm(e) {
tx = e.pageX;
ty = e.pageY;
if (tx < 0) tx = 0;
if (ty < 0) ty = 0;
}
var cc = 0;
// draw
function d() {
// alter existing objects
for (var j = 0; j < z.length; j++) {
// determine color
var rg = gc(z[j].x+rn(10),z[j].y+rn(10));
if (rg.indexOf("rgba(0,0,0") > -1) rg = z[j].c; //gc(z[j].x+1,z[j].y+1)
x.fillStyle = rg;
// move to mouse
if (mio && tf() && tx > 0 && ty > 0) {
var xd = tx > z[j].x ? 1 : -1;
var yd = ty > z[j].y ? 1 : -1;
z[j].x += f(3)*xd;
z[j].y += f(3)*yd;
}
// or in a random direction
else {
z[j].x += rn(3);
z[j].y += rn(3);
}
x.fillRect(z[j].x,z[j].y,z[j].w,z[j].w);
}
// generate new object
if (z.length < 1000) {
var u = f(a-e);
var v = f(b-e);
var w = f(e);
var co = x.fillStyle = rc();
x.fillRect(u,v,w,w);
z[z.length] = {x:u,y:v,w:w,c:co};
}
cc++;
setTimeout(d, 20);
}
d();