{"id":256,"date":"2008-04-08T05:04:51","date_gmt":"2008-04-08T10:04:51","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/2008\/04\/08\/how-to-draw-a-spiral\/"},"modified":"2009-08-14T19:30:00","modified_gmt":"2009-08-15T00:30:00","slug":"how-to-draw-a-spiral","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2008\/04\/08\/how-to-draw-a-spiral\/","title":{"rendered":"How to Draw a Spiral"},"content":{"rendered":"

This tutorial covers the basic concepts needed to draw a simple spiral with ActionScript. A “simple spiral” or an “Archimedean spiral” is created by moving ‘away<\/em> from’ and ‘around<\/em>‘ a central point at a constant additive rate. If that sounds a bit foreign to you, don’t worry it’s nothing new. If you’ve coiled a hose or rope on a flat surface, you have experience working with Archimedean spirals.<\/p>\n

\"Archimedean
(Photo by Paul Needham<\/a>)<\/p>\n

The most notable characteristic of the simple spiral above is that each coil (a full rotation around center) will always increase the spiral’s radius by the same amount (the width of the rope).<\/p>\n

Now that you understand what a simple spiral is, I’d like to jump ahead a bit and show you the final state of our code:<\/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> spiral(<\/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 step away from center for each side.<\/span>
\n        var<\/span> awayStep = radius\/<\/span>sides;
\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 = i *<\/span> awayStep;
\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>
\n\/\/<\/span>
\n\/\/ spiral(centerX, centerY, radius, sides, coils, rotation).<\/span>
\n\/\/<\/span>
\n\/\/ Big center spirals.<\/span>
\nlineStyle<\/span>(<\/span>27<\/span>, 0x0000FF)<\/span>;\/\/ Blue.<\/span>
\nspiral(<\/span>250<\/span>, 210<\/span>, 200<\/span>, 200<\/span>, 4<\/span>, 0<\/span>)<\/span>;
\nlineStyle<\/span>(<\/span>27<\/span>, 0xFF0000)<\/span>;\/\/ Red.<\/span>
\nspiral(<\/span>250<\/span>, 210<\/span>, 127<\/span>, 200<\/span>, 2.5<\/span>, .5)<\/span>;
\n\/\/<\/span>
\n\/\/ Small corner spirals.<\/span>
\nlineStyle<\/span>(<\/span>4<\/span>, 0xFF00FF)<\/span>;\/\/            Magenta.<\/span>
\nspiral(<\/span>50<\/span>, 50<\/span>, 50<\/span>, 200<\/span>, 6<\/span>, 0<\/span>)<\/span>;\/\/       Big.<\/span>
\nspiral(<\/span>125<\/span>, 50<\/span>, 25<\/span>, 200<\/span>, 2<\/span>, .5)<\/span>;\/\/     Small.<\/span>
\nlineStyle<\/span>(<\/span>4<\/span>, 0x00FFFF)<\/span>;\/\/            Cyan.<\/span>
\nspiral(<\/span>450<\/span>, 50<\/span>, 50<\/span>, 200<\/span>, -6<\/span>, .5)<\/span>;\/\/    Big.<\/span>
\nspiral(<\/span>375<\/span>, 50<\/span>, 25<\/span>, 200<\/span>, -2<\/span>, 0<\/span>)<\/span>;\/\/     Small.<\/span>
\nlineStyle<\/span>(<\/span>4<\/span>, 0xFFFF00)<\/span>;\/\/            Yellow.<\/span>
\nspiral(<\/span>50<\/span>, 350<\/span>, 50<\/span>, 200<\/span>, -4<\/span>, 0<\/span>)<\/span>;\/\/     Big.<\/span>
\nspiral(<\/span>125<\/span>, 350<\/span>, 25<\/span>, 200<\/span>, -3<\/span>, .5)<\/span>;\/\/   Small.<\/span>
\nlineStyle<\/span>(<\/span>4<\/span>, 0x00FF00)<\/span>;\/\/            Green.<\/span>
\nspiral(<\/span>450<\/span>, 350<\/span>, 50<\/span>, 200<\/span>, 4<\/span>, .5)<\/span>;\/\/    Big.<\/span>
\nspiral(<\/span>375<\/span>, 350<\/span>, 25<\/span>, 200<\/span>, 3<\/span>, 0<\/span>)<\/span>;\/\/     Small.<\/span>
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

As you can see, the “spiral” function accepts arguments for “centerX”, “centerY”, “radius”, “sides”, “coils”, and “rotation”. The only arguments you might have trouble fully understanding are “sides”, “coils” and “rotation”.<\/p>\n