Recursive spiral art with canvas+javascript

Demo

(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.

Deriving a point
Deriving a point

x2 and y2 are found using the parametric equation of a circle

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)

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”.

 

circle-progression

Author: Michael Jasper

Michael is a Web Developer located in Northern Utah. When not programming, he enjoys spending time with his family, exploring the great-outdoors, and hit-and-miss cooking experiments.