PiXELWiT

What is a Logarithmic spiral? A logarithmic spiral steps around center at an additive rate while stepping away from center at a multiplicative rate. Increasing the distance from center at a multiplicative rate causes the arm of a logarithmic spiral to increase in size as it gets further from center. To illustrate, take a look at this photo of a spiral staircase:

Photo by: darijus

As you can see in the above photo, the number of steps going around each floor stays the same on every level but perspective makes the stairs on the outside of the spiral look as though they’re getting bigger and bigger. The increased size of the stairs as they get further from center is what differentiates a logarithmic spiral form a simple Archimedean spiral.

The process for drawing a logarithmic spiral is pretty straightforward, you only need two numbers. One to specify how far around center you must go every step, and another number to specify how far away from center you must go every step. For example’s sake we’ll rotate around 10 degrees every step and multiply our distance away from center by 2 every step. If we start at 10 degrees rotation around center and 2 pixels away from center, our second point would be 20 degrees around center and 4 pixels away from center, our third point would be 30 degrees around and 8 pixels away, our fourth point would be 40 degrees around and 16 pixels away, and so on.

Now that you understand what a logarithmic spiral is we can finally start learning how to draw one. Drawing a logarithmic spiral is very similar to drawing a simple spiral so I strongly suggest reading my Simple Spiral Tutorial to get acquainted with some basic spiral drawing concepts.

Now let’s take a look at the ActionScript code used to draw a logarithmic spiral:

The most important part of the above code is the line where we determine how far away from center we should be. It's this part right here:

In the Simple Spiral Tutorial we determined the distance from the center like this:

In the simple spiral we were essentially dividing the radius into equally sized segments, one segment for every step taken around center. For example, if we wanted to draw a simple spiral with 20 sides and a 100 pixel radius, we would step 5 pixels away from center every time we drew a side (100/20=5). In other words we determined what number would equal 100 when added to itself 20 times. But, when drawing a logarithmic spiral we must determine what number would equal 100 when multiplied by itself 20 times. To do this we need to determine the 20th root of 100 (1.25892541179417).

Determining the Nth root of a number is as simple as raising the number to its inverse power. That may sound complicated, but it's not really. Let's start off with something really easy like raising a number to a power.

How do you raise a number to a certain power? For example, how do you raise 2 to the 3rd power? In Flash all you have to do is this:

That's pretty easy, but the tricky part is getting Flash to work in the opposite direction and determine the 3rd root of 8, or in other words, what number multiplied by itself 3 times will equal 8. To do that we need to tell Flash to do the following:

Getting the root of a number is a simple matter of inverting your "power" argument. The inverse of 3 (or 3/1) is 1/3. Pretty slick right? But wait, you ain't seen nothing yet! The Math.pow function also provides a really cool way to get the square of the cubed root of 8, that is to say, (the cubed root of 8) * (the cubed root of 8). Check this out:

To square the result from Math.pow(8, 1/3) we simply change the numerator of the fraction to the power of our desired result like so, Math.pow(8, 2/3). Pretty neat aye?

So when you see this:

...it's really saying, "Get me the Nth root of radius and then raise it to the i power." Placing the above line of code inside a For loop that iterates "Sides" times will essentially keep multiplying the initial "away" value (the Nth root of radius) times itself until it equals the "Radius".

That's a lot of information to digest and I probably didn't present it all in the clearest possible fashion so don't be afraid to ask questions.

Comments(2)