Geometric Spiral Design

[AndrewSipe]

This topic was imported from the Typophile platform

I'm curious how one would reconstruct the geometric design used for this logo. It seems like a simplistic thing, but I'm having little luck in Illustrator. Not looking to steal the design, I'd just like to figure out how the pattern was created.

Sorry for the image size, it was the best I could find.

[raph]

My guess is that it's programmatic. It certainly resembles Fibonacci phyllotaxis, for which there is a long history of analysis and tools for generating the spiral designs.

(I'm finishing up my doctorate in spirals, so I should know!)

[timd]

Do you want to create the shape before it was distorted?
It is essentially based on a twelve pointed star with curved sides, create a basic star in Illustrator to get the centre and then draw one half petal using the start and finish points of one segment of the star, reflect/copy that to form one petal, position your smallest circle and use the rotate tool to position it along the line of the petal, using the centre of your base star as the point it rotates around, and then scale them, reflect/copy the circles and using the centre again rotate copy them 30º.
More confusing to write than do, honest.

Tim

[AndrewSipe]

I'll give a try, even though I'm not sure what you just said.

[raph]

timd: actually, you're right, it's based on 12-fold symmetry, rather than a Fibonacci spiral.

So probably the simplest way to do this is to take a 1/12th slice, draw it more or less by hand, then replicate it around 12 times. That slice also has a mirror symmetry, but it may be easier to just draw both halves rather than trying to draw a single half and doing a mirror copy.

I find the Fibonacci spiral more appealing - it's closer to what's in nature - but it is more complicated to pull off, for sure.

[AndrewSipe]

Raph, your suggestion definitely makes more sense.

So, I'm drawing a 12 point star, then dividing it into 12 equal pieces. Then in one of the pieces I create my 2 column staggered descending size circles. Then I rotate/copy that piece on a 30 degree axis based on the center of the original 12 point star.

[AndrewSipe]

Okay, apparently I didn't understand at all. Have either of you guys tried what you suggested and had luck?

[hrant]

Dude, make two equal circles, copy-paste them and rotate the new pair 360/12=30 degrees. Do that four more times, each time on the newest pair. Then take the whole ring, copy-past it, shrink the new ring down by whatever amount, rotate it 30/2=15 degrees. Repeat with the smallest ring until you have enough.

hhp

[AndrewSipe]

Would you mind visualizing that for me? Apparently I'm extra dense and that "Aha" moment hasn't happened yet.

[AndrewSipe]

Nevermind, I just had the "Aha" moment. I'll post my results shortly.

[AndrewSipe]

Spiral-Graph Tutorial: Based on Hrant's input. Thanks Hrant!

1. Create 2 circles, space them out (this will be outside diameter of the spiral graph)

2. Group the 2 circles, Copy and Rotate 30 degrees

3. Duplicate 4 more times

4. Select and Group all the circles, copy, reduce size, and Rotate 15 degrees. This will be the smaller staggered row.

5. Select and Group these 2 rings of circles, reduce size, and repeat as desired.

[hrant]

Hey, nice illustration! :-)

hhp

[timd]

>Apparently I’m extra dense

Not at all, it would have been easier to show with images in the first place. I now have dots before my eyes and I might have hypnotised myself. Your next challenge is to try it with the Fibonacci spiral, I had a split Nautilus shell, a thing of wonder and delight* :)

Tim

*Unfortunately fragile as well

[AndrewSipe]

Thanks Hrant. You too Tim and Raph! Sorry I was so dense at first, I'm a visual learner. Trying to understand the suggestion to accomplish this was taking their toll on my noodle. Luck for me, it sunk in before I had an Aneurysm .

[AndrewSipe]

Oh I also discovered, that if you start with the 2 circles as suggested by Hrant, Group them, then go to Object>Transform>Transform Each and set the Scales to something less than 100% (I used 90%) and set Rotate to 30 degrees and press the Copy button. Then duplicate this over and over (Ctrl+D or Cmd+D), till you get what look like 2 spirals that seem to reduce infinitely. When you've duplicated till your hearts desire. Select all these new circles, group them and then rotate them 45 degrees, do this 2 more times for a much tighter looking spiral-graph.

Comparison Spirals:

Original Technique on Left. New Technique on Right.

[AzizMostafa]

The same technique is applied in CorelDraw. But, instead of grouping the circles, I combine them to make them share same outlines+fill color. Combining makes smaller and thus faster to manipulate file. That's how I built Flowers with CorelDraw3.0, 15 years ago.
Is there something like that in Adobe Illustrator?

[raph]

If you're going to try for the Fibonacci spiral, try rotating by 180/phi = 111.246118 degrees.

[ChuckGroth]

i didn't know either, but i took a stab and was able to come up with this in just a couple of minutes:

i used illustrator to draw the hex, and then dragged it into the brush palette. i drew a circle and applied the brush. copy and paste, then scale (i did it 150% -- scaling strokes and effects) repeat repeat repeat... paste into photoshop and free distort.

[Quincunx]

That is not a spiral. :)
And the rotating and perspective you can do in Illustrator itself, no need for photoshop. Quick try:

[ChuckGroth]

you're right

[wormwood]

What if you want the small shapes on the outside? ;^P

[vonslam]

this plug-in may help:

http://www.cvalley.com/products/xtreampath/index.html

[AndrewSipe]

Jon, I was thinking the same thing. Course, I'm just glad we figured out how to do the original design.

Any ideas for Jon's inquiry?

[AndrewSipe]

Raph, actually it would be 360/pi = 114.591559

[ChuckGroth]