Drawing a curvy polygon

To illustrate the other drawing command options available, we will modify the simple polygon example to create a "curved" polygon. The ActionScript curveTo method uses a "quadratic Bezier" curve that can be understood better by seeing the pictures on the Adobe help page and more deeply by reading the wikipedia entry.

The example

The code

Open the previous (polygon.fla) file and make only the changes discussed below. Save a copy with a different name so as not to overwrite the previous version.

...........................................

The setup function is modified to create vecPoints that is twice as long as previously so that every other point will be treated as a control point for the curveTo method. To make this clear to the user, we color the control points (i.e., the ones with odd indices in vecPoints) green and the polygon corners (i.e., the ones with even indices in vecPoints) red. All points will be draggable and they will be evenly spaced in a big circle, as before.

...........................................

function setup(np:int):void {

var i:int;

vecPoints = new Vector.<Sprite>(2*np);

for (i=0; i<2*np; i++) {

vecPoints[i] = new Sprite();

vecPoints[i].graphics.lineStyle(1,0);

if ((i%2)==0) {

vecPoints[i].graphics.beginFill(0xCC0000);

}

else {

vecPoints[i].graphics.beginFill(0x00CC00);

}

vecPoints[i].graphics.drawEllipse(-8,-8,16,16);

vecPoints[i].graphics.endFill();

spBoard.addChild(vecPoints[i]);

vecPoints[i].addEventListener(MouseEvent.MOUSE_DOWN, startPointDrag);

vecPoints[i].x = 130*Math.cos(Math.PI*i/np);

vecPoints[i].y = 130*Math.sin(Math.PI*i/np);

}

drawLines();

}

...........................................

Perhaps the drawLines function should be renamed "drawCurves" but we want to keep the changes to a minimum. We put the coordinates of all points in vecPoints into the vecCoords Vector object, alternating x and y values as before. However, we now use only half this number of commands since the drawCurve command (denoted by the number "3" in vecCmds) takes four values of vecCoords corresponding to two points, the first being the control point and second being the anchor point.

...........................................

function drawLines():void {

var i:int;

var n:int = vecPoints.length;

var vecCmds:Vector.<int> = new Vector.<int>();

var vecCoords:Vector.<Number> = new Vector.<Number>();

for(i=0; i<n; i++) {

vecCoords[2*i] = vecPoints[i].x;

vecCoords[2*i+1] = vecPoints[i].y;

}

vecCoords[2*n] = vecPoints[0].x;

vecCoords[2*n+1] = vecPoints[0].y;

for(i=0; i<=(n/2); i++) {

vecCmds[i] = 3; // This line creates "curveTo" commands

}

vecCmds[0] = 1;

shLines.graphics.clear();

shLines.graphics.lineStyle(1,0);

shLines.graphics.beginFill(0xFF0000);

shLines.graphics.drawPath(vecCmds, vecCoords,vecWind[rbgWind.selectedData]);

shLines.graphics.endFill();

}

...........................................

To see how the "wide" lineTo and moveTo commands work, modify the loop above to use a "5" (wide lineTo) instead of a "3." Test the movie and you will see that the control points are ignored. This is very different than what happens when you change the "3" to a "2" for the regular lineTo command. Hence, the "wide" versions of moveTo and lineTo exist so that we have the flexibility of keeping the data constant while we vary the drawing commands themselves.

...........................................

setup(3);

Download

Download the source code (fla) for this applet or all three fla files (compressed) for this tutorial at the following links.

Back to Basic Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.