Recursive spiral art with canvas+javascript
November 24th, 2014 by Michael JasperDemo
(Hide yo kids, hide yo RAM)
See the Pen Fractal with inner circles by Michael Jasper (@mdjasper) on CodePen.
Explanation
The basic gist is that a circle is drawn, then another circle is drawn on top of it at coordinates centeredÂ on a point on the prior circle circumference, with the number of degrees and the radius being incremented or decremented each recursive cycle. The rate of change in degrees or radius is then modified and redrawn on a time interval to create an animated effect.
Drawing circles
Each recursive circle is placed on a point on the prior circles circumference.
x2 and y2 are found using the parametric equation of a circle
1 2 
x2 = x1 + r * cos(a) y2 = y1 + r * sin(a) 
x2 = the new circle x center point
x1 = the prior circles x center point
r = the radius of the prior circle
a = the angle of the point on the circumference (in radians)
1 2 
var x1 = x + (r * Math.cos(d / 180 * Math.PI)); var y1 = y + (r * Math.sin(d / 180 * Math.PI)); 
Illustrated below is the progression from circle to circle, creating the beginning of a spiral pattern. By adjusting the change of the angle, the spiral gets more “tight” or more “open”.

Nils Rasmusson

Trevor D. Miller