Making Shapes

Random lines are cool for demonstration purposes, but theres no reason you cant impose a bit of order on that mess. All it takes is getting rid of the initial loop that creates random x , y , and z s for those points and replacing it with some specific, predetermined values. For example, lets make a square. Figure 16-3 shows the square youll draw and the 3D locations of its four corners.

Figure 16-3: Coordinates of a square in 3D space

Note that all the z values are the same. This is because a square lies on a plane. The easiest way to keep the square on the plane is to give all of its points the same measurement on one axis (here I chose the z axis) and define the square on the other two (x and y).

Heres the code that will replace the random point-creating loop:

 points[0] = {x:-100, y:-100, z:100}; points[1] = {x: 100, y:-100, z:100}; points[2] = {x: 100, y: 100, z:100}; points[3] = {x:-100, y: 100, z:100}; 

Also, since youre down to just four points now, youll have to change numPoints to 4. The rest of the code should work just fine, but youll make one addition: a line to connect the last point with the first, to close the shape. Heres the full code as seen in ch16_04.fla (Figure 16-4 shows the result):

  var numPoints:Number = 4;  var points:Array = new Array(); var fl:Number = 250; var vpX:Number = Stage.width / 2; var vpY:Number = Stage.height / 2; init(); function init() {  points[0] = {x:-100, y:-100, z:100};   points[1] = {x:100, y:-100, z:100};   points[2] = {x:100, y:100, z:100};   points[3] = {x:-100, y:100, z:100};  } function onEnterFrame():Void {       var angleY:Number = (_xmouse - vpX) * .001;       var cosY:Number = Math.cos(angleY);       var sinY:Number = Math.sin(angleY);       var angleX:Number = (_ymouse - vpY) * .001;       var cosX:Number = Math.cos(angleX);       var sinX:Number = Math.sin(angleX);       for (var i:Number=0;i<numPoints;i++) {             var point:MovieClip = points[i];             var x1:Number = point.x * cosY - point.z * sinY;             var z1:Number = point.z * cosY + point.x * sinY;             var y1:Number = point.y * cosX - z1 * sinX;             var z2:Number = z1 * cosX + point.y * sinX;             point.x = x1;             point.y = y1;             point.z = z2;             var scale:Number = fl / (fl + point.z);             point.xPos = vpX + point.x * scale;             point.yPos = vpY + point.y * scale;       }       clear();       lineStyle(1, 0, 100);       moveTo(points[0].xPos, points[0].yPos);       for (var i:Number=1;i<numPoints;i++) {             var point:MovieClip = points[i];             lineTo(point.xPos, point.yPos);       }  lineTo(points[0].xPos, points[0].yPos);  } 

Figure 16-4: 3D spinning square

Fantastica spinning square! You should be able to create just about any flat shape now. I often plot out the points on a piece of graph paper beforehand (as shown in Figure 16-5) to help me out.

Figure 16-5: Using graph paper to plot out points

From this sketch, I can create my points like so:

 points[0] =  {x:-150, y:-250, z:100}; points[1] =  {x: 150, y:-250, z:100}; points[2] =  {x: 150, y:-150, z:100}; points[3] =  {x: -50, y:-150, z:100}; points[4] =  {x: -50, y: -50, z:100}; points[5] =  {x:  50, y: -50, z:100}; points[6] =  {x:  50, y:  50, z:100}; points[7] =  {x: -50, y:  50, z:100}; points[8] =  {x: -50, y: 150, z:100}; points[9] =  {x: 150, y: 150, z:100}; points[10] = {x: 150, y: 250, z:100}; points[11] = {x:-150, y: 250, z:100}; 

and wind up with a spinning E as seen in ch16_05.fla and in Figure 16-6. Dont forget to change numPoints to 12 now. Later youll make this value dynamic by using points.length .

Figure 16-6: 3D spinning letter E

If you look at the code for this file, youll see that I added one other little trick to it. I found that the shape was much too close to the viewpoint. I wanted to stick it off in the distance a ways. Your first thought might be to just increase the z value of all the points, but that would actually make the effect worse . For example, say I made z 500. As it rotated , z would go from 500 to ˆ 500, putting some of the points well behind the viewpoint and making a mess of things. Instead, I added a zOffset variable like so:

 var zOffset:Number = 200; 

I then added that in when figuring the scale :

 var scale:Number = fl / (fl + point.z + zOffset); 

This pushes the entire system, including the rotation of the system, out 200 pixels. The value for z will still be from 100 to ˆ 100, but the center of its rotation will be 200, so perspective will be calculated on values that wind up ranging from 300 to 100, well in front of the viewer. Try zOffset with other values and see how it works.