Small circles explode from your mouse position and can be flung out by holding then releasing your mouse button. The more circles on the screen, the larger they get. All circles bounce off the edges.
var d=[],e=0.016,f=960,g=540,h=0,j,k,l,m,n,p,q,r,s;with(c)width=f,height=g,style.border="1px dotted #AAA",onmousemove=function(b){j=d[0].x=b.clientX;k=d[0].y=b.clientY},onmouseup=function(){d.push({x:j,y:k,a:3*(j-l),b:3*(k-m),c:1,f:40,g:2,e:0,d:[]})};function t(b,v){return~~(Math.random()*(v-b+1))+b}function u(b){b.x+=b.a*e;b.y+=b.b*e;if(b.x+b.e>f&&0<b.a||0>b.x-b.e&&0>b.a)b.a=-b.a;if(b.y+b.e>g&&0<b.b||0>b.y-b.e&&0>b.b)b.b=-b.b;b.c-=0.01;return 0<b.c} setInterval(function(){a.clearRect(0,0,f,g);for(r=0;r<d.length;r++){n=d[r];p=u(n);for(s=0;s<n.d.length;s++){q=n.d[s];with(a)globalAlpha=Math.max(q.c,0),beginPath(),arc(q.x,q.y,q.e,0,2*Math.PI,0),fillStyle=q.h,fill(),closePath();u(q)||(n.d.splice(s,1),s--)}if(p)for(var b=0;b<n.g;b++)n.d.push({x:n.x,y:n.y,a:t(-n.f,n.f)+(!r?j-l:0),b:t(-n.f,n.f)+(!r?k-m:0),e:t(1,4+r),c:t(5,10)/10,h:"#"+t(1E3,167E5).toString(16)});else n.d.length||(d.splice(r,1),r--)}0>=h&&(l=j,m=k,h=100);h-=16},16); d[0]={x:-1E3,y:-1E3,a:0,b:0,c:9E99,f:80,g:3,d:[]};
dmFyIGQ9W10sZT0wLjAxNixmPTk2MCxnPTU0MCxoPTAsaixrLGwsbSxuLHAscSxyLHM7d2l0aChjKXdpZHRoPWYsaGVpZ2h0PWcsc3R5bGUuYm9yZGVyPSIxcHggZG90dGVkICNBQUEiLG9ubW91c2Vtb3ZlPWZ1bmN0aW9uKGIpe2o9ZFswXS54PWIuY2xpZW50WDtrPWRbMF0ueT1iLmNsaWVudFl9LG9ubW91c2V1cD1mdW5jdGlvbigpe2QucHVzaCh7eDpqLHk6ayxhOjMqKGotbCksYjozKihrLW0pLGM6MSxmOjQwLGc6MixlOjAsZDpbXX0pfTtmdW5jdGlvbiB0KGIsdil7cmV0dXJufn4oTWF0aC5yYW5kb20oKSoodi1iKzEpKStifWZ1bmN0aW9uIHUoYil7Yi54Kz1iLmEqZTtiLnkrPWIuYiplO2lmKGIueCtiLmU+ZiYmMDxiLmF8fDA+Yi54LWIuZSYmMD5iLmEpYi5hPS1iLmE7aWYoYi55K2IuZT5nJiYwPGIuYnx8MD5iLnktYi5lJiYwPmIuYiliLmI9LWIuYjtiLmMtPTAuMDE7cmV0dXJuIDA8Yi5jfSBzZXRJbnRlcnZhbChmdW5jdGlvbigpe2EuY2xlYXJSZWN0KDAsMCxmLGcpO2ZvcihyPTA7cjxkLmxlbmd0aDtyKyspe249ZFtyXTtwPXUobik7Zm9yKHM9MDtzPG4uZC5sZW5ndGg7cysrKXtxPW4uZFtzXTt3aXRoKGEpZ2xvYmFsQWxwaGE9TWF0aC5tYXgocS5jLDApLGJlZ2luUGF0aCgpLGFyYyhxLngscS55LHEuZSwwLDIqTWF0aC5QSSwwKSxmaWxsU3R5bGU9cS5oLGZpbGwoKSxjbG9zZVBhdGgoKTt1KHEpfHwobi5kLnNwbGljZShzLDEpLHMtLSl9aWYocClmb3IodmFyIGI9MDtiPG4uZztiKyspbi5kLnB1c2goe3g6bi54LHk6bi55LGE6dCgtbi5mLG4uZikrKCFyP2otbDowKSxiOnQoLW4uZixuLmYpKyghcj9rLW06MCksZTp0KDEsNCtyKSxjOnQoNSwxMCkvMTAsaDoiIyIrdCgxRTMsMTY3RTUpLnRvU3RyaW5nKDE2KX0pO2Vsc2Ugbi5kLmxlbmd0aHx8KGQuc3BsaWNlKHIsMSksci0tKX0wPj1oJiYobD1qLG09ayxoPTEwMCk7aC09MTZ9LDE2KTsgZFswXT17eDotMUUzLHk6LTFFMyxhOjAsYjowLGM6OUU5OSxmOjgwLGc6MyxkOltdfTs=
var gs = [], ms = 0.016, b = 1e3, k = 200, jw = 960, jh = 540, m0 = 0, m1, m2, m3, m4, g, generate, p, gindex, pindex;
with (c) {
width = jw;
height = jh;
style.border = '1px dotted #AAA';
onmousemove = function (e) {
m1 = gs[0].x = e.clientX;
m2 = gs[0].y = e.clientY;
}
onmouseup = function (e) {
gs.push({ x: m1, y: m2, vx: (m1 - m3) * 3, vy: (m2 - m4) * 3, a: 1, v: 40, ppu: 2, r:0, ps: [] });
}
}
function rand(l, h) { return ~~(Math.random() * (h - l + 1)) + l; }
//move generators/particles
function universalupdate(e) {
e.x += e.vx * ms;
e.y += e.vy * ms;
if ((e.x + e.r > jw && e.vx > 0) || (e.x - e.r < 0 && e.vx < 0)) {
e.vx = -e.vx;
}
if ((e.y + e.r > jh && e.vy > 0) || (e.y - e.r < 0 && e.vy < 0)) {
e.vy = -e.vy;
}
e.a -= 0.01;
return e.a > 0;
}
setInterval(function () {
a.clearRect(0, 0, jw, jh);
for (gindex = 0; gindex < gs.length; gindex++) {
g = gs[gindex];
generate = universalupdate(g);
//update particles
for (pindex = 0; pindex < g.ps.length; pindex++) {
p = g.ps[pindex];
with (a) {
globalAlpha = Math.max(p.a, 0);
beginPath();
arc(p.x, p.y, p.r, 0, 2 * Math.PI, 0);
fillStyle = p.c;
fill();
closePath();
}
if (!universalupdate(p)) {
g.ps.splice(pindex, 1);
pindex--;
}
}
//generate particles
if (generate) {
//generator more particles
for (var x = 0; x < g.ppu; x++) {
g.ps.push({ x: g.x, y: g.y, vx: rand(-g.v, g.v) + (!gindex ? m1 - m3 : 0), vy: rand(-g.v, g.v) + (!gindex ? m2 - m4 : 0), r: rand(1, 4 + gindex), a: rand(5, 10) / 10, c: '#' + rand(b, 1.67e7).toString(16) });
}
} else if (!g.ps.length) {
gs.splice(gindex, 1);
gindex--;
}
}
//update mouse velocity
if (m0 <= 0) {
m3 = m1;
m4 = m2;
m0 = 100;
}
m0 -= 16;
}, 16);
//create the mouse following generator
gs[0] = { x: -b, y: -b, vx: 0, vy: 0, a: 9e99, v: 80, ppu: 3, ps: [] }