Tutorial: Polar Coordinate Plotting in Actionscript

A long, long time ago someone requested that I post a tutorial based on some polar coordinate experiments I was doing. I think it's about time to get this post published.
As usual, if you are just interested in the code, you can skip straight to the source.

Polar Coordinate Basics

In Flash, like most other graphics applications, elements are positioned using the Cartesian coordinate system. While you may not be familiar with the name, you are probably familiar with the way it works. Location coordinates are set using x and y positions. "x" represents a horizontal offset from the origin (top left corner of the screen), and "y" represents the vertical offset from the origin.

The polar coordinate system also uses two values, r and θ (theta). "r" is the radial distance from the origin, and "θ" is the angular offset from 0 (a line going straight up from the origin). The following image shows the differences between the two coordinate systems.

Plotting a point using cartesian and polar coordinates.

That's all the explaining of the two coordinate systems that I'll waste your time with here. If you'd like to learn more about them, you can consult Wikipedia.

  • http://en.wikipedia.org/wiki/Polar_coordinate_system
  • http://en.wikipedia.org/wiki/Cartesian_coordinate_system
    • So why do we care? When positioning things in Flash, it is usually easier to use the default Cartesian (x, y) system. However, for positioning objects that rotate around a fixed point, the Polar Coordinate system is much more efficient.

      For example, here are two ways to move an object in a circle around the screen. One uses Cartesian coordinates and one uses Polar coordinates.

      // Cartesian coordinate circle
      obj.x = radius * cos(t);
      obj.y = radius * sin(t);
      t += increment;
      
      // Polar coordinate circle
      obj.theta += increment;

      As you can see the code is much simpler in the Polar coordinate example. We didn't have to deal with cos or sin, and we only had to change one value of the object (θ) since the radius of the circle doesn't change. Are you convinced?

      Unfortunately Flash does not directly support Polar coordinate plotting. It's an easy problem to get around, though. For my work, I've created an Actionscript class derived from the Sprite class which adds Polar coordinate functionality. I call it PolarSprite. How's that for creative! I'm not going to pretend that I'm the first person to have done this, or that my class is the most elegant/efficient one out there. But it works great for me.

      How to go Polar

      I'm not going to go into the details of my PolarSprite class. You can look at the source code if you really want to see how it works. However, I will quickly show you the translation from polar coordinates (r, θ) to Cartesian coordinates (x, y).

      x = offset_x + r * Math.cos( theta );
      y = offset_y + r * Math.sin( theta );

      The offsets are used to set the origin of the polar coordinate somewhere away from the top left corner of the screen. Usually, you want the center of the rotation to be in the center of the screen when you have an object orbiting around in a circle.

      Experimenting in Polar

      Now that you know how to translate from the Polar coordinate frame into the Cartesian, the real fun begins. Here is some example AS3 code using the PolarSprite class to make an object move in a simple circle.

      public function PolarCircle(){
        // create and initialize the animation
        inc = 0.1; // how much to rotate each frame
        hero = new PolarSprite();
        hero.SetOrigin(250, 50);
        hero.r = 50; // radius of the circle animation
        hero.addChild(new BigHero()); // BigHero is the flying guy graphic
        hero.addEventListener(Event.ENTER_FRAME, this.Rotate);
        addChild(hero);
      }
      
      private function Rotate(event:Event):void {
        // rotate the image in a circle
        hero.theta += inc;
      }

      And there you go. Flying, polar-coordinate Flash fun. For all my talking, it really isn't that complicated to do. In a later post I'll go over ways to get some really cool variations in your animations, but for now, here's a little teaser.

      Polar Source

      Here are the source files for your downloading pleasure. Feel free to use them however you'd like. And if you really want to make my day, send me a link so I can check out your work. Enjoy!

This entry was posted in actionscript, Flash, Flex, Tutorials and tagged , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Lusy

    wow..great..thanks for sharing! 😉