Log Spiral Tesselations

Steven Dutch, Natural and Applied Sciences,University of Wisconsin - Green Bay
First-time Visitors: Please visitSite Map and Disclaimer. Use "Back" to return here.


Number of Sectors Increase Factor per Revolution Minimum Radius

A logarithmic spiral has the polar equation r=exp(ka) where r is the radius and a is the azimuth. It has the property that the curve makes a constant angle with the radius. Thus, a logarithmic spiral divided into equal radial sectors is a tesselation of geometrically similar tiles, differing only in size

Any plane tesselation has a logarithmic spiral counterpart. The radial cells formed by the spiral and its radii correspond to the unit cells or period parallelograms of the plane tesselation. Basically a point (x,y) in the plane is mapped to point (r,a) in logarithmic spiral space. However, note that this is not a one-to-one mapping. If the radius increases by q per revolution, then point (kx,y) is mapped to (qr,a). But so is point (x,y+2pi). Adjust the increase per revolution and number of sectors to get the most pleasing proportions.

In a few cases, interesting results come from using non-integral values for the number of sectors. Simple box patterns with sectors equal to an integer plus one half result in a brick pattern. Two different hexagon-triangle patterns can be created by selecting integral or integer plus one half sectors. Using integer plus 1/3 or 2/3 with the hexagon pattern results in hexagons with bow-tie polygons.

Since logarithmic spiral tesselations consist of repeated motifs that grow in size, they are common growth forms in biology (sunflower heads, sea shells, etc.).

Note on the Graphics

I know of two main graphics routines for Javascript. Both are kludges. They define tiny <Div> elements to create pixels. That's not a reflection on their authors but solely on the almost criminal negligence of the people who created JavaScript in not incorporating graphics capability. My definition of a serious computer manual is one that devotes Chapter 1 to the usual intro material and Chapter 2 to graphics. Anyway, the two JavaScript graphics modules are jsDraw2D.js by jsFiction.com and wz_jsgraphics.js by the late Walter Zorn (and perpetuated on legacy sites). jsDraw2D has some annoying bugs that cause it to drop the ends of line segments, and drop portions of lines and arcs that are horizontal or vertical. wz_jsgraphics has simpler format but also the very annoying feature that ellipses are defined by the box that encloses them rather than by centers and axes. (It's not hard to write a function to get around that problem). Nevertheless after test-driving both I concluded Zorn's is better because it draws complete lines and arcs.

How they come out will depend on your browser. Internet Explorer 8 in XP sometimes renders them with ugly clumps of multiple pixels but they come out just fine in Windows 7, Chrome and Firefox. But Firefox can be slow.

Since Javascript has very well-founded safeguards against writing files, you can't simply save your designs to a file. Instead, use PrintScrn to capture the screen, then copy it into your favorite drawing program, crop it and save it.


Return to Symmetry Index
Return to Professor Dutch's home page

Created 29 November 2010, Last Update 20 January 2011

Not an official UW Green Bay site