{"id":268,"date":"2008-05-14T22:31:56","date_gmt":"2008-05-15T03:31:56","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/?p=268"},"modified":"2009-08-14T19:37:35","modified_gmt":"2009-08-15T00:37:35","slug":"how-to-draw-logarithmic-spiral","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2008\/05\/14\/how-to-draw-logarithmic-spiral\/","title":{"rendered":"How to Draw a Logarithmic Spiral"},"content":{"rendered":"

What is a Logarithmic spiral? A logarithmic spiral steps around<\/em> center at an additive rate while stepping away<\/em> from center at a multiplicative<\/strong> 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:<\/p>\n

\"bottom-up
Photo by: darijus<\/a><\/small><\/p>\n

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<\/a>.<\/p>\n

The process for drawing a logarithmic spiral is pretty straightforward, you only need two numbers. One to specify how far around<\/em> center you must go every step, and another number to specify how far away<\/em> from center you must go every step. For example’s sake we’ll rotate around<\/em> 10 degrees every step and multiply our distance away<\/em> 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.<\/p>\n

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<\/a> to get acquainted with some basic spiral drawing concepts.<\/p>\n

Now let’s take a look at the ActionScript code used to draw a logarithmic spiral:<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\n\/\/ centerX-- X origin of the spiral.<\/span>
\n\/\/ centerY-- Y origin of the spiral.<\/span>
\n\/\/ radius--- Distance from origin to outer arm.<\/span>
\n\/\/ sides---- Number of points or sides along the spiral's arm.<\/span>
\n\/\/ coils---- Number of coils or full rotations. (Positive numbers spin clockwise, negative numbers spin counter-clockwise)<\/span>
\n\/\/ rotation- Overall rotation of the spiral. ('0'=no rotation, '1'=360 degrees, '180\/360'=180 degrees)<\/span>
\n\/\/<\/span>
\nfunction<\/span> logSpiral(<\/span>centerX, centerY, radius, sides, coils, rotation)<\/span>{<\/span>
\n    \/\/<\/span>
\n    with<\/span>(<\/span>this<\/span>)<\/span>{<\/span>\/\/ Draw within the clip calling the function.<\/span>
\n        \/\/<\/span>
\n        \/\/ Start at the center.<\/span>
\n        moveTo<\/span>(<\/span>centerX, centerY)<\/span>;
\n        \/\/<\/span>
\n        \/\/ How far to rotate around center for each side.<\/span>
\n        var<\/span> aroundStep = coils\/<\/span>sides;\/\/ 0 to 1 based.<\/span>
\n        \/\/<\/span>
\n        \/\/ Convert aroundStep to radians.<\/span>
\n        var<\/span> aroundRadians = aroundStep *<\/span> 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n        \/\/<\/span>
\n        \/\/ Convert rotation to radians.<\/span>
\n        rotation *<\/span>= 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n        \/\/<\/span>
\n        \/\/ For every side, step around and away from center.<\/span>
\n        for<\/span>(<\/span>var<\/span> i=1<\/span>; i<<\/span>=sides; i++)<\/span>{<\/span>
\n            \/\/<\/span>
\n            \/\/ How far away from center<\/span>
\n            var<\/span> away = Math<\/span>.pow<\/span>(<\/span>radius, i\/<\/span>sides)<\/span>;
\n            \/\/<\/span>
\n            \/\/ How far around the center.<\/span>
\n            var<\/span> around = i *<\/span> aroundRadians + rotation;
\n            \/\/<\/span>
\n            \/\/ Convert 'around' and 'away' to X and Y.<\/span>
\n            var<\/span> x = centerX + Math<\/span>.cos<\/span>(<\/span>around)<\/span> *<\/span> away;
\n            var<\/span> y = centerY + Math<\/span>.sin<\/span>(<\/span>around)<\/span> *<\/span> away;
\n            \/\/<\/span>
\n            \/\/ Now that you know it, do it.<\/span>
\n            lineTo<\/span>(<\/span>x, y)<\/span>;
\n        }<\/span>
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\n\/\/<\/span>
\nlineStyle<\/span>(<\/span>2<\/span>, 0x000000)<\/span>;\/\/ Black.<\/span>
\n\/\/       (centerX, centerY, radius, sides, coils, rotation)<\/span>
\nlogSpiral(<\/span>    250<\/span>,     200<\/span>,    320<\/span>,   700<\/span>,    14<\/span>,        0<\/span>)<\/span>;
\nlineStyle<\/span>(<\/span>2<\/span>, 0xD0D0D0)<\/span>;\/\/ Gray.<\/span>
\nlogSpiral(<\/span>    250<\/span>,     200<\/span>,    320<\/span>,   700<\/span>,    14<\/span>,       .5)<\/span>;
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object><\/p>\n

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:<\/p>\n

\/\/<\/span>
\n\/\/ How far away from center<\/span>
\nvar<\/span> away = Math<\/span>.pow<\/span>(<\/span>radius, i\/<\/span>sides)<\/span>;
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

In the Simple Spiral Tutorial<\/a> we determined the distance from the center like this:<\/p>\n

\/\/<\/span>
\n\/\/ How far away from center<\/span>
\nvar<\/span> away = radius *<\/span> i\/<\/span>sides;
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

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<\/strong> to itself 20 times. But<\/strong>, when drawing a logarithmic spiral we must determine what number would equal 100 when multiplied<\/strong> by itself 20 times. To do this we need to determine the 20th root of 100 (1.25892541179417).<\/p>\n

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. <\/p>\n

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:<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\nvar<\/span> twoCubed = Math<\/span>.pow<\/span>(<\/span>2<\/span>, 3<\/span>)<\/span>;
\ntrace<\/span>(<\/span>"Two cubed = "<\/span>+twoCubed)<\/span>;\/\/ prints "Two cubed = 8".<\/span>
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

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:<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\nvar<\/span> cubeRootOfEight = Math<\/span>.pow<\/span>(<\/span>8<\/span>, 1<\/span>\/<\/span>3<\/span>)<\/span>;
\ntrace<\/span>(<\/span>"Cube root of eight = "<\/span>+cubeRootOfEight )<\/span>;\/\/ prints "Cube root of eight = 2".<\/span>
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

Getting the root of a number is a simple matter of inverting<\/em> 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:<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\nvar<\/span> squaredCubeRootOfEight = Math<\/span>.pow<\/span>(<\/span>8<\/span>, 2<\/span>\/<\/span>3<\/span>)<\/span>;
\ntrace<\/span>(<\/span>"Squared cube root of eight = "<\/span>+squaredCubeRootOfEight )<\/span>;
\n\/\/ prints "Squared cube root of eight = 4".<\/span>
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

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?<\/p>\n

So when you see this:<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\nvar<\/span> N = sides;
\nvar<\/span> away = Math<\/span>.pow<\/span>(<\/span>radius, i\/<\/span>N)<\/span>;
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

...it's really saying, \"Get me the N<\/strong><\/em>th root of radius<\/strong><\/em> and then raise it to the i<\/strong><\/em> 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\".<\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

Flash ActionScript tutorial explaining how to draw a logarithmic which is a spiral that steps around center at an additive rate while stepping away from center at a multiplicative rate.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[8],"tags":[42,45,36,37],"class_list":["post-268","post","type-post","status-publish","format-standard","hentry","category-flash","tag-code","tag-draw","tag-swfs","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/comments?post=268"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/268\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}