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

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.

// 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).

// 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.

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.

No credit card required