Basic Circle Drawing ActionScript
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) can be very helpful. In the simplest of terms, drawing a circle can be as easy as counting from 0 to 1.
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.
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.
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?
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, 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 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 from center (y). If you’re at center and wanted to get to 1:30, you’d take a couple steps to the right then a couple steps up (no diagonal steps). That’s the least you need to know about Trigonometry to draw a circle.
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 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.
Believe it or not, we now have enough information to start writing some code.
//
// As discussed above, All we need to know is
// the center of the circle, it's size and the
// number of sides we want to draw.
function drawCircle(centerX, centerY, radius, sides){
//
// Find a point for every "side" of the circle and
// draw a line to it.
for(var i=0; i<=sides; i++){
//
// Pick a point on the circle. The second
// point on a 100 sided circle will be
// point #2 out of 100 or point 2/100.
// The point can be represented as a ratio from 0 to 1.
var pointRatio = i/sides;
//
// Steps is the number of steps you have to take from
// the center to reach your point on the circumference.
// We'll use trigonometry to determine how many steps
// to take in each direction to get to this particular point.
var xSteps = magicTrigFunctionX(pointRatio);
var ySteps = magicTrigFunctionY(pointRatio);
//
// Once you know how many steps to take,
// You need to go to the center then take the right
// number of steps in each direction.
// The radius determines the size of every step taken.
var pointX = centerX + xSteps * radius;
var pointY = centerY + ySteps * radius;
//
// Now that you know where the point is,
// draw a line to it.
this.lineTo(pointX, pointY);
}
}
//
// Set a linestyle so we can see the circle.
lineStyle(0);
//
// Draw a 100 sided circle with a 200 pixel radius.
drawCircle(250, 250, 200, 100);
//
//
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.
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.
In the example code above I wrote:
var xSteps = magicTrigFunctionX(pointRatio);
var ySteps = magicTrigFunctionY(pointRatio);
//
But the eggheads want to see:
var xSteps = Math.cos(pointRatio*2*Math.PI);
var ySteps = Math.sin(pointRatio*2*Math.PI);
//
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:
function magicTrigFunctionX (pointRatio){
return Math.cos(pointRatio*2*Math.PI);
}
function magicTrigFunctionY (pointRatio){
return Math.sin(pointRatio*2*Math.PI);
}
//
Adding the above functions to our previous code and removing all the comments gives us the following:
function magicTrigFunctionX (pointRatio){
return Math.cos(pointRatio*2*Math.PI);
}
function magicTrigFunctionY (pointRatio){
return Math.sin(pointRatio*2*Math.PI);
}
//
function drawCircle(centerX, centerY, radius, sides){
for(var i=0; i<=sides; i++){
var pointRatio = i/sides;
var xSteps = magicTrigFunctionX(pointRatio);
var ySteps = magicTrigFunctionY(pointRatio);
var pointX = centerX + xSteps * radius;
var pointY = centerY + ySteps * radius;
this.lineTo(pointX, pointY);
}
}
//
lineStyle(0);
//
drawCircle(250, 250, 200, 100);
//
Which produces the following SWF file:
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.
function magicTrigFunctionX (pointRatio){
return Math.cos(pointRatio*2*Math.PI);
}
function magicTrigFunctionY (pointRatio){
return Math.sin(pointRatio*2*Math.PI);
}
//
function drawCircle(centerX, centerY, radius, sides){
//
// Move the pen to the first point on the circle.
this.moveTo(centerX + radius, centerY);
//
for(var i=0; i<=sides; i++){
var pointRatio = i/sides;
var xSteps = magicTrigFunctionX(pointRatio);
var ySteps = magicTrigFunctionY(pointRatio);
var pointX = centerX + xSteps * radius;
var pointY = centerY + ySteps * radius;
this.lineTo(pointX, pointY);
}
}
//
lineStyle(0);
//
drawCircle(250, 250, 200, 100);
//
Running the above code produces the following SWF file:
So there you have it. One circle drawn with ActionScript. And all you had to do was count from 0 to 1 (sort of) 😉 .
Update: The next tutorial in this series is How to Draw an Arc with ActionScript.
Comments(29)
RSS Feeds
Thanks, it helped me a lot!!!
I dint understand tht well 🙁
i m askd to do the same coding in vhdl,can any1 help me out plsssss.
kind of you,good logic
thanks
shravan
And all this because in ActionScript there is no DrawCircle/Ellipse function 😀
Thanks for this code. Helped me out with testing some JavaScript I was writing to draw UML associations using this http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm neat little library.
Cheers
Chris
I was curious, how did you draw that blue circle that is the “main image” for this tutorial?
I’m curious how you got a gradient like that inside of the circle.
Andreas
The blue circle image at the start of this tutorial uses a “conic” or “angle” gradient and was created using code that can be found in this Conic Angle Gradient Tutorial.
Can I make a question? I like this game: “2-many-bugs” realized in flash… …objetive of this game is draw a circle around 2 equal bugs, draw a circle with your mouse around 2 movieclips, how is posible to detect when the mouse trace a circle around a mc in Action Script?
Thank in advance, sorry my english
“!keep evolving”
hey pixelWit,
thanks a ton for posting this tutorial, but I do have a separate (albeit slightly related question).
I’m looking to create a custom ‘water ripple’ effect that makes a ring (a large circle, with a smaller circle in the middle cut out) that references the layer below it for color data so it can do different things with it.
any idea where I should start looking for assistance on this? not looking to have my work done for me, of course.
thanks again for the great tutorial. cheers.
@Rodrigo,
//
function magicTrigFunctionX (pointRatio){
return Math.cos(pointRatio*2*Math.PI);
}
function magicTrigFunctionY (pointRatio){
return Math.sin(pointRatio*2*Math.PI);
}
//
function drawCircle(centerX, centerY, radius, sides, rot){
//
// Move the pen to the first point on the circle.
var xSteps = magicTrigFunctionX(rot);
var ySteps = magicTrigFunctionY(rot);
var pointX = centerX + xSteps * radius;
var pointY = centerY + ySteps * radius;
var pointRatio;
this.moveTo(pointX, pointY);
//
for(var i=0; i<=sides; i++){
pointRatio = i/sides + rot;
xSteps = magicTrigFunctionX(pointRatio);
ySteps = magicTrigFunctionY(pointRatio);
pointX = centerX + xSteps * radius;
pointY = centerY + ySteps * radius;
this.lineTo(pointX, pointY);
}
}
//
lineStyle(0);
//
drawCircle(250, 250, 200, 3, 1/12);
//
//
very interesting and helpful, thank you for the detailed explanation. It would also be helpful if we could define the rotation, like if i have a triangle it looks like it is “laying down” instead of “standing up”.
Not bad…but have you tried looking into drawing circles and ellipses using the native curveTo method instead…
[…] This tutorial uses some of the code and concepts from my previous Color Gradient and Circle Drawing tutorials so I highly recommend checking them out for a more in-depth explanation of the following […]
[…] Making the transition from drawing circles to drawing ovals is pretty simple but when you need to go from drawing ovals to drawing rotated ovals, you might run into a few problems […]