How to Draw a Spiral
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 from’ and ‘around‘ 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.
(Photo by Paul Needham)
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).
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:
//
// centerX-- X origin of the spiral.
// centerY-- Y origin of the spiral.
// radius--- Distance from origin to outer arm.
// sides---- Number of points or sides along the spiral's arm.
// coils---- Number of coils or full rotations. (Positive numbers spin clockwise, negative numbers spin counter-clockwise)
// rotation- Overall rotation of the spiral. ('0'=no rotation, '1'=360 degrees, '180/360'=180 degrees)
//
function spiral(centerX, centerY, radius, sides, coils, rotation){
//
with(this){// Draw within the clip calling the function.
//
// Start at the center.
moveTo(centerX, centerY);
//
// How far to step away from center for each side.
var awayStep = radius/sides;
//
// How far to rotate around center for each side.
var aroundStep = coils/sides;// 0 to 1 based.
//
// Convert aroundStep to radians.
var aroundRadians = aroundStep * 2 * Math.PI;
//
// Convert rotation to radians.
rotation *= 2 * Math.PI;
//
// For every side, step around and away from center.
for(var i=1; i<=sides; i++){
//
// How far away from center
var away = i * awayStep;
//
// How far around the center.
var around = i * aroundRadians + rotation;
//
// Convert 'around' and 'away' to X and Y.
var x = centerX + Math.cos(around) * away;
var y = centerY + Math.sin(around) * away;
//
// Now that you know it, do it.
lineTo(x, y);
}
}
}
//
//
//
// spiral(centerX, centerY, radius, sides, coils, rotation).
//
// Big center spirals.
lineStyle(27, 0x0000FF);// Blue.
spiral(250, 210, 200, 200, 4, 0);
lineStyle(27, 0xFF0000);// Red.
spiral(250, 210, 127, 200, 2.5, .5);
//
// Small corner spirals.
lineStyle(4, 0xFF00FF);// Magenta.
spiral(50, 50, 50, 200, 6, 0);// Big.
spiral(125, 50, 25, 200, 2, .5);// Small.
lineStyle(4, 0x00FFFF);// Cyan.
spiral(450, 50, 50, 200, -6, .5);// Big.
spiral(375, 50, 25, 200, -2, 0);// Small.
lineStyle(4, 0xFFFF00);// Yellow.
spiral(50, 350, 50, 200, -4, 0);// Big.
spiral(125, 350, 25, 200, -3, .5);// Small.
lineStyle(4, 0x00FF00);// Green.
spiral(450, 350, 50, 200, 4, .5);// Big.
spiral(375, 350, 25, 200, 3, 0);// Small.
//
//
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”.
- Sides: If you’ve read my previous Circle Drawing Tutorial you understand that Flash approximates circles and arcs by connecting a series of straight lines. The “sides” argument determines how many straight lines will be used to approximate our spiral.
- Rotation: The “rotation” argument controls where the outer arm of the spiral will be in relation to center. To avoid arbitrary units of measure, the rotation argument accepts values between 0 and 1 (zero and one) where 0 = no rotation and 1 = 360 degrees of rotation.
- Coils: The “coils” or windings of the spiral determine the amount of times the spiral will wrap around center. “Coils” can be any real number, positive numbers produce clockwise spirals and negative numbers produce counter-clockwise spirals.
Once you’re familiar with the arguments of the spiral function, it’s a little easier to visualize what’s happening in the rest of the code.
In my mind I picture a straight line the length of the spiral’s radius. I place one end of the line at the center point of the spiral and rotate the line until it is at the desired “rotation”. I then divide the the line into segments of equal length (awayStep) with one segment for every side of the spiral. From that point I start rotating all of the slices except the center one a set amount (aroundStep). I exclude the center-most segment and rotate all of the outer segments the same amount again. I repeat this process until I have excluded all segments from the center out, connecting each line segment’s end to the previous segment’s beginning.
Here’s an animation to illustrate the concept:
Hopefully that's enough information to get you started using ActionScript to draw some spirals of your own. Have fun.
Comments(8)
RSS Feeds
Thanks for the code. Any idea how to animate like rotating the spiral?
Thanks for the tutorial! I’m a little confused on how the program would be able to draw more than one coil. Wouldn’t you need the for loop to repeat and go around again for each layer of coil in the spiral?
Think about the “aroundStep” variable. It basically stores how many degrees you turn around center for every step in the loop. If aroundStep is 1/4 turn and you have 8 sides (8 steps in the loop), you will make two coils (8 * .25 = 2).
Oh, of course! My simple mind was ignoring the idea of rotating beyond 360 degrees >_<
OP, Thanks…helped a lot.
[…] http://www.pixelwit.com/blog/2008/04/how-to-draw-a-spiral/ […]
Cool. Thanks!
[…] a logarithmic spiral is very similar to drawing a simple spiral so I strongly suggest you read my Simple Spiral Tutorial to get acquainted with the basic concepts […]