Drawing the golden spiral

How to draw a golden spiral (\( r = \Phi^{{2\theta}/{\pi}} \)) onto a golden rectangle:

Golden Spiral Forever A golden spiral closely approximated by cubic Bézier curves. Created by Russell Cottrell; animated version at russellcottrell.com/blog.

1.  Find the Cartesian coordinates of the upper left corner of a golden rectangle of width \( \Phi \) and height 1.
2.  Find the upper and left sides of the curve and scale it to fit the rectangle.

\( \Phi \) and \( \varphi \) (uppercase and lowercase phi) are both the golden ratio, reciprocals of each other:

Powered by MathJax

\( \Phi = (\sqrt{5} + 1)/2 \quad \approx 1.618033988749895 \)
\( \varphi = (\sqrt{5} - 1)/2 \quad \approx 0.618033988749895 \)

The divisions of the golden rectangle are each smaller than the last by a factor of \( \varphi \).  That means that the upper and left sides of the rectangle (rectX, rectY) are separated from the origin by infinite series of squares, each smaller by a factor of \( \varphi ^ 4 \):

\( \displaystyle \rm{rectX} = –\sum_{i=0}^{\infty} \varphi ^ {4i} \quad \approx –1.1708203932499373 \)

\( \displaystyle \rm{rectY} = \sum_{i=0}^{\infty} \varphi ^ {4i+1} \quad \approx 0.7236067977499792 \)

The upper and left sides of the curve are determined by the points where the slopes are 0 (yMax) and infinity (xMin).  The slope of the curve (dy/dx) is found as follows (https://www.math24.net/derivatives-polar-functions-page-2):

\( \displaystyle \frac{dy}{dx} = \tan (\theta + \arctan (1/b) ) \) where  \( \displaystyle b = \frac{\ln \Phi }{\pi/2} \)

Solving for theta,

\( \displaystyle \theta = \arctan \left( \! \frac{dy}{dx} \! \right) - \arctan (1/b) ~~ [+\pi] \) (a multiple of \( \pi \) may need to be added to get the point on the correct side of the graph)

Solving for x and y,

\( r = \Phi^{{2\theta}/{\pi}} \)
\( x = r \cos \theta \)
\( y = r \sin \theta \)

Setting dy/dx = 0 yields yMax = 1.6945698493810997.  Replacing arctan(infinity) with \( \pi \)/2 yields xMin = -2.7418716126094096.  Note that the curve is too big for the rectangle:



To fit the curve to the rectangle, scale the curve by rectX/xMin or rectY/yMax (0.427015031581176):

\( r = \Phi^{{2\theta}/{\pi}} \cdot (\textrm{rectX} / \textrm{xMin}) \)



Note that the curve does not hit the edges of the rectangle exactly at the dividing lines.  I believe that the locations of the curve as they cross the lines must be determined by numeric methods; the upper and left points are located 0.00164632781809 and 0.00266381436629 short of the edges, respectively (note the ratio), and the slopes of the curve at those points are -0.06502909098259 and 15.37773302517263 (note that they are reciprocal).


Approximating the curve:

The golden spiral is a continuous logarithmic curve.  It may be painted onto a canvas using the actual mathematical formula, as it is here; but when drawing it with an image editor, or with scalable vector graphics, it is often approximated using circular arcs.  These are not in fact very accurate; a cubic Bézier curve may be fitted to the spiral with much greater accuracy.  Control points for such a curve, again determined numerically, both as-is and normalized to 0-1:

(-0.17082039325, 0.72196046993)
(-0.6550185, 0.75344743267)
(-1.1281878916, 0.3382346)
(-1.1681565789, -0.27639320225)

(0, 0.99835367218)
(-0.4841981, 1.02984063492)
(-0.95736749835, 0.6146278)
(-0.99733618565, 0)

The svg image at the top of the page uses these Bézier curves to apporoximate the spiral.

On the canvas below, the black curve is the golden spiral, the green curve is the Bézier curve, the green dots are the control points, and the purple curve is a circular arc drawn between the corners of the unit square.  The gray lines are the tangents to the spiral at the points where it crosses the dividing lines.



Please visit russellcottrell.com | blog