Example Variations
Generated Using Random Parameters
Shape of hypotrochoids dependent on the rad, rad2, amt, and incr values. Example images were generated by randomizing these values. 

sX — center of shape, X position 
sY — center of shape, Y position
rad — radius of a rolling circle. 
rad2 — radius of a fixed circle. 

amt — constant representing 1) the amount of lines drawn, and 2) the distance of a point to the center of the rolling circle. These two variables have been arbitrarily linked. These qualities could be unlinked to allow for more randomization. 

incr — increment value related to change in position. Within the function, the period/perd (change in position) starts at zero degrees and increases by incr amount until a certain number of lines are drawn.
The following parametric equations are for the x, y coordinates of points on a path is wrapped in a for loop that iterates amt amount of times. 
var posX = sX + ((rad2 - rad) * Math.cos(perd)) + (amt * Math.cos (((rad2 - rad)/rad) * perd));
var posY = sY + ((rad2 - rad) * Math.sin(perd)) + (amt * Math.sin (((rad2 - rad)/rad) * perd));

c2 — stroke color.
More Examples
Back to Top