Recipe 4.14. Determining Points Along a Circle

Problem

You want to calculate the coordinates of a point along a circle, given the circle's radius and the sweep angle.

Solution

Use the Math.sin( ) and Math.cos( ) methods to calculate the coordinates using basic trigonometric ratios.

Discussion

Finding the coordinates of a point along a circle is easy with some trigonometry. So let's look at the formulas you can use within your ActionScript code and the theory behind them.

Given any point on the Stagea point we'll call p0, with coordinates (x0, y0)plus a distance and the angle from the horizontal, you can find the coordinates of another pointwhich we'll call p1, with coordinates (x1, y1)using some basic trigonometric ratios. The angle is formed between a conceptual line from p0 to p1 and a line parallel to the X axis, as shown in Figure 4-2. The opposite side is the side furthest away from the angle. The adjacent side is the side that forms the angle with the help of the hypotenuse.

Figure 4-2. The angle, adjacent side, opposite side, and hypotenuse of a right triangle

If you know the distance between two points and the angle to the horizontal, as shown in Figure 4-2, you can calculate the X and Y coordinates of the destination point using trigonometric functions. The trigonometric sine of the angle is equal to the ratio of the opposite side over the hypotenuse, like so:

sine(angle) = opposite/hypotenuse

Solving for the opposite side's length, this can be written as:

opposite = sine(angle) * hypotenuse

As you can see in Figure 4-2, the opposite side represents the change in the Y direction.

The trigonometric cosine of the angle is equal to the ratio of the adjacent side over the hypotenuse, like so:

cosine(angle) = adjacent/hypotenuse

Solving for the adjacent side's length, this can be written as:

adjacent = cosine(angle) * hypotenuse

You can see from Figure 4-2 that the adjacent side represents the change in the X direction.

Because the lengths of the opposite and adjacent sides yield the changes in the X and Y directions, by adding the original X and Y coordinates to these values, you can calculate the coordinates of the new point.

So how does this help in determining a point along a circle's perimeter? Figure 4-3, which shows the triangle inscribed within a circle emphasizes the equivalency. The triangle's hypotenuse equates to the circle's radius, and the triangle's angle equates to the sweep angle to the point of interest along the circle's perimeter.

Figure 4-3. Using trigonometry to determine a point along a circle's perimeter

Therefore, the X coordinate of a point along the circle's perimeter is determined by the radius times the cosine of the angle. The Y coordinate is determined by the radius times the sine of the angle. Here is the ActionScript code for finding the coordinates of p1 when the circle's radius and center point (p0) are known:

x1 = x0 + (Math.cos(angle) * radius);
y1 = y0 + (Math.sin(angle) * radius);

Therefore, these formulas can be used to determine any point along a circle's perimeter, given the circle's center point and radius. By changing the angle over time, you can trace the path of a circle.

The following example uses these trigonometric equations to move a sprite around in a circle:

package {

  import flash.display.Sprite;
  import ascb.units.Converter;
  import ascb.units.Unit;
  import flash.events.Event;
  
  public class NumbersAndMath extends Sprite {
    
    private var _square:Sprite;
    private var _angle:uint;
    
    public function NumbersAndMath(  ) {
      _square = new Sprite(  );
      _square.graphics.lineStyle(0);
      _square.graphics.drawCircle(0, 0, 20);
      addChild(_square);
      _angle = 0;
      addEventListener(Event.ENTER_FRAME, move);
    }
  
    private function move(event:Event):void {
      var converter:Converter = Unit.DEGREE.getConverterTo(Unit.RADIAN);
      var angleRadians:Number = converter.convert(_angle);
      _square.x = Math.cos(angleRadians) * 100 + 200;
      _square.y = Math.sin(angleRadians) * 100 + 200;
      _angle++;
    }
        
  }
}