# Dynamically drawing a circle

**URL:** <https://forum.kirupa.com/t/dynamically-drawing-a-circle/19142>\
**Category:** Uncategorized\
**Created:** [April 24, 2003, 4:51pm UTC](https://forum.kirupa.com/t/dynamically-drawing-a-circle/19142 "2003-04-24T16:51:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![andr\_in](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/andr_in/32/37_2.png) [@andr\_in](https://forum.kirupa.com/u/andr_in)\
**Post date:** [April 24, 2003, 4:51pm UTC](https://forum.kirupa.com/t/dynamically-drawing-a-circle/19142/1 "2003-04-24T16:51:16Z")

</div>

ok ilyas? lost?  
How can I draw a simple circle using actionscript?  
Try not to make it too confusin’ =)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 24, 2003, 7:27pm UTC](https://forum.kirupa.com/t/dynamically-drawing-a-circle/19142/2 "2003-04-24T19:27:12Z")

</div>

[http://actionscript-toolbox.com/flashmx\_drawingtools.php](http://actionscript-toolbox.com/flashmx_drawingtools.php) 😉

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 24, 2003, 8:10pm UTC](https://forum.kirupa.com/t/dynamically-drawing-a-circle/19142/3 "2003-04-24T20:10:15Z")

</div>

that’s a good link but I still can’t see anything about drawing a circle! :-\

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 24, 2003, 8:16pm UTC](https://forum.kirupa.com/t/dynamically-drawing-a-circle/19142/4 "2003-04-24T20:16:26Z")

</div>

**Drawing curves and circles**

To draw a curve with the Flash drawing API, you use the curveTo method, which requires a control point and an anchor (endpoint). The control point is the “handle” in a quadratic bezier curve which bends the curve to the desired shape. Because there is only one handle per curve instead of two (as in a cubic bezier), some manipulating must be done to correctly draw arcs that are greater than about 45 degrees.

For angles of 45 degrees (an arbitrary point based on experimentation and the fact that it’s a multiple of 360) and less, the control point which provides the best arc for a given angle theta is x=r, y=r \* tan(theta/2). You can see that this is so by messing around with the control point on [this page](http://actionscript-toolbox.com/findanchor.php).

Using that control point for a 45-degree arc, we can connect eight such arcs to form a circle (45 \* 8 = 360) with its center at x=100, y=100 and radius = 80 pixels:

```auto
MovieClip.prototype.drawCircle = function(r, x, y) {
this.moveTo(x+r, y);
a = Math.tan(22.5 * Math.PI/180);
for (var angle = 45; angle<=360; angle += 45) {
var endx = r*Math.cos(angle*Math.PI/180);
var endy = r*Math.sin(angle*Math.PI/180);
var cx =endx + r*a*Math.cos((angle-90)*Math.PI/180);
var cy =endy + r*a*Math.sin((angle-90)*Math.PI/180);
this.curveTo(cx+x, cy+y, endx+x, endy+y);
}
}
var c80 = this.createEmptyMovieClip("c", 1);
c80.lineStyle(3, 0xaaaaaa, 100);
c80.beginFill(0xcccccc, 100);
c80.drawCircle(80, 100, 100);
c80.endFill();

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 24, 2003, 9:02pm UTC](https://forum.kirupa.com/t/dynamically-drawing-a-circle/19142/5 "2003-04-24T21:02:55Z")

</div>

see these link: 🙂

[http://www.kirupaforum.com/forums/showthread.php?s=&threadid=11548&highlight=application+programming+interface](http://www.kirupaforum.com/forums/showthread.php?s=&threadid=11548&highlight=application+programming+interface)

[http://www.flashdevils.com/showthread.php?s=&threadid=687&highlight=draw+circle](http://www.flashdevils.com/showthread.php?s=&threadid=687&highlight=draw+circle)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 24, 2003, 9:04pm UTC](https://forum.kirupa.com/t/dynamically-drawing-a-circle/19142/6 "2003-04-24T21:04:01Z")

</div>

Nice! =)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 24, 2003, 9:20pm UTC](https://forum.kirupa.com/t/dynamically-drawing-a-circle/19142/7 "2003-04-24T21:20:01Z")

</div>

Originally by Sen…

[AS]MovieClip.prototype.drawCircle = function (x,y,r) {  
var c1=r\*(Math.SQRT2-1);  
var c2=r\*Math.SQRT2/2;  
this.lineStyle(1, 0x000000, 100);  
this.moveTo(x+r,y);  
this.curveTo(x+r,y+c1,x+c2,y+c2);  
this.curveTo(x+c1,y+r,x,y+r);  
this.curveTo(x-c1,y+r,x-c2,y+c2);  
this.curveTo(x-r,y+c1,x-r,y);  
this.curveTo(x-r,y-c1,x-c2,y-c2);  
this.curveTo(x-c1,y-r,x,y-r);  
this.curveTo(x+c1,y-r,x+c2,y-c2);  
this.curveTo(x+r,y-c1,x+r,y);  
return this;  
}[/AS]

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 25, 2003, 11:51am UTC](https://forum.kirupa.com/t/dynamically-drawing-a-circle/19142/8 "2003-04-25T11:51:58Z")

</div>

niiicee! I asked this cuz I have no idea what cos,sin and tan are! I think I’ll use the one lost posted! Works like a charm! thx