- Author:
- Michael Deal
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- mudcu.be
- Compo:
- classic
- Demo link:
- https://js1k.com/2010-first/demo/210
- Shortlink:
- https://js1k.com/210
- Blog post:
- please update here!
- Bytes:
- 1021
- Chars:
- 1021
- Submission
window.onload=function(){C=Math.cos;S=Math.sin;U=0;w=window;j=document;d=j.getElementById("c");c=d.getContext("2d");W=d.width=w.innerWidth;H=d.height=w.innerHeight;c.fillRect(0,0,W,H);c.globalCompositeOperation="lighter";c.lineWidth=0.2;c.lineCap="miter";var e=0,h=0;d.onmousemove=function(k){if(window.T){if(D==9){D=Math.random()*15;f(1)}clearTimeout(T)}X=k.pageX;Y=k.pageY;a=0;b=0;A=X,B=Y;R=(k.pageX/W*999>>0)/999;r=(k.pageY/H*999>>0)/999;U=k.pageX/H*360>>0;D=9;g=360*Math.PI/180;T=setInterval(f=function(l){c.save();c.globalCompositeOperation="source-over";if(!l){c.fillStyle="rgba(0,0,0,0.01)";c.fillRect(0,0,W,H)}c.restore();i=25;while(i--){c.beginPath();if(D>450||e){if(!e){e=1}if(D<0.1){e=0}h-=g;D-=0.1}if(!e){h+=g;D+=0.1}q=(R/r-1)*h;x=(R-r)*C(h)+D*C(q)+(A+(X-A)*(i/25))+(r-R);y=(R-r)*S(h)-D*S(q)+(B+(Y-B)*(i/25));if(a){c.moveTo(a,b);c.lineTo(x,y)}c.strokeStyle="hsla("+(U%360)+",100%,50%,0.75)";c.stroke();a=x;b=y}U-=0.5;A=X;B=Y},9)};j.onkeydown=function(k){a=b=0;R+=0.05};d.onmousemove({pageX:410,pageY:207.5})};
- Description
- [1.1: fix drawing bug, improve rendering]
Hypotrochoid with dynamically changing color and diameter. Use the keyboard to change shapes mid-stream (hold down to initiate hyperdrive), or move the mouse to create a new hypotrochoid based on your XY coords.
- Base64 encoded
d2luZG93Lm9ubG9hZD1mdW5jdGlvbigpe0M9TWF0aC5jb3M7Uz1NYXRoLnNpbjtVPTA7dz13aW5kb3c7aj1kb2N1bWVudDtkPWouZ2V0RWxlbWVudEJ5SWQoImMiKTtjPWQuZ2V0Q29udGV4dCgiMmQiKTtXPWQud2lkdGg9dy5pbm5lcldpZHRoO0g9ZC5oZWlnaHQ9dy5pbm5lckhlaWdodDtjLmZpbGxSZWN0KDAsMCxXLEgpO2MuZ2xvYmFsQ29tcG9zaXRlT3BlcmF0aW9uPSJsaWdodGVyIjtjLmxpbmVXaWR0aD0wLjI7Yy5saW5lQ2FwPSJtaXRlciI7dmFyIGU9MCxoPTA7ZC5vbm1vdXNlbW92ZT1mdW5jdGlvbihrKXtpZih3aW5kb3cuVCl7aWYoRD09OSl7RD1NYXRoLnJhbmRvbSgpKjE1O2YoMSl9Y2xlYXJUaW1lb3V0KFQpfVg9ay5wYWdlWDtZPWsucGFnZVk7YT0wO2I9MDtBPVgsQj1ZO1I9KGsucGFnZVgvVyo5OTk+PjApLzk5OTtyPShrLnBhZ2VZL0gqOTk5Pj4wKS85OTk7VT1rLnBhZ2VYL0gqMzYwPj4wO0Q9OTtnPTM2MCpNYXRoLlBJLzE4MDtUPXNldEludGVydmFsKGY9ZnVuY3Rpb24obCl7Yy5zYXZlKCk7Yy5nbG9iYWxDb21wb3NpdGVPcGVyYXRpb249InNvdXJjZS1vdmVyIjtpZighbCl7Yy5maWxsU3R5bGU9InJnYmEoMCwwLDAsMC4wMSkiO2MuZmlsbFJlY3QoMCwwLFcsSCl9Yy5yZXN0b3JlKCk7aT0yNTt3aGlsZShpLS0pe2MuYmVnaW5QYXRoKCk7aWYoRD40NTB8fGUpe2lmKCFlKXtlPTF9aWYoRDwwLjEpe2U9MH1oLT1nO0QtPTAuMX1pZighZSl7aCs9ZztEKz0wLjF9cT0oUi9yLTEpKmg7eD0oUi1yKSpDKGgpK0QqQyhxKSsoQSsoWC1BKSooaS8yNSkpKyhyLVIpO3k9KFItcikqUyhoKS1EKlMocSkrKEIrKFktQikqKGkvMjUpKTtpZihhKXtjLm1vdmVUbyhhLGIpO2MubGluZVRvKHgseSl9Yy5zdHJva2VTdHlsZT0iaHNsYSgiKyhVJTM2MCkrIiwxMDAlLDUwJSwwLjc1KSI7Yy5zdHJva2UoKTthPXg7Yj15fVUtPTAuNTtBPVg7Qj1ZfSw5KX07ai5vbmtleWRvd249ZnVuY3Rpb24oayl7YT1iPTA7Uis9MC4wNX07ZC5vbm1vdXNlbW92ZSh7cGFnZVg6NDEwLHBhZ2VZOjIwNy41fSl9Ow==
- Original source
window.onload = function () {
C = Math.cos; // cache Math objects
S = Math.sin;
U = 0;
w = window;
j = document;
d = j.getElementById("c");
c = d.getContext("2d");
W = d.width = w.innerWidth;
H = d.height = w.innerHeight;
c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
c.globalCompositeOperation = "lighter"; // switch to additive color application
c.lineWidth = 0.2;
c.lineCap = "miter";
var bool = 0,
t = 0; // theta
d.onmousemove = function (e) {
if(window.T) {
if(D==9) { D=Math.random()*15; f(1); }
clearTimeout(T);
}
X = e.pageX; // grab mouse pixel coords
Y = e.pageY;
a=0; // previous coord.x
b=0; // previous coord.y
A = X, // original coord.x
B = Y; // original coord.y
R=(e.pageX/W * 999>>0)/999;
r=(e.pageY/H * 999>>0)/999;
U=e.pageX/H * 360 >>0;
D=9;
g = 360 * Math.PI / 180;
T = setInterval(f = function (e) { // start looping spectrum
c.save();
c.globalCompositeOperation = "source-over"; // switch to additive color application
if(!e) {
c.fillStyle = "rgba(0,0,0,0.01)";
c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
}
c.restore();
i = 25; while(i --) {
c.beginPath();
if(D > 450 || bool) { // decrease diameter
if(!bool) { // has hit maximum
bool = 1;
}
if(D < 0.1) { // has hit minimum
bool = 0;
}
t -= g; // decrease theta
D -= 0.1; // decrease size
}
if(!bool) {
t += g; // increase theta
D += 0.1; // increase size
}
q = (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); // center on xy coords
y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));
if (a) { // draw once two points are set
c.moveTo(a, b);
c.lineTo(x, y)
}
c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoid
c.stroke();
a = x; // set previous coord.x
b = y; // set previous coord.y
}
U -= 0.5; // increment hue
A = X; // set original coord.x
B = Y; // set original coord.y
}, 9);
}
j.onkeydown = function(e) { a=b=0; R += 0.05 }
d.onmousemove({pageX:410, pageY:207.5})
}