Category Archives: 3D

drawTriangles() Cubes

By Zevan | September 13, 2009
CLICK HERE TO COPY
Actionscript:
  1. private function addCube(xp:Number, yp:Number, zp:Number, w:Number, h:Number, leng:Number):void{
  2.             var hw:Number = w * 0.5;
  3.             var hh:Number = h * 0.5;
  4.             var hl:Number = leng * 0.5;
  5.             var xA:Number = xp - hw;
  6.             var xB:Number = hw + xp;
  7.             var yA:Number = yp - hh;
  8.             var yB:Number = hh + yp;
  9.             var zA:Number = zp - hl;
  10.             var zB:Number = hl + zp;
  11.             _verts.push(xA, yA, zA,
  12.                         xB, yA, zA,
  13.                         xA, yB, zA,
  14.                         xB, yB, zA,
  15.                         xA, yA, zB,
  16.                         xB, yA, zB,
  17.                         xA, yB, zB,
  18.                         xB, yB, zB);
  19.            
  20.             var index:int = _boxIndex * 8;
  21.             var i0:int = index, i1:int = index + 1, i2:int = index + 2;
  22.             var i3:int = index + 3,  i4:int = index + 4, i5:int = index + 5;
  23.             var i6:int = index + 6, i7:int = index + 7;
  24.             _indices.push(i0, i1, i2,
  25.                           i1, i3, i2,
  26.                           i6, i7, i4,
  27.                           i7, i5, i4,
  28.                           i1, i5, i3,
  29.                           i7, i3, i5,
  30.                           i4, i5, i0,
  31.                           i1, i0, i5,
  32.                           i2, i6, i0,
  33.                           i0, i6, i4,
  34.                           i2, i3, i6,
  35.                           i3, i7, i6);
  36.                          
  37.             _faces.push(new Face(), new Face(), new Face(),
  38.                         new Face(),  new Face(), new Face(),
  39.                         new Face(), new Face(), new Face(),
  40.                         new Face(), new Face(), new Face());
  41.             _uvts.push(Math.random(), Math.random(), 0,
  42.                        Math.random(), Math.random(), 0,
  43.                        Math.random(), Math.random(), 0,
  44.                        Math.random(), Math.random(), 0,
  45.                        Math.random(), Math.random(), 0,
  46.                        Math.random(), Math.random(), 0,
  47.                        Math.random(), Math.random(), 0,
  48.                        Math.random(), Math.random(), 0);
  49.             _boxIndex++;
  50.         }

Lately I've been posting large code snippets... so today I'm highlighting part of a larger snippet - The above code is the heart of a small experiment I created this morning. It sets up a cube for use with drawTraingles().

The rest of the code can be read here:
Cubes3D.as

Have a look at the swf here...


I also put it on wonderfl...

Also posted in Graphics, Vector, matrix, motion | Tagged , , | 6 Comments

Distance Spring

By Zevan | September 6, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(backgroundColor=0x222222, width=500, height=500)]
  2. var hsw:Number = stage.stageWidth / 2;
  3. var hsh:Number = stage.stageHeight / 2;
  4. var pointNum:int = 800
  5. var points3D:Vector.<Number> = new Vector.<Number>();
  6. var points3Dout:Vector.<Number> = new Vector.<Number>();
  7. var points2D:Vector.<Number> = new Vector.<Number>();
  8. var uvts:Vector.<Number> = new Vector.<Number>();
  9. var sorted:Array = [];
  10. var pnt:Point = new Point();
  11. var m:Matrix3D = new Matrix3D();
  12. var v:Vector3D = new Vector3D();
  13. for (var i:int = 0; i<pointNum; i++){
  14.     v.y = i * 0.7 - 300
  15.     var t =Math.random()*6.28;
  16.     v.x = 200 * Math.cos(i * 2 * Math.PI / 180);
  17.     v.z = 200 * Math.sin(i * 2 * Math.PI / 180);
  18.     v = m.transformVector(v);
  19.     points3D.push(v.x, v.y, v.z);
  20.     points2D.push(0,0);
  21.     uvts.push(0,0,0);
  22.     sorted.push(new Vector3D());
  23. }
  24. points3D.fixed = true;
  25. points2D.fixed = true;
  26. uvts.fixed = true;
  27. var p:PerspectiveProjection = new PerspectiveProjection();
  28. var proj:Matrix3D = p.toMatrix3D();
  29. var dx:Number = 0, dy:Number = 0;
  30. addEventListener(Event.ENTER_FRAME, onLoop);
  31. function onLoop(evt:Event):void {
  32.     var i:int, j:int;
  33.     dx += (mouseX - dx) / 4;
  34.     dy += (mouseY - dy) / 4;
  35.     m.identity();
  36.     m.appendRotation(getTimer() / 4, Vector3D.Y_AXIS);
  37.     m.transformVectors(points3D, points3Dout);
  38.    
  39.     m.identity();
  40.     m.appendRotation(dx, Vector3D.Z_AXIS);
  41.     m.appendRotation(dy, Vector3D.X_AXIS);
  42.     m.appendTranslation(0, 0, 1000);
  43.     m.append(proj);
  44.     Utils3D.projectVectors(m, points3Dout, points2D, uvts);
  45.     for (i = 0, j = 0; i<points2D.length; i+=2, j++){
  46.         sorted[j].x = points2D[i] + hsw;
  47.         sorted[j].y = points2D[i + 1] + hsh;
  48.         sorted[j].z = uvts[j * 3 + 2];
  49.     }
  50.     sorted.sortOn("z", Array.NUMERIC);
  51.     graphics.clear();
  52.     for(i = 0; i<sorted.length; i++){
  53.         var zpos:Number = sorted[i].z * 10000;
  54.         var c:int = zpos * 14;
  55.         graphics.beginFill(c <<16 | c <<8 | c);
  56.         graphics.drawCircle(sorted[i].x, sorted[i].y, zpos);
  57.         graphics.endFill();
  58.     }
  59. }

A variation on some recent posts... this snippet draws a rotating spring made up of 800 particles...

Have a look at the swf...


Also posted in Graphics, Vector | Tagged , , | 3 Comments

Fake Light w/ UV & Quads

By Zevan | September 2, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 500, height=500, backgroundColor = 0x000000)]
  2. x = stage.stageWidth / 2;
  3. y = stage.stageHeight / 2;
  4. var quadNum:int = 2200;
  5. // standard Vectors for using drawTriangles
  6. var verts:Vector.<Number> = new Vector.<Number>();
  7. var pVerts:Vector.<Number>;
  8. var uvts:Vector.<Number> = new Vector.<Number>();
  9. var indices:Vector.<int> = new Vector.<int>();
  10. // needed for z-sorting
  11. var sortedIndices:Vector.<int>;
  12. var faces:Array = [];
  13. // we'll use this for tranforming points
  14. // and as the transformation matrix for our render
  15. var m:Matrix3D = new Matrix3D();
  16. // plot a quad
  17. var quad:Vector.<Number>;
  18. quad = Vector.<Number>([-10, -10, 0,
  19.                         10, -10, 0,
  20.                         -10, 10, 0,
  21.                         10, 10, 0]);
  22. // temp vect for any transformed quads
  23. var transQuad:Vector.<Number> = new Vector.<Number>();
  24. var i:int;
  25. var inc:int = 0;
  26. for (i = 0; i<quadNum; i++){
  27.     m.identity();
  28.     var s:Number = (int(Math.random()*50) == 1) ? 2 + Math.random()*2 : .1 + Math.random() * 2;
  29.     m.appendScale(s, s, 1);
  30.     m.appendRotation(90, Vector3D.Y_AXIS);
  31.     var mult:Number = 100 + Math.random()*200;
  32.     m.appendTranslation(mult, 0, 0);
  33.     m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
  34.     m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
  35.     m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
  36.     m.transformVectors(quad, transQuad);
  37.     verts = verts.concat(transQuad);
  38.     faces.push(new Vector3D());
  39.     faces.push(new Vector3D());
  40.     var i4:int = i * 4;
  41.     indices.push(0 + i4, 1 + i4, 2 + i4,
  42.                  1 + i4, 3 + i4, 2 + i4);
  43.     mult /= 300;
  44.     uvts.push(mult,mult,0,
  45.               mult+.1,mult,0,
  46.               mult,mult - .1,0,
  47.               mult + .1,mult + .1,0);
  48. }
  49. sortedIndices = new Vector.<int>(indices.length, true);
  50. // create texture
  51. var tex:BitmapData = new BitmapData(400,400,false, 0x000000);
  52. var grad:Shape = new Shape();
  53. var mat:Matrix = new Matrix();
  54. mat.createGradientBox(400,400,0,0,0);
  55. with (grad.graphics){
  56.     beginGradientFill(GradientType.LINEAR, [0xFFFFFF,0x002244], [1, 1], [100, 255], mat);
  57.     drawRect(0,0,400,400);
  58. }
  59. tex.draw(grad);
  60. // create background
  61. mat.createGradientBox(1600,1200,0,-550, 0);
  62. with (grad.graphics){
  63.     beginGradientFill(GradientType.RADIAL, [0x000000, 0x001133], [1, 1], [0, 255], mat);
  64.     drawRect(0,0,500,500);
  65. }
  66. grad.x = -stage.stageWidth/2
  67. grad.y = -stage.stageHeight/2;
  68. addChild(grad);
  69. // triangles will be drawn to this
  70. var render:Shape = Shape(addChild(new Shape()));
  71. // fix all vector lengths
  72. verts.fixed = true, uvts.fixed = true, indices.fixed = true
  73. pVerts = new Vector.<Number>(verts.length/3 * 2, true);
  74. // we need these if we want perspective
  75. var persp:PerspectiveProjection = new PerspectiveProjection();
  76. persp.fieldOfView = 45;
  77. // projection matrix
  78. var proj:Matrix3D = persp.toMatrix3D();
  79. var dx:Number = 0, dy:Number = 0;
  80. addEventListener(Event.ENTER_FRAME, onLoop);
  81. function onLoop(evt:Event):void {
  82.     dx += (mouseX - dx) / 4;
  83.     dy += (mouseY - dy) / 4;
  84.     m.identity();
  85.     m.appendRotation(dy, Vector3D.X_AXIS);
  86.     m.appendRotation(dx, Vector3D.Y_AXIS);
  87.     m.appendTranslation(0,0,800);
  88.     m.append(proj);
  89.     Utils3D.projectVectors(m, verts, pVerts, uvts);
  90.     var face:Vector3D;
  91.     inc = 0;
  92.     for (var i:int = 0; i<indices.length; i+=3){
  93.         face = faces[inc];
  94.         face.x = indices[i];
  95.         face.y = indices[int(i + 1)];
  96.         face.z = indices[int(i + 2)];
  97.         var i3:int = i * 3;
  98.         face.w = (uvts[int(face.x*3 + 2)] + uvts[int(face.y*3 + 2)] + uvts[int(face.z*3 + 2)]) * 0.333333;
  99.         inc++;
  100.     }
  101.     faces.sortOn("w", Array.NUMERIC);
  102.     inc = 0;
  103.     for each (face in faces){
  104.         sortedIndices[inc++] = face.x;
  105.         sortedIndices[inc++] = face.y;
  106.         sortedIndices[inc++] = face.z;
  107.     }
  108.     render.graphics.clear();
  109.     render.graphics.beginBitmapFill(tex, null, false, false);
  110.     render.graphics.drawTriangles(pVerts, sortedIndices, uvts, TriangleCulling.NEGATIVE);
  111. }

Expanding again on the z-sorting demos from the last few days - this snippet uses UV coords and a gradient to create something that vaguely resembles a light. Unlike the previous demos, the 3D cluster in this snippet is made up of quads - requiring a slight adjustment to the depth calculation.


Have a look at the swf...

I also posted the code over at wonderfl.net...

Also posted in Graphics, Vector, matrix, misc, sortOn | Tagged , , , | 2 Comments

More z-sorting

By Zevan | September 1, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 500, height=500, backgroundColor = 0x333333)]
  2. x = stage.stageWidth / 2;
  3. y = stage.stageHeight / 2;
  4.  
  5.  
  6. var polyNum:int = 3000;
  7. // standard Vectors for using drawTriangles
  8. var verts:Vector.<Number> = new Vector.<Number>();
  9. var pVerts:Vector.<Number>;
  10. var uvts:Vector.<Number> = new Vector.<Number>();
  11. var indices:Vector.<int> = new Vector.<int>();
  12. // needed for z-sorting
  13. var sortedIndices:Vector.<int>;
  14. var faces:Array = [];
  15.  
  16. // we'll use this for tranforming points
  17. // and as the transormation matrix for our render
  18. var m:Matrix3D = new Matrix3D();
  19.  
  20. // plot a poly
  21. var poly:Vector.<Number>;
  22. poly = Vector.<Number>([ 0, 0, 0,
  23.                         10, 0, 0,
  24.                         0,10, 0]);
  25.  
  26. // temp vect for any transformed polygons
  27. var transPoly:Vector.<Number> = new Vector.<Number>();
  28.  
  29. var i:int;
  30. var inc:int = 0;
  31. for (i = 0; i<polyNum; i++){
  32.     m.identity();
  33.     var s:Number = (int(Math.random()*50) == 1) ? 4 + Math.random()*2 : 1 + Math.random() * 2;
  34.     m.appendScale(s, s, 1);
  35.     m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
  36.     m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
  37.     m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
  38.     m.appendTranslation(200,0,0);
  39.                          
  40.     m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
  41.     m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
  42.     m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
  43.    
  44.     m.transformVectors(poly, transPoly);
  45.    
  46.     verts = verts.concat(transPoly);
  47.     faces.push(new Vector3D());
  48.     indices.push(inc++, inc++, inc++);
  49.     uvts.push(Math.random(), Math.random(), 0, Math.random(), Math.random(), 0, Math.random(), Math.random(), 0);
  50. }
  51.  
  52. sortedIndices = new Vector.<int>(indices.length, true);
  53.  
  54. // create texture
  55. var tex:BitmapData = new BitmapData(400,400,false, 0x000000);
  56. var grad:Shape = new Shape();
  57. var mat:Matrix = new Matrix();
  58. mat.createGradientBox(400,400,0,0,0);
  59. with (grad.graphics){
  60.     beginGradientFill(GradientType.LINEAR, [0x000000, 0xAA0000, 0xFFFF00], [1, 1, 1], [20, 200, 255], mat);
  61.     drawRect(0,0,400,400);
  62. }
  63. tex.draw(grad);
  64.  
  65. // create background
  66. mat.createGradientBox(1600,1000,0,-550, -100);
  67. with (grad.graphics){
  68.     beginGradientFill(GradientType.RADIAL, [0x333333, 0xffffff], [1, 1], [0, 255], mat);
  69.     drawRect(0,0,500,500);
  70. }
  71. grad.x = -stage.stageWidth/2
  72. grad.y = -stage.stageHeight/2;
  73. addChild(grad);
  74.  
  75. // triangles will be drawn to this
  76. var render:Shape = Shape(addChild(new Shape()));
  77.  
  78. // fix all vector lengths
  79. verts.fixed = true, uvts.fixed = true, indices.fixed = true
  80. pVerts = new Vector.<Number>(verts.length/3 * 2, true);
  81.  
  82. // we need these if we want perspective
  83. var persp:PerspectiveProjection = new PerspectiveProjection();
  84. persp.fieldOfView = 45;
  85. // projection matrix
  86. var proj:Matrix3D = persp.toMatrix3D();
  87.  
  88. var dx:Number = 0, dy:Number = 0;
  89. addEventListener(Event.ENTER_FRAME, onLoop);
  90. function onLoop(evt:Event):void {
  91.     dx += (mouseX - dx) / 4;
  92.     dy += (mouseY - dy) / 4;
  93.     m.identity();
  94.     m.appendRotation(dy, Vector3D.X_AXIS);
  95.     m.appendRotation(dx, Vector3D.Y_AXIS);
  96.     // push everything back so its not to close
  97.     m.appendTranslation(0,0,800);
  98.     // append the projection matrix at the end
  99.     m.append(proj);
  100.    
  101.     Utils3D.projectVectors(m, verts, pVerts, uvts);
  102.    
  103.     var face:Vector3D;
  104.     inc = 0;
  105.     for (var i:int = 0; i<indices.length; i+=3){
  106.         face = faces[inc];
  107.         face.x = indices[i];
  108.         // it may look odd, but casting to an int
  109.         // when doing operations inside array sytnax
  110.         // adds a big speed boost
  111.         face.y = indices[int(i + 1)];
  112.         face.z = indices[int(i + 2)];
  113.         var i3:int = i * 3;
  114.         // get the average z position (t value) and store it in the Vector3D w property
  115.         // depending on your model, you may not need to do an average of all 3 values
  116.         face.w = (uvts[int(i3 + 2)] + uvts[int(i3 + 5)] + uvts[int(i3 + 8)]) * 0.333333;
  117.         inc++;
  118.     }
  119.      
  120.     // sort on w, so far this beats all other sorting methods for speed,
  121.     // faster than Vector.sort(), faster than any custom sort method I could find
  122.     faces.sortOn("w", Array.NUMERIC);
  123.  
  124.     // re-order indices so that faces are drawn in the correct order (back to front);
  125.     inc = 0;
  126.     for each (face in faces){
  127.         sortedIndices[inc++] = face.x;
  128.         sortedIndices[inc++] = face.y;
  129.         sortedIndices[inc++] = face.z;
  130.     }
  131.    
  132.     render.graphics.clear();
  133.     render.graphics.beginBitmapFill(tex, null, false, false);
  134.     render.graphics.drawTriangles(pVerts, sortedIndices, uvts, TriangleCulling.NONE);
  135. }

This is a slightly more advanced version of the z-sorting demo from yesterday. Here 3000 polygons are randomly arranged in a sphere formation...


Have a look at the swf...

Also posted in Graphics, Vector, matrix, misc | Tagged , , , , | 6 Comments