O'Reilly logo

Actionscript Cookbook by Joey Lott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

4.8. Drawing Regular Polygons

Problem

You want to draw a regular polygon (a polygon in which all sides are equal length) at runtime.

Solution

Create a custom MovieClip.drawRegularPolygon( ) method using the Drawing API and invoke it on a movie clip.

Discussion

You can create a method to draw a regular polygon using basic trigonometric ratios to determine the necessary angles and coordinates of the segments.

The drawRegularPolygon( ) accepts five parameters:

sides

The number of sides in the polygon

length

The length of each side in pixels

rotation

The number of degrees by which the polygon should be rotated

x

The x coordinate of the center of the polygon

y

The y coordinate of the center of the polygon

Define the custom drawRegularPolygon( ) method on MovieClip.prototype to make it available to all movie clip instances:

// Include the custom Math library from Chapter 5 to access Math.degToRad(  ).
#include "Math.as"

MovieClip.prototype.drawRegularPolygon = function (sides, length, rotation, x, y) {

  // Convert rotation from degrees to radians.
  rotation = Math.degToRad(rotation);

  // The angle formed between the segments from the polygon's center as shown in 
  // Figure 4-5. Since the total angle in the center is 360 degrees (2π radians), 
  // each segment's angle is 2π divided by the number of sides.
  var angle = (2 * Math.PI) / sides;

  // Calculate the length of the radius that circumscribes the polygon (which is also
  // the distance from the center to any of the vertices).
  var radius = (length/2)/Math.sin(angle/2);

  // The starting point of the polygon is calculated using trigonometry, where radius
  // is the hypotenuse and rotation is the angle.
  var px = (Math.cos(rotation) * radius) + x;
  var py = (Math.sin(rotation) * radius) + y;

  // Move to the starting point without yet drawing a line.
  this.moveTo(px, py);

  // Draw each side. Calculate the vertex coordinates using the same trigonometric
  // ratios used to calculate px and py earlier.
  for (var i = 1; i <= sides; i++) {
    px = (Math.cos((angle * i) + rotation) * radius) + x;
    py = (Math.sin((angle * i) + rotation) * radius) + y;
    this.lineTo(px, py);
  }
}

Figure 4-5 shows the angle used when calculating how to draw a regular polygon.

Drawing a regular polygon

Figure 4-5. Drawing a regular polygon

Once you have defined the drawRegularPolygon( ) method and included it in your Flash document, you can quickly draw regular polygons with any number of sides (with a minimum of three sides, of course, for it to be a valid polygon.) Remember, as with all the other drawing methods in this chapter, you must define a line style prior to invoking the drawRegularPolygon( ) method.

// Create the movie clip into which to draw the polygon.
this.createEmptyMovieClip("polygon_mc", 1);

// Use a 1-pixel, black, solid line style for the border.
polygon_mc.lineStyle(1, 0x000000, 100);

// Draw a regular nonagon (a nine-sided polygon) with sides of length 30.
polygon_mc.drawRegularPolygon(9, 30);

As with all the custom methods in this chapter that define shapes, you can create a filled polygon by invoking beginFill( ) or beginGradientFill( ) before drawRegularPolygon( ) and invoking endFill( ) after drawRegularPolygon( ).

this.createEmptyMovieClip("polygon_mc", 1);
polygon_mc.lineStyle(1, 0x000000, 100);       // Define a black, 1-pixel border.
polygon_mc.beginFill(0x00FF00);               // Define a solid green fill.
polygon_mc.drawRegularPolygon(9, 30)
polygon_mc.endFill(  );

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required