Creating Points and Lines

It doesnt make much sense to make points in 3D without making some 3D lines, too. Since a point, by definition, has no dimension, it would be invisible. To start off with, though, youll use movie clips as points, just so you can see where they are. From there, you simply need to draw some lines to connect the movie clips. Pretty easy. Youve already done similar things, but now the movie clips will have perspective applied to them, to put them in a 3D space.

The point movie clip will contain a small black circle, say 10 pixels across. It will be exported with the name point . Youll attach a few of these points, rotate them based on the mouse position (as per some of the later examples in the previous chapter), and then draw some lines between them. The code itself is almost identical to that in the file ch15_12.fla from the last chapter. The main difference (other than the names of the clips) is the last part of the onEnterFrame , where you loop through drawing a line from the first point, through all the rest, to the last one. Heres the full code from ch16_01.fla ; Figure 16-1 shows the result.

 var numPoints:Number = 20; var fl:Number = 250; var vpX:Number = Stage.width / 2; var vpY:Number = Stage.height / 2; init(); function init() {       for (var i:Number = 0; i<numPoints; i++) {             var point:MovieClip = attachMovie("point",                                               "point" + i, i);             point.x = Math.random() * 200 - 100;             point.y = Math.random() * 200 - 100;             point.z = Math.random() * 200 - 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 = this["point" + 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;             if (point.z <= -fl) {                   point._visible = false;             } else {                   point._visible = true;                   var scale:Number = fl / (fl + point.z);                   point._xscale = point._yscale = scale*100;                   point._x = vpX + point.x * scale;                   point._y = vpY + point.y * scale;                   point.swapDepths(-point.z);             }       }  clear();   lineStyle(1, 0, 100);   moveTo(point0._x, point0._y);   for (var i:Number=1;i<numPoints;i++) {   var point:MovieClip = this["point" + i];   lineTo(point._x, point._y);   }  } 

Figure 16-1: 3D points and lines

Now thats pretty cool. And theres not a whole lot to it, actually.

If youre moving toward modeling 3D solids, youre going to want to eventually get rid of all those black dots. The first attempt at this is pretty basic. Just go into the point movie clip and delete the graphic of the black circle. Thats it. You can see the result in ch16_02.fla and in Figure 16-2. The code is unchanged.

Figure 16-2: 3D lines with invisible points

If you look at the earlier code listing, youll see that some parts of it are now superfluous. The parts about _xscale , _yscale , swapDepths , and _visible are completely irrelevant for a movie clip with no graphics. Theres nothing there to see or scale. You can follow this line of thought a little further and realize that this movie clip is currently being used only as a holder for five variables : x , y , z , _x , and _y . Using an entire movie clip for just that is overkill. A movie clip has many capabilities and uses up a fair number of resources. Using a movie clip in this way is like driving a tank down to the corner store to pick up a loaf of bread. If all youre doing is storing a few variables, a simple generic object will do the trick nicely and save on valuable memory.

The changes are surprisingly easy to make. The following listing is for ch16_03.fla , with the changes in bold. You should be able to follow it pretty easily.

 var numPoints:Number = 20;  var points:Array = new Array();  var fl:Number = 250; var vpX:Number = Stage.width / 2; var vpY:Number = Stage.height / 2; init(); function init() {       for (var i:Number = 0; i<numPoints; i++) {  points[i] = new Object();   points[i].x = Math.random() * 200 - 100;   points[i].y = Math.random() * 200 - 100;   points[i].z = Math.random() * 200 - 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);  } }