Hypotrochoid (aka SpiroGraph(tm))

If like me you enjoyed playing with SpiroGraphâ„¢ as a kid you'll like the Hypotrochoid. Play around with different r1, r2, d values and loop through theta (radians)

/**
* Hypotrochoid is the formal name of the "curves" drawn by Spirograph(tm).
* The function will draw the point of the interaction of two circles r1, r2, 
* offset at d (diameter) derived from theta (angle in radians). Iterate theta to
* produce the figure.
*
* @param r1 radius of circle 1
* @param r2 radius of circle 2
* @param d offset diameter of r2, r2
* @param theta angle (radians) at which to plot the point.
*/

function hypotrochoid (r1:Number, r2:Number, d:Number, theta:Number):Object {
	var x:Number = ((r2-r1)*Math.cos(theta))+(d*Math.cos(((r2-r1)/r1)*theta));
	var y:Number = ((r2-r1)*Math.sin(theta))-(d*Math.sin(((r2-r1)/r1)*theta));
	var point:Object;
	point = {x:x, y:y};
	return point;
};

Here's a quick & dirty example to get you started (and so you can see something fun without having to work out what's going on)... Create a new flash document and paste the code onto frame 1, then run it...

The script will work with all versions of Flash player which support ActionScript 2.0. If for some reason you only have Flash 5 then you can still run it, just remove the strict typing syntax (":Number" & ":Object")

function hypotrochoid (r1:Number, r2:Number, d:Number, theta:Number):Object {
	var x:Number = ((r2-r1)*Math.cos(theta))+(d*Math.cos(((r2-r1)/r1)*theta));
	var y:Number = ((r2-r1)*Math.sin(theta))-(d*Math.sin(((r2-r1)/r1)*theta));
	var point:Object;
	point = {x:x, y:y};
	return point;
};
 
/*
* Set flash framerate to 30 for good results...
* 
* modify the values of r1, r2 & d 
* to experiment... 
* (r1 and r2 must be different to see anything happen!)
*/
var r1 = 15; // radius1
var r2 = 32; // radius2
var d = 71; // distance
//
var spiroGraph_mc = _root.createEmptyMovieClip("spiroGraph_mc", 100);
spiroGraph_mc._x = Stage.width /2;
spiroGraph_mc._y = Stage.height /2;
spiroGraph_mc.lineStyle(1, 0x990000, 100);
//
var i=0; // iterator (defines theta for our x,y point)
spiroGraph_mc.onEnterFrame = function() {
var pointObject:Object = hypotrochoid (r1, r2, d, i);
if(i==0){
	this.moveTo(pointObject.x, pointObject.y);
	} else {
	this.lineTo(pointObject.x, pointObject.y);
	}
	i += .1 // radian scaled iteration...
}

And behold the crazy spirally fun! It should keep you amused for at least 5 minutes. (Note: This is NOT a guarantee, although if you're at work, and a flash dev, you may find yourself mucking about with this for a few days... it's compulsive spirograph on crack.)

Play around with the r1, r2 and d values and you will discover the interesting relationships between the numbers, not to mention see the huge variety of lovely images that can be generated ... Ooh!

Of course since the function itself (when stripped of strict typing) will work in JSFL (not to mention JavaScript) you can use it to generate editable graphics in Flash authoring, PhotoShop, Illustrator etc.. just imagine! (ooh!)

Add comment April 19th, 2006