{"id":86,"date":"2007-06-29T06:00:22","date_gmt":"2007-06-29T11:00:22","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/2007\/06\/29\/basic-circle-drawing-actionscript\/"},"modified":"2009-08-13T22:23:52","modified_gmt":"2009-08-14T03:23:52","slug":"basic-circle-drawing-actionscript","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2007\/06\/29\/basic-circle-drawing-actionscript\/","title":{"rendered":"Basic Circle Drawing ActionScript"},"content":{"rendered":"

\"\"<\/p>\n

Do you know how to draw a circle with ActionScript code? It’s a handy thing to know. You can use it to draw pie charts, equilateral polygons, analog clock faces… you can even use it to script motion. If you use Flash for any type of drawing purposes, knowing the math behind the circles (trigonometry<\/a>) can be very helpful. In the simplest of terms, drawing a circle can be as easy as counting from 0 to 1.<\/p>\n

When drawing a circle, you must place your pen on the paper somewhere to start. Before you do this, you are at point 0 (zero), meaning you haven’t drawn anything. And then once you finish drawing your circle you will have reached your goal. You will have drawn 1 (one) circle. So to draw a circle, you must go through the points between 0 and 1.<\/p>\n

To get from 0 to 1 will take a certain number of steps. How many is up to you. The number of steps determines the number of sides your “polygon” will have. “Polygon?” you say, “I thought we were drawing a circle.” Well sure, theoretically. Circles have an infinite number of points around their circumference, but we don’t have an infinite amount of time to plot out every possible point, so we’re going to approximate our circle by using a finite set of points. When we connect these points we will have a regular polygon. For this example I’m going to take 100 steps from 0 to 1 which will make a 100 sided polygon that is going to look a LOT like a circle.<\/p>\n

So far we’ve established that drawing a circle requires you to start at 0, go through “some steps”, and then you’ll end up with 1 circle. But what are the steps?<\/p>\n

This is where the magic of computers comes in handy. Trigonometry is a big hairy spider with numbers and fangs. It’s scary, hard and not for the timid. But if you’re brave enough to try taming it<\/a>, you’ll come to understand it’s just a spider and easily squashed. Whether you battle the Trigonometry monster now or later is up to you but you need to understand this simple concept, all points on the circle’s edge are measured from the center of the circle. If you’re at the center of a big clock face and want to get to 3 o’clock you need to take a few steps to the right<\/em> of center (x). If you’re at the center of the clock and want to get to 12 o’clock you need to take a few steps up<\/em> from center (y). If you’re at center and wanted to get to 1:30, you’d take a couple steps to the right<\/em> then a couple steps up<\/em> (no diagonal steps). That’s the least<\/strong> you need to know about Trigonometry to draw a circle.<\/p>\n

So hopefully you understand that you need to know where the center of your circle is. For this example I’ll pick a center X 0f 250 and a center Y of 250. The next thing you need to know is the radius<\/strong> of your circle, or as in my previous example, the number of steps it takes to get from the center of the clock to 12 o’clock. For this example our circle will have a radius of 200 pixels.<\/p>\n

Believe it or not, we now have enough information to start writing some code.<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\n\/\/ As discussed above, All we need to know is<\/span>
\n\/\/ the center of the circle, it's size and the<\/span>
\n\/\/ number of sides we want to draw.<\/span>
\nfunction<\/span> drawCircle(<\/span>centerX, centerY, radius, sides)<\/span>{<\/span>
\n    \/\/<\/span>
\n    \/\/ Find a point for every "side" of the circle and<\/span>
\n    \/\/ draw a line to it.<\/span>
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>=sides; i++)<\/span>{<\/span>
\n        \/\/<\/span>
\n        \/\/ Pick a point on the circle.  The second<\/span>
\n        \/\/ point on a 100 sided circle will be <\/span>
\n        \/\/ point #2 out of 100 or point 2\/100.<\/span>
\n        \/\/ The point can be represented as a ratio from 0 to 1.<\/span>
\n        var<\/span> pointRatio = i\/<\/span>sides;
\n        \/\/<\/span>
\n        \/\/ Steps is the number of steps you have to take from<\/span>
\n        \/\/ the center to reach your point on the circumference.<\/span>
\n        \/\/ We'll use trigonometry to determine how many steps<\/span>
\n        \/\/ to take in each direction to get to this particular point.<\/span>
\n        var<\/span> xSteps = magicTrigFunctionX(<\/span>pointRatio)<\/span>;
\n        var<\/span> ySteps = magicTrigFunctionY(<\/span>pointRatio)<\/span>;
\n        \/\/<\/span>
\n        \/\/ Once you know how many steps to take,<\/span>
\n        \/\/ You need to go to the center then take the right<\/span>
\n        \/\/ number of steps in each direction.<\/span>
\n        \/\/ The radius determines the size of every step taken.<\/span>
\n        var<\/span> pointX = centerX + xSteps *<\/span> radius;
\n        var<\/span> pointY = centerY + ySteps *<\/span> radius;
\n        \/\/<\/span>
\n        \/\/ Now that you know where the point is,<\/span>
\n        \/\/ draw a line to it.<\/span>
\n        this<\/span>.lineTo<\/span>(<\/span>pointX, pointY)<\/span>;
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\n\/\/ Set a linestyle so we can see the circle.<\/span>
\nlineStyle<\/span>(<\/span>0<\/span>)<\/span>;
\n\/\/<\/span>
\n\/\/ Draw a 100 sided circle with a 200 pixel radius.<\/span>
\ndrawCircle(<\/span>250<\/span>, 250<\/span>, 200<\/span>, 100<\/span>)<\/span>;
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

Now if you run the above code you’ll quickly see a problem. It doesn’t work. This is because the functions called “magicTrigFunctionX” or “magicTrigFunctionY” don’t exist. There are comparable functions (Math.cos and Math.sin), but they’re not quite magic enough for my liking. You see, back before there were computers, the eggheads needed something called “radians” to figure out how many steps it takes to get to each point on a circle. So to be nice, people used to convert their nice 0-to-1 ratios to radians (big ugly irrational numbers) so the eggheads would have an easier job and quit complaining so much.<\/p>\n

But converting nice and neat 0-to-1-ratios to irrational numbers sounds complicated, is it? Not really, all you need to do is multiply your 0-to-1-ratio by 2 and then multiply it by Math.PI. Why 2? Why Math.PI? Just because it makes the eggheads job a little easier. But now we have computers and they don’t complain nearly as much as eggheads, so there’s no real reason to do this anymore, we’ll let the computer do it for us.<\/p>\n

In the example code above I wrote:<\/p>\n

\/\/<\/span>
\nvar<\/span> xSteps = magicTrigFunctionX(<\/span>pointRatio)<\/span>;
\nvar<\/span> ySteps = magicTrigFunctionY(<\/span>pointRatio)<\/span>;
\n\/\/<\/span><\/div><\/div>\n

But the eggheads want to see:<\/p>\n

\/\/<\/span>
\nvar<\/span> xSteps = Math<\/span>.cos<\/span>(<\/span>pointRatio*<\/span>2<\/span>*<\/span>Math<\/span>.PI<\/span>)<\/span>;
\nvar<\/span> ySteps = Math<\/span>.sin<\/span>(<\/span>pointRatio*<\/span>2<\/span>*<\/span>Math<\/span>.PI<\/span>)<\/span>;
\n\/\/<\/span><\/div><\/div>\n

If you want to be a conformist you can use the code above and all will be fine. You’ll be using Flash’s native functions and the eggheads won’t laugh at you for using “magic” functions. If you’d like to make things a little easier, you might consider making some custom functions like this:<\/p>\n

\/\/<\/span>
\nfunction<\/span> magicTrigFunctionX (<\/span>pointRatio)<\/span>{<\/span>
\n    return<\/span> Math<\/span>.cos<\/span>(<\/span>pointRatio*<\/span>2<\/span>*<\/span>Math<\/span>.PI<\/span>)<\/span>;
\n}<\/span>
\nfunction<\/span> magicTrigFunctionY (<\/span>pointRatio)<\/span>{<\/span>
\n    return<\/span> Math<\/span>.sin<\/span>(<\/span>pointRatio*<\/span>2<\/span>*<\/span>Math<\/span>.PI<\/span>)<\/span>;
\n}<\/span>
\n\/\/<\/span><\/div><\/div>\n

Adding the above functions to our previous code and removing all the comments gives us the following:<\/p>\n

\/\/<\/span>
\nfunction<\/span> magicTrigFunctionX (<\/span>pointRatio)<\/span>{<\/span>
\n    return<\/span> Math<\/span>.cos<\/span>(<\/span>pointRatio*<\/span>2<\/span>*<\/span>Math<\/span>.PI<\/span>)<\/span>;
\n}<\/span>
\nfunction<\/span> magicTrigFunctionY (<\/span>pointRatio)<\/span>{<\/span>
\n    return<\/span> Math<\/span>.sin<\/span>(<\/span>pointRatio*<\/span>2<\/span>*<\/span>Math<\/span>.PI<\/span>)<\/span>;
\n}<\/span>
\n\/\/<\/span>
\nfunction<\/span> drawCircle(<\/span>centerX, centerY, radius, sides)<\/span>{<\/span>
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>=sides; i++)<\/span>{<\/span>
\n        var<\/span> pointRatio = i\/<\/span>sides;
\n        var<\/span> xSteps = magicTrigFunctionX(<\/span>pointRatio)<\/span>;
\n        var<\/span> ySteps = magicTrigFunctionY(<\/span>pointRatio)<\/span>;
\n        var<\/span> pointX = centerX + xSteps *<\/span> radius;
\n        var<\/span> pointY = centerY + ySteps *<\/span> radius;
\n        this<\/span>.lineTo<\/span>(<\/span>pointX, pointY)<\/span>;
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\nlineStyle<\/span>(<\/span>0<\/span>)<\/span>;
\n\/\/<\/span>
\ndrawCircle(<\/span>250<\/span>, 250<\/span>, 200<\/span>, 100<\/span>)<\/span>;
\n\/\/<\/span><\/div><\/div>\n

Which 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

As you can see, there is a slight flaw with the code in that it starts drawing our circle from the default position of (0, 0) then draws a line all the way over to our first point on the circle. To fix this we need to modify the code to start off by moving the pen to the first point on the circle and then drawing the lines to all of the other points.<\/p>\n

\/\/<\/span>
\nfunction<\/span> magicTrigFunctionX (<\/span>pointRatio)<\/span>{<\/span>
\n    return<\/span> Math<\/span>.cos<\/span>(<\/span>pointRatio*<\/span>2<\/span>*<\/span>Math<\/span>.PI<\/span>)<\/span>;
\n}<\/span>
\nfunction<\/span> magicTrigFunctionY (<\/span>pointRatio)<\/span>{<\/span>
\n    return<\/span> Math<\/span>.sin<\/span>(<\/span>pointRatio*<\/span>2<\/span>*<\/span>Math<\/span>.PI<\/span>)<\/span>;
\n}<\/span>
\n\/\/<\/span>
\nfunction<\/span> drawCircle(<\/span>centerX, centerY, radius, sides)<\/span>{<\/span>
\n    \/\/<\/span>
\n    \/\/ Move the pen to the first point on the circle.<\/span>
\n    this<\/span>.moveTo<\/span>(<\/span>centerX + radius,  centerY)<\/span>;
\n    \/\/<\/span>
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>=sides; i++)<\/span>{<\/span>
\n        var<\/span> pointRatio = i\/<\/span>sides;
\n        var<\/span> xSteps = magicTrigFunctionX(<\/span>pointRatio)<\/span>;
\n        var<\/span> ySteps = magicTrigFunctionY(<\/span>pointRatio)<\/span>;
\n        var<\/span> pointX = centerX + xSteps *<\/span> radius;
\n        var<\/span> pointY = centerY + ySteps *<\/span> radius;
\n        this<\/span>.lineTo<\/span>(<\/span>pointX, pointY)<\/span>;
\n    }<\/span>
\n}<\/span>
\n\/\/<\/span>
\nlineStyle<\/span>(<\/span>0<\/span>)<\/span>;
\n\/\/<\/span>
\ndrawCircle(<\/span>250<\/span>, 250<\/span>, 200<\/span>, 100<\/span>)<\/span>;
\n\/\/<\/span><\/div><\/div>\n

Running 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

So there you have it. One circle drawn with ActionScript. And all you had to do was count from 0 to 1 (sort of) \ud83d\ude09 .<\/p>\n

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

Tutorial examining the ActionScript code and concepts needed to plot a series of points around the circumference of a circle. Includes a brief introduction to the concepts of trigonometry.<\/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-86","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\/86","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=86"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}