{"id":748,"date":"2008-12-02T08:00:06","date_gmt":"2008-12-02T13:00:06","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/?p=748"},"modified":"2009-08-15T19:55:37","modified_gmt":"2009-08-16T00:55:37","slug":"drawing-closed-arc-shape","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2008\/12\/02\/drawing-closed-arc-shape\/","title":{"rendered":"Drawing a Closed Arc Shape"},"content":{"rendered":"

This tutorial provides the ActionScript needed to draw a “Closed Arc” which is my way of describing the solid shape created by connecting a pair of concentric arcs with 2 straight lines. Here’s an illustration to explain:<\/p>\n

\"\"<\/p>\n

(If you’re new to drawing arcs I suggest reading my previous circle<\/a> and arc<\/a> tutorials for an introduction to trigonometry in Flash.)<\/p>\n

In my standard arc drawing tutorial<\/a> I explained the following ActionScript code:<\/p>\n

\/\/<\/span>
\nfunction<\/span> drawArc(<\/span>centerX, centerY, radius, startAngle, arcAngle, steps)<\/span>{<\/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 produced this 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

It doesn't look like much. But by looking at the above SWF you can probably deduce all of the steps needed to draw a solid arc:<\/p>\n

\"\"<\/p>\n

    \n
  1. Draw the inner part of the arc in one direction.<\/li>\n
  2. Draw a straight line to the outer part of the arc.<\/li>\n
  3. Draw the outer part of the arc in the opposite direction.<\/li>\n
  4. Draw a straight line back to the inner part of the arc to complete the shape.<\/li>\n<\/ol>\n

    Here you can see how the above ActionScript has been modified to do just that:<\/p>\n

    \/\/<\/span>
    \n\/\/ The DrawSolidArc function takes standard arc drawing<\/span>
    \n\/\/ arguments but the "radius" has been split into 2 different<\/span>
    \n\/\/ variables, "innerRadius" and "outerRadius".<\/span>
    \nfunction<\/span> DrawSolidArc (<\/span>centerX, centerY, innerRadius, outerRadius, startAngle, arcAngle, steps)<\/span>{<\/span>
    \n    \/\/<\/span>
    \n    \/\/ Used to convert angles to radians.<\/span>
    \n    var<\/span> twoPI = 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
    \n    \/\/<\/span>
    \n    \/\/ How much to rotate for each point along the arc.<\/span>
    \n    var<\/span> angleStep = arcAngle\/<\/span>steps;
    \n    \/\/<\/span>
    \n    \/\/ Variables set later.<\/span>
    \n    var<\/span> angle, i, endAngle;
    \n    \/\/<\/span>
    \n    \/\/ Find the coordinates of the first point on the inner arc.<\/span>
    \n    var<\/span> xx = centerX + Math<\/span>.cos<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> innerRadius;
    \n    var<\/span> yy = centerY + Math<\/span>.sin<\/span>(<\/span>startAngle *<\/span> twoPI)<\/span> *<\/span> innerRadius;
    \n    \/\/<\/span>
    \n    \/\/ Store the coordiantes in an object.<\/span>
    \n    var<\/span> startPoint = {<\/span>x:xx, y:yy}<\/span>;
    \n    \/\/<\/span>
    \n    \/\/ Move to the first point on the inner arc.<\/span>
    \n    moveTo<\/span>(<\/span>xx, yy)<\/span>;
    \n    \/\/<\/span>
    \n    \/\/ Draw all of the other points along the inner arc.<\/span>
    \n    for<\/span>(<\/span>i=1<\/span>; i<<\/span>=steps; i++)<\/span>{<\/span>
    \n        angle = (<\/span>startAngle + i *<\/span> angleStep)<\/span> *<\/span> twoPI;
    \n        xx = centerX + Math<\/span>.cos<\/span>(<\/span>angle)<\/span> *<\/span> innerRadius;
    \n        yy = centerY + Math<\/span>.sin<\/span>(<\/span>angle)<\/span> *<\/span> innerRadius;
    \n        lineTo<\/span>(<\/span>xx, yy)<\/span>;
    \n    }<\/span>
    \n    \/\/<\/span>
    \n    \/\/ Determine the ending angle of the arc so you can<\/span>
    \n    \/\/ rotate around the outer arc in the opposite direction.<\/span>
    \n    endAngle = startAngle + arcAngle;
    \n    \/\/<\/span>
    \n    \/\/ Start drawing all points on the outer arc.<\/span>
    \n    for<\/span>(<\/span>i=0<\/span>; i<<\/span>=steps; i++)<\/span>{<\/span>
    \n        \/\/<\/span>
    \n        \/\/ To go the opposite direction, we subtract rather than add.<\/span>
    \n        angle = (<\/span>endAngle - i *<\/span> angleStep)<\/span> *<\/span> twoPI;
    \n        xx = centerX + Math<\/span>.cos<\/span>(<\/span>angle)<\/span> *<\/span> outerRadius;
    \n        yy = centerY + Math<\/span>.sin<\/span>(<\/span>angle)<\/span> *<\/span> outerRadius;
    \n        lineTo<\/span>(<\/span>xx, yy)<\/span>;
    \n    }<\/span>
    \n    \/\/<\/span>
    \n    \/\/ Close the shape by drawing a straight<\/span>
    \n    \/\/ line back to the inner arc.<\/span>
    \n    lineTo<\/span>(<\/span>startPoint.x<\/span>, startPoint.y<\/span>)<\/span>;
    \n}<\/span>
    \n\/\/<\/span>
    \n\/\/ Draw 4 colored arcs around a circle without any overlap.<\/span>
    \nbeginFill<\/span>(<\/span>0xFF0000, 50<\/span>)<\/span>;
    \nDrawSolidArc (<\/span>250<\/span>, 250<\/span>, 80<\/span>, 200<\/span>, 45<\/span>\/<\/span>360<\/span>, -90<\/span>\/<\/span>360<\/span>, 20<\/span>)<\/span>;
    \nbeginFill<\/span>(<\/span>0x00FF00, 50<\/span>)<\/span>;
    \nDrawSolidArc (<\/span>250<\/span>, 250<\/span>, 80<\/span>, 200<\/span>, 135<\/span>\/<\/span>360<\/span>, -90<\/span>\/<\/span>360<\/span>, 20<\/span>)<\/span>;
    \nbeginFill<\/span>(<\/span>0x0000FF, 50<\/span>)<\/span>;
    \nDrawSolidArc (<\/span>250<\/span>, 250<\/span>, 80<\/span>, 200<\/span>, 225<\/span>\/<\/span>360<\/span>, -90<\/span>\/<\/span>360<\/span>, 20<\/span>)<\/span>;
    \nbeginFill<\/span>(<\/span>0xFFFF00, 50<\/span>)<\/span>;
    \nDrawSolidArc (<\/span>250<\/span>, 250<\/span>, 80<\/span>, 200<\/span>, 315<\/span>\/<\/span>360<\/span>, -90<\/span>\/<\/span>360<\/span>, 20<\/span>)<\/span>;
    \n\/\/<\/span>
    \n\/\/<\/span><\/div><\/div>\n

    The preceding ActionScript code produces a series of closed arcs forming a circle. The arcs are drawn with 50% opacity to show that they fit together tightly and without any overlap.<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n","protected":false},"excerpt":{"rendered":"

    This Flash tutorial provides the ActionScript needed to draw a Closed Arc (the solid shape created by connecting a pair of concentric arcs with 2 straight lines).<\/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-748","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\/748","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=748"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/748\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}