Scripting 3D in Flash: Solid Pyramids

This is an archived tutorial from the kirupa.com legacy collection. It covers software that may no longer be available, but it is kept online because the ideas still hold up.

This example has two fully solid pyramids. One uses the visibility function for backface culling and the other uses separate movieclips for faces and uses swapDepths for each of those clips to properly arrange them. Those depths are based on an average z of the 3 points making up each face.

[ two drawn solid pyramids ]

Steps to Create Animation

This example starts off similar to the previous only here, there are 2 scenes, one for each of the pyramids which are to operate independent of each other. The focalLength will be used in both, so that can remain a single variable.

                                this.createEmptyMovieClip("scene1", 1);
scene1._x = 80;
scene1._y = 150;

this.createEmptyMovieClip("scene2", 2);
scene2._x = 220;
scene2._y = 150;

focalLength = 300;

Following that, the visibility function can be added. This will be used in the first pyramid for backface culling taking three of the points making up a face in the pyramid and determining visibility of that face based on slope and position of each point in relation to each other. The second pyramid will not use this function in favor of having each face as a movieclip and using swapDepths to properly overlap each face.

                                isVisibleBetween = function (a, b, c) {
 if (((b._y-a._y)/(b._x-a._x)-(c._y-a._y)/(c._x-a._x)<0) ^ (a._x<=b._x == a._x>c._x)) {
  return true;
 } else {
  return false;
 }
};};

Next are the make point functions. This example will actually drop the make2DPoint function all together. One of the reasons is that for the second pyramid using swapDepths to arrange faces, a depth or z value will be needed for each converted 2D point to determine the depth of the face. Secondly, a 2D point is just a 3D point minus one property, z, so why not just drop the 2D point if the 3D point can be used instead (which it needs to be to get that z value to figure for depth). The make3DPoint function itself has not changed.

                                make3DPoint = function(x,y,z){
 var point = new Object();
 point.x = x;
 point.y = y;
 point.z = z;
 return point;
};

Now for the Transform3DPointsTo2DPoints work horse. The only change here is the using of the make3DPoint for the 2D points in the transformed array. Technically the point will still be 2D, at least in its x and y values, but the z value will be the 3D point which is retained for determining depths etc.

                                Transform3DPointsTo2DPoints = function(points, axisRotations){
 var TransformedPointsArray = [];
 var sx = Math.sin(axisRotations.x);
 var cx = Math.cos(axisRotations.x);
 var sy = Math.sin(axisRotations.y);
 var cy = Math.cos(axisRotations.y);
 var sz = Math.sin(axisRotations.z);
 var cz = Math.cos(axisRotations.z);
 var x,y,z, xy,xz, yx,yz, zx,zy, scaleFactor;

 var i = points.length;
 while (i--){
  x = points[i].x;
  y = points[i].y;
  z = points[i].z;

  // rotation around x
  xy = cx*y - sx*z;
  xz = sx*y + cx*z;
  // rotation around y
  yz = cy*xz - sy*x;
  yx = sy*xz + cy*x;
  // rotation around z
  zx = cz*yx - sz*xy;
  zy = sz*yx + cz*xy;

  scaleFactor = focalLength/(focalLength + yz);
  x = zx*scaleFactor;
  y = zy*scaleFactor;
  z = -yz;
  TransformedPointsArray[i] = make3DPoint(x, y, z);
 }
 return TransformedPointsArray;
};

And now the pyramid can be defined. A pyramid is fairly easy - only three points.

                                pointsArray = [
 make3DPoint(-50,29,29),
 make3DPoint(0,29,-58),
 make3DPoint(50,29,29),
 make3DPoint(0,-58,0)
];

Because there are two scenes, 2 separate onEnterFrame functions will be defined for both, each using a separate technique of creating a filled pyramid. The first will be the one with backface culling using the isVisibleBetween function defined earlier. The isVisibleBetween function is used to determine, given 3 points, whether the face made by those points is visible or not. If its not, then you shouldn't bother drawing the face. So, each time a face is to be drawn between any three points (which happens four times for each face every frame), isVisibleBetween needs to be called for those points in an if check to make sure the drawing should proceed. If not, on to the next face. An added mouseIsDown variable is used to disable the beginFill function if the mouse is being pressed (Key.isDown(1) checks for the left mouse button being pressed if you weren't already aware of that). Note that everything is being drawn directly in the current scene movieclip.

                                scene1.pyramidAxisRotations = make3DPoint(0,0,0);
rotatePyramid1 = function(){
 this.pyramidAxisRotations.y -= this._xmouse/2000;
 this.pyramidAxisRotations.x += this._ymouse/2000;

 var pts2D = Transform3DPointsTo2DPoints(pointsArray, this.pyramidAxisRotations);
 var mouseIsDown = Key.isDown(1);

 this.clear();
 this.lineStyle(2,0x000000,100);
 if (isVisibleBetween(pts2D[0], pts2D[1], pts2D[2])){
  if (!mouseIsDown) this.beginFill(0x800000, 100);
  this.moveTo(pts2D[0].x, pts2D[0].y);
  this.lineTo(pts2D[1].x, pts2D[1].y);
  this.lineTo(pts2D[2].x, pts2D[2].y);
  this.lineTo(pts2D[0].x, pts2D[0].y);
  this.endFill();
 }
 if (isVisibleBetween(pts2D[3], pts2D[1], pts2D[0])){
  if (!mouseIsDown) this.beginFill(0x008000, 100);
  this.moveTo(pts2D[3].x, pts2D[3].y);
  this.lineTo(pts2D[1].x, pts2D[1].y);
  this.lineTo(pts2D[0].x, pts2D[0].y);
  this.lineTo(pts2D[3].x, pts2D[3].y);
  this.endFill();
 }
 if (isVisibleBetween(pts2D[3], pts2D[2], pts2D[1])){
  if (!mouseIsDown) this.beginFill(0x000080, 100);
  this.moveTo(pts2D[3].x, pts2D[3].y);
  this.lineTo(pts2D[2].x, pts2D[2].y);
  this.lineTo(pts2D[1].x, pts2D[1].y);
  this.lineTo(pts2D[3].x, pts2D[3].y);
  this.endFill();
 }
 if (isVisibleBetween(pts2D[3], pts2D[0], pts2D[2])){
  if (!mouseIsDown) this.beginFill(0x808000, 100);
  this.moveTo(pts2D[3].x, pts2D[3].y);
  this.lineTo(pts2D[0].x, pts2D[0].y);
  this.lineTo(pts2D[2].x, pts2D[2].y);
  this.lineTo(pts2D[3].x, pts2D[3].y);
  this.endFill();
 }
};
scene1.onEnterFrame = rotatePyramid1;

This second pyramid uses separate movieclips to draw its faces and each face is then swapped to an appropriate depth to keep overlapping appropriate and the pyramid appear solid. Each clip has its own specific face drawn within it every frame (whether its technically visible or not) and an average values of the z values for each point is in that face is used to swap each clip to the right depth keeping those clips that need to be on top, on top. When the mouse is pressed, for this pyramid, you can see the lines which were previously invisible or hidden by movieclip(s) on top whereas in the other pyramid they are not seen since they aren't even drawn. Of course, before implementing the function, the clips will need to be created for each face.

                                scene2.pyramidAxisRotations = make3DPoint(0,0,0);
scene2.createEmptyMovieClip("face1",1);
scene2.createEmptyMovieClip("face2",2);
scene2.createEmptyMovieClip("face3",3);
scene2.createEmptyMovieClip("face4",4);

rotatePyramid2 = function(){
 this.pyramidAxisRotations.y -= this._xmouse/2000;
 this.pyramidAxisRotations.x += this._ymouse/2000;

 var pts2D = Transform3DPointsTo2DPoints(pointsArray, this.pyramidAxisRotations);
 var mouseIsDown = Key.isDown(1);

 with(this.face1){
  clear();
  lineStyle(2,0x000000,100);
  if (!mouseIsDown) beginFill(0x800000, 100);
  moveTo(pts2D[0].x, pts2D[0].y);
  lineTo(pts2D[1].x, pts2D[1].y);
  lineTo(pts2D[2].x, pts2D[2].y);
  lineTo(pts2D[0].x, pts2D[0].y);
  endFill();
  swapDepths((pts2D[0].z+pts2D[1].z+pts2D[2].z)/3);
 }
 with(this.face2){
  clear();
  lineStyle(2,0x000000,100);
  if (!mouseIsDown) beginFill(0x008000, 100);
  moveTo(pts2D[0].x, pts2D[0].y);
  lineTo(pts2D[1].x, pts2D[1].y);
  lineTo(pts2D[3].x, pts2D[3].y);
  lineTo(pts2D[0].x, pts2D[0].y);
  endFill();
  swapDepths((pts2D[0].z+pts2D[1].z+pts2D[3].z)/3);
 }
 with(this.face3){
  clear();
  lineStyle(2,0x000000,100);
  if (!mouseIsDown) beginFill(0x000080, 100);
  moveTo(pts2D[1].x, pts2D[1].y);
  lineTo(pts2D[2].x, pts2D[2].y);
  lineTo(pts2D[3].x, pts2D[3].y);
  lineTo(pts2D[1].x, pts2D[1].y);
  endFill();
  swapDepths((pts2D[1].z+pts2D[2].z+pts2D[3].z)/3);
 }
 with(this.face4){
  clear();
  lineStyle(2,0x000000,100);
  if (!mouseIsDown) beginFill(0x808000, 100);
  moveTo(pts2D[2].x, pts2D[2].y);
  lineTo(pts2D[0].x, pts2D[0].y);
  lineTo(pts2D[3].x, pts2D[3].y);
  lineTo(pts2D[2].x, pts2D[2].y);
  endFill();
  swapDepths((pts2D[2].z+pts2D[0].z+pts2D[3].z)/3);
 }
};
scene2.onEnterFrame = rotatePyramid2;

SUGGESTION: Tips for Speed Optimization

Flash isn't fast. Remember that. Flash has a lot to put up with in terms of showing things on the screen as well as calculating everything it needs to at the request of your Actionscript. Because the Flash player is meant to be a light and lean plugin, there can only be so much done to enhance its speed. With that in mind, you will need to keep your actionscript as proficient and efficient as you can when dealing with a lot of operations that need to be calculated every frame - as is the case with 3D in Flash. Here are some tips you can apply to your code to help speed things up. Remember, every little bit counts:

Shorter variable names run faster (be careful not to sacrifice too much clarity of your code for this slight speed boost). myLongVariableName would perform slow in comparison to myV. You can assign a long variable to a shorter variable name if its going to be accessed repeatedly.
Bracket or 'associative array' syntax for referencing properties in an object or array can be much slower than normal dot syntax property referencing. For example, myObject["property"] is much slower than myObject.property. Because arrays use this syntax, inherently accessing array values is quite slow in comparison to normal object properties. If you can use an object instead of an array, do so.You can assign an bracket-accessed variable to a single short variable name if its going to be accessed repeatedly.
Local variables in function calls created with the var keyword are faster than other variables. Be sure not to reinitialize var variables within a loop block, however, as that would not be as efficient. Instead, declare any local variables used in loops outside the loop first.
Function calls on the whole can take time to process. The fewer function calls you make the less overhead you have in processing your script.
Along those same lines, don't process things more than once if you can just reuse the result of the first calculation. An example being the Math.sin() and Math.cos() calls. They only needed to be called a total of 3 times each for each frame of animation in a 3D environment. There's no need to call them repeatedly with the same values if they don't need to be. This not only applies to function calls but any other operation even if as simple as an addition of two numbers. Save that result in a variable and reuse it again later instead of re-calculating.
For..in loops can be faster than normal for loops. You may have to, however, when using a for..in loop, use checks to make sure you are looping through the correct properties which cause a script to run slower than if it was performed with a normal for loop. Also, for..in loops are not faster when used with very large arrays.
Generally subtraction is slightly faster than addition. Because of this, a way to speed up addition would be to subtract the negative of what you're adding. In other words, x = y+1; becomes x = y - (-1);
Pre-increment can also be slightly faster than post-increment. --x; over x--; Be wary of their uses in loops, however, as each will be treated differently.
One of the biggest boosts in speed, sadly, is through using deprecated functions such as random over Math.random and things like tellTarget instead of with. tellTarget can be as much as 25 times faster than with, though since these methods are technically no longer supported, you'll have to be cautious how much you use them. It might not be long where they will become obsolete and ineffective.

Advantages in Separated Faces

Using the separate movieclips for each face opens up some possibilities in terms of interaction with those faces. As movieclips, each face is completely separate from the other faces in the shape. Being that they are all their own individual clips, you can assign clip specific actions to certain and single faces. For example, a single face can act as a button. A 3D object with interactive button-faces? Exciting, isn't it?

That wraps up this tutorial. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums. Your support is what keeps writing like this online! 😇

This tutorial was written by senocular, also known as Trevor McCauley. He has been one of this community's most generous teachers since the early Flash days, and he is still around: find him on senocular.com and on the forums.

Need help?

Ask on the forums!

Customize Theme

Scripting 3D in Flash: Solid Pyramids

Steps to Create Animation

Advantages in Separated Faces

The KIRUPA Newsletter

Follow:

Popular

Loose Ends