AS3 – Drawing Circles With IGraphicsData

Lately I’ve been working on a game with some of my free time. It’s a slow process made a little bit faster through the use of Box2D, which is a great 2D physics lib. In my game the user controls a robot that wheels around and smashes other robots. I decided that I would write some functions for drawing geometric primitives, and that I would draw everything into one sprite, or two, depending on how many layers I’d need. In an attempt to squeeze out some more frames per second I switched these functions over to use flash 10+ IGraphicsData API. It’s interesting, to say the least. When using the new API we loose the ability to easily draw rectangles and circles. We can still use familiar functions like moveTo, lineTo and curveTo – so I’ve written a function that draws a circle using these. It uses some fun almost calculus [parametrization of a curve in so many points] minus any derivatives or integrals. Is that still calculus? Meh. Here’s what happens:

We create a new GraphicsStroke [the line], a new GraphicsSolidFill [the fill], a new GraphicsPath [the path] and an IGraphicsData Vector to store them all in.

var _stroke :GraphicsStroke         = new GraphicsStroke(1);
    _stroke.fill = new GraphicsSolidFill(0xFF00FF, 1);
var _fill   :GraphicsSolidFill      = new GraphicsSolidFill(0xF0F0F0, 1);
var _path   :GraphicsPath           = new GraphicsPath();
var _graph  :Vector.<IGraphicsData> = new Vector.<IGraphicsData>()

Now what we’ll need to do is populate the path with some commands and some points. To do this, we can use GraphicsPath’s familiar functions moveTo, lineTo and curveTo. These functions will fill path.command and with commands and data, respectively. The parameters to each command are stored in the data array, where as a number representing each command are stored in the command array. You can read more about it here. So here is a function that will fill your path with points and commands to form a circle.

private function r_addCircle(_x:Number, _y:Number, r:Number, path:GraphicsPath, numPoints:int = 8):void
    var twoPI:Number = Math.PI * 2;
    var curve:Number = 1 + 1/(numPoints*1.75);
    path.moveTo((_x + r), _y);
    for (var i:int = 1; i <= numPoints; i++)
        var th  :Number = twoPI * i/numPoints;
        var thm :Number = twoPI * (i-0.5)/numPoints;
        var px:Number = (_x + r * Math.cos(th));
        var py:Number = (_y + r * Math.sin(th));
        var hx:Number = (_x + r * curve * Math.cos(thm));
        var hy:Number = (_y + r * curve * Math.sin(thm));

        path.curveTo(hx, hy, px, py);

In this function _x and _y represent the center of the circle, r is the radius and path is your GraphicsPath. numPoints refers to the number of points you’d like to use for approximating your circle. The more points, the more “perfect” the circle will look, although more points will tax your frameRate. We can get a pretty nice looking circle with 8 points. 4 looks a little boxy, but around 8 is nice. Experiment. Here’s the next step – we’ll add the points to our path and then add the stroke, fill and path to our Vector and then have a sprite draw our graphics data:

r_addCircle(50, 50, 50, _path, 2);
r_addCircle(150, 50, 50, _path, 4);
r_addCircle(250, 50, 50, _path, 6);
r_addCircle(350, 50, 50, _path, 8);

_graph.push(_stroke, _fill, _path);
var sprite:Sprite = new Sprite();

This should draw 4 circle approximations of different resolution. This is what it looks like:

approximated circles

approximated circles

You can see that as n [numPoints] increases, the closer to an actual circle our object becomes. I hope this entry helps some of you out there save a little time.

Tags: ,

3 Responses to “AS3 – Drawing Circles With IGraphicsData”

  1. One thing I didn’t mention in the post is that using this API helps in speeding up the process of pushing commands to whatever draws the stage every frame. It doesn’t help in actually rendering the stage! So initially you’ll gain a couple frames per second while issuing the commands, rendering those commands every frame will take just as long. Bummer.

  2. Great work. Excellent explanation of what is happening. Easy to read and well written code. Thank you very much for taking the time to put this up I really appreciate it!

  3. Brian Francis Says:

    This is awesome! What about an oval?

Leave a Reply

Follow me on GitHub
Follow me on Google+
Follow me on Twitter
EFNX is proudly powered by WordPress
Entries (RSS) and Comments (RSS).