Click & draw psychedelic spectro-spirographs =) With each click randomized hypotrochoid dimensions are generated, colors cycle through the rainbow - and applied to a <canvas> as light mixes (additive…
window.onload=function(){var e=document,a=window,b=0;e=e.getElementById("c");c=e.getContext("2d");c.fillRect(0,0,e.width=a.innerWidth,e.height=a.innerHeight);c.globalCompositeOperation="lighter";c.font=(e.width/4)+"px Arial";for(var f=0;f<360;f+=2){c.globalAlpha=f/1000;c.strokeStyle="hsl("+(f%360)+",100%,50%)";c.strokeText("click!",-f+350,250-f+350)}c.globalAlpha=0.4;c.lineWidth=0.5;e.onmousedown=function(i){var h=Math.random()*9,j=Math.random()*9,d=Math.random()*9;function g(q,o){oX=q.pageX;oY=q.pageY;if(o=="up"){clearTimeout(interval)}else{if(o=="down"){var v,u,n=oX,l=oY,p=h*10,k=j*10,s=d*10,w=0;interval=setInterval(function(){for(var m=0;m<10;m++){c.beginPath();Rr=(p/k-1)*w;x=(p-k)*Math.cos(w)+s*Math.cos(Rr)+(n+(oX-n)*(m/10));y=(p-k)*Math.sin(w)-s*Math.sin(Rr)+(l+(oY-l)*(m/10));if(v){c.moveTo(v,u);c.lineTo(x,y)}c.strokeStyle="hsl("+(b%360)+",100%,50%)";c.stroke();w+=360*Math.PI/180*2;v=x;u=y}b++;n=oX;l=oY},5)}}}g(i,"down");e.onmousemove=function(k){g(k,"move")};e.onmouseup=function(k){g(k,"up")}}};
d2luZG93Lm9ubG9hZD1mdW5jdGlvbigpe3ZhciBlPWRvY3VtZW50LGE9d2luZG93LGI9MDtlPWUuZ2V0RWxlbWVudEJ5SWQoImMiKTtjPWUuZ2V0Q29udGV4dCgiMmQiKTtjLmZpbGxSZWN0KDAsMCxlLndpZHRoPWEuaW5uZXJXaWR0aCxlLmhlaWdodD1hLmlubmVySGVpZ2h0KTtjLmdsb2JhbENvbXBvc2l0ZU9wZXJhdGlvbj0ibGlnaHRlciI7Yy5mb250PShlLndpZHRoLzQpKyJweCBBcmlhbCI7Zm9yKHZhciBmPTA7ZjwzNjA7Zis9Mil7Yy5nbG9iYWxBbHBoYT1mLzEwMDA7Yy5zdHJva2VTdHlsZT0iaHNsKCIrKGYlMzYwKSsiLDEwMCUsNTAlKSI7Yy5zdHJva2VUZXh0KCJjbGljayEiLC1mKzM1MCwyNTAtZiszNTApfWMuZ2xvYmFsQWxwaGE9MC40O2MubGluZVdpZHRoPTAuNTtlLm9ubW91c2Vkb3duPWZ1bmN0aW9uKGkpe3ZhciBoPU1hdGgucmFuZG9tKCkqOSxqPU1hdGgucmFuZG9tKCkqOSxkPU1hdGgucmFuZG9tKCkqOTtmdW5jdGlvbiBnKHEsbyl7b1g9cS5wYWdlWDtvWT1xLnBhZ2VZO2lmKG89PSJ1cCIpe2NsZWFyVGltZW91dChpbnRlcnZhbCl9ZWxzZXtpZihvPT0iZG93biIpe3ZhciB2LHUsbj1vWCxsPW9ZLHA9aCoxMCxrPWoqMTAscz1kKjEwLHc9MDtpbnRlcnZhbD1zZXRJbnRlcnZhbChmdW5jdGlvbigpe2Zvcih2YXIgbT0wO208MTA7bSsrKXtjLmJlZ2luUGF0aCgpO1JyPShwL2stMSkqdzt4PShwLWspKk1hdGguY29zKHcpK3MqTWF0aC5jb3MoUnIpKyhuKyhvWC1uKSoobS8xMCkpO3k9KHAtaykqTWF0aC5zaW4odyktcypNYXRoLnNpbihScikrKGwrKG9ZLWwpKihtLzEwKSk7aWYodil7Yy5tb3ZlVG8odix1KTtjLmxpbmVUbyh4LHkpfWMuc3Ryb2tlU3R5bGU9ImhzbCgiKyhiJTM2MCkrIiwxMDAlLDUwJSkiO2Muc3Ryb2tlKCk7dys9MzYwKk1hdGguUEkvMTgwKjI7dj14O3U9eX1iKys7bj1vWDtsPW9ZfSw1KX19fWcoaSwiZG93biIpO2Uub25tb3VzZW1vdmU9ZnVuY3Rpb24oayl7ZyhrLCJtb3ZlIil9O2Uub25tb3VzZXVwPWZ1bmN0aW9uKGspe2coaywidXAiKX19fTs=
window.onload = function() {
var d = document,
w = window,
h = 0;
d = d.getElementById("c");
c = d.getContext("2d");
c.fillRect(0, 0, d.width = w.innerWidth, d.height = w.innerHeight)
c.globalCompositeOperation = "lighter";
c.font = (d.width / 4) + "px Arial";
for(var n = 0; n < 360; n += 2) {
c.globalAlpha = n / 1000;
c.strokeStyle = "hsl("+ ( n % 360 ) +",100%,50%)";
c.strokeText("click!", -n + 350, 250 - n + 350);
}
c.globalAlpha = 0.4;
c.lineWidth = 0.5;
d.onmousedown = function(e) {
var _R = Math.random() * 9,
_r = Math.random() * 9,
_d = Math.random() * 9;
function f(e, m) {
oX = e.pageX;
oY = e.pageY;
if(m == 'up') clearTimeout(interval);
else if(m == 'down') {
var _x,
_y,
_oX = oX,
_oY = oY,
R = _R*10,
r = _r*10,
d = _d*10,
t = 0;
interval = setInterval(function() {
for(var i = 0; i < 10; i++) {
c.beginPath();
Rr = (R / r - 1) * t;
x = (R-r) * Math.cos(t) + d * Math.cos(Rr) + (_oX + (oX - _oX) * (i / 10));
y = (R-r) * Math.sin(t) - d * Math.sin(Rr) + (_oY + (oY - _oY) * (i / 10));
if(_x) {
c.moveTo(_x, _y);
c.lineTo(x, y);
}
c.strokeStyle = "hsl("+(h%360)+",100%,50%)";
c.stroke();
t += 360 * Math.PI/180 * 2;
_x = x;
_y = y;
}
h ++;
_oX = oX;
_oY = oY;
}, 5);
}
};
f(e, 'down');
d.onmousemove = function(e) { f(e, 'move'); }
d.onmouseup = function(e) { f(e, 'up'); };
};
}