{"id":89,"date":"2007-07-10T07:45:58","date_gmt":"2007-07-10T12:45:58","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/2007\/07\/10\/draw-an-arc-with-actionscript\/"},"modified":"2009-08-13T22:33:11","modified_gmt":"2009-08-14T03:33:11","slug":"draw-an-arc-with-actionscript","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2007\/07\/10\/draw-an-arc-with-actionscript\/","title":{"rendered":"Draw an Arc with ActionScript"},"content":{"rendered":"

Drawing an arc (a segment of a circle’s circumference) is very similar to drawing a complete circle<\/a>. Just like drawing a circle, drawing an arc requires you to specify the center, the radius, and the number of steps to take from the first point to the last. But drawing an arc also requires additional information such as the angle of the first point on the arc, the direction (clockwise or counter-clockwise) to travel around the circle’s circumference, and the angle of the last point on the arc.<\/p>\n

So the arguments in our “drawArc” function might look something like this:<\/p>\n

\/\/<\/span>
\nfunction<\/span> drawArc (<\/span>centerX, centerY, radius, startAngle, endAngle, direction, steps)<\/span>{<\/span>
\n\/\/<\/span><\/div><\/div>\n

That isn’t too bad, but it could be better. The “endAngle” and the “direction” arguments could be combined into one “arcAngle” argument. That way we can say, “Start at an angle of 45 degrees then sweep counter-clockwise 90 degrees” rather than, “Start at an angle of 45 degrees then go counter-clockwise until you get to 315 degrees.” Our modified arguments would look like this:<\/p>\n

\/\/<\/span>
\nfunction<\/span> drawArc (<\/span>centerX, centerY, radius, startAngle, arcAngle, steps)<\/span>{<\/span>
\n\/\/<\/span><\/div><\/div>\n

If you read my previous article<\/a> you probably understand that drawing a circle involves moving through a series of points and that each point is described by its angle from center. The angle can be described using degrees, radians or a ratio. I prefer using a ratio from 0 to 1 as it’s simple and easily converted to any other unit of measurement such as degrees or radians.<\/p>\n

Example:<\/strong> A quarter of a full rotation can be represented in any number of ways: 90 degrees, 25%, 1\/2 Math.PI radians, or as .25 when expressed as a ratio from 0 to 1. Using a ratio has the benefit of abstracting your data and removing “arbitrary” numbers such as 360, 100, 2*Math.PI, 2 to the 64th power, etc. To convert from a ratio to any other unit of measure, simply multiply the ratio times the number of units in one full rotation.<\/p><\/blockquote>\n

Now that we have our arguments all set up and know how they’ll be formatted, it’s time to move on to writing the actual guts of the code which will be responsible for drawing the arc. Using the knowledge gained in the previous circle article<\/a> you should understand how to plot any point on a circle’s circumference as long as you know its angle from center. Since we can draw any point at a given angle and we know the arguments we’ll be using, writing the “drawArc” function is as easy as determining the angle of each point on the arc and then plotting its position.<\/p>\n

\/\/<\/span>
\n\/\/ Angles are expressed as a number between 0 and 1.  .25 = 90 degrees.<\/span>
\n\/\/ If you prefer using degrees, write 90 degrees like so "90\/360".<\/span>
\nfunction<\/span> drawArc(<\/span>centerX, centerY, radius, startAngle, arcAngle, steps)<\/span>{<\/span>
\n    \/\/<\/span>
\n    \/\/ For convenience, store the number of radians in a full circle.<\/span>
\n    var<\/span> twoPI = 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n    \/\/<\/span>
\n    \/\/ To determine the size of the angle between each point on the<\/span>
\n    \/\/ arc, divide the overall angle by the total number of points.<\/span>
\n    var<\/span> angleStep = arcAngle\/<\/span>steps;
\n    \/\/<\/span>
\n    \/\/ Determine coordinates of first point using basic circle math.<\/span>
\n    var<\/span> xx = centerX + Math<\/span>.cos<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> radius;
\n    var<\/span> yy = centerY + Math<\/span>.sin<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> radius;
\n    \/\/<\/span>
\n    \/\/ Move to the first point.<\/span>
\n    moveTo<\/span>(<\/span>xx, yy)<\/span>;
\n    \/\/<\/span>
\n    \/\/ Draw a line to each point on the arc.<\/span>
\n    for<\/span>(<\/span>var<\/span> i=1<\/span>; i<<\/span>=steps; i++)<\/span>{<\/span>
\n        \/\/<\/span>
\n        \/\/ Increment the angle by "angleStep".<\/span>
\n        var<\/span> angle = startAngle + i *<\/span> angleStep;
\n        \/\/<\/span>
\n        \/\/ Determine next point's coordinates using basic circle math.<\/span>
\n        xx = centerX + Math<\/span>.cos<\/span>(<\/span>angle *<\/span> twoPI)<\/span> *<\/span> radius;
\n        yy = centerY + Math<\/span>.sin<\/span>(<\/span>angle *<\/span> twoPI)<\/span> *<\/span> radius;
\n        \/\/<\/span>
\n        \/\/ Draw a line to the next point.<\/span>
\n        lineTo<\/span>(<\/span>xx, yy)<\/span>;
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\n\/\/ Set a line style so we can see what we are drawing.<\/span>
\nlineStyle<\/span>(<\/span>0<\/span>, 0xFF0000)<\/span>;
\n\/\/<\/span>
\n\/\/ Draw an arc with a center of (250, 250) and a radius of 200<\/span>
\n\/\/ that starts at an angle of 45 degrees then rotates counter-<\/span>
\n\/\/ clockwise 90 degrees.  We'll span the arc with 20 evenly spaced points.<\/span>
\ndrawArc(<\/span>250<\/span>, 250<\/span>, 200<\/span>, 45<\/span>\/<\/span>360<\/span>, -90<\/span>\/<\/span>360<\/span>, 20<\/span>)<\/span>;
\n\/\/<\/span><\/div><\/div>\n

The above code produces the following SWF file:<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

That may or may not be what you were expecting to see. The thing to note about the above SWF is that the point with no angle of rotation (0 degrees) is at the 3 o'clock position. Moving the the angle to better suit your needs is a very simple matter. If you want the point with no rotation to be at 12 o'clock you subtract .25 (a quarter of a turn) from your start angle like so:<\/p>\n

\/\/<\/span>
\nfunction<\/span> drawArc(<\/span>centerX, centerY, radius, startAngle, arcAngle, steps)<\/span>{<\/span>
\n    \/\/<\/span>
\n    \/\/ Rotate the point of 0 rotation 1\/4 turn counter-clockwise.<\/span>
\n    startAngle -= .25;
\n    \/\/<\/span>
\n    var<\/span> twoPI = 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
\n    var<\/span> angleStep = arcAngle\/<\/span>steps;
\n    var<\/span> xx = centerX + Math<\/span>.cos<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> radius;
\n    var<\/span> yy = centerY + Math<\/span>.sin<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> radius;
\n    moveTo<\/span>(<\/span>xx, yy)<\/span>;
\n    for<\/span>(<\/span>var<\/span> i=1<\/span>; i<<\/span>=steps; i++)<\/span>{<\/span>
\n        var<\/span> angle = startAngle + i *<\/span> angleStep;
\n        xx = centerX + Math<\/span>.cos<\/span>(<\/span>angle *<\/span> twoPI)<\/span> *<\/span> radius;
\n        yy = centerY + Math<\/span>.sin<\/span>(<\/span>angle *<\/span> twoPI)<\/span> *<\/span> radius;
\n        lineTo<\/span>(<\/span>xx, yy)<\/span>;
\n    }<\/span>
\n}<\/span>
\nlineStyle<\/span>(<\/span>0<\/span>, 0xFF0000)<\/span>;
\ndrawArc(<\/span>250<\/span>, 250<\/span>, 200<\/span>, 45<\/span>\/<\/span>360<\/span>, -90<\/span>\/<\/span>360<\/span>, 20<\/span>)<\/span>;
\n\/\/<\/span><\/div><\/div>\n

The above code produces the following SWF:<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

So there you have it. All the code needed to draw an arc or plot the points along a segment of a circle's circumference. If you're looking for an easy challenge, try modifying the code so it draws a wedge (like a slice of pie) rather than an arc.<\/p>\n

Update<\/strong>: The next tutorial in this series is How to Swing a Pendulum Arc<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

An in-depth ActionScript tutorial explaining the code and concepts needed to draw an arc or segment of a circle. Handy for making anything from pie charts to motion paths.<\/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":[23,45,36,37],"class_list":["post-89","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript","tag-draw","tag-swfs","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/89","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=89"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/89\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}