- 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})
}