Simple z-sorting

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

Here is an easy way to do z-sorting on a cluster of circles.


Have a look at the swf over at wonderfl...

Posted in 3D, Graphics, Vector, sortOn | Tagged , , | 5 Comments

BitmapData Static

By Zevan | August 24, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData = new BitmapData(500,500,false, 0x000000);
  2. addChild(new Bitmap(canvas));
  3.  
  4. var pix:Vector.<uint> = new Vector.<uint>(canvas.width * canvas.height, true);
  5.  
  6. addEventListener(Event.ENTER_FRAME, onLoop);
  7. function onLoop(evt:Event):void {
  8.     canvas.lock();
  9.     var i:int = pix.length;
  10.     while(--i> -1){
  11.         var c:uint = uint(Math.random() * 255);
  12.         pix[i] = c <<16 | c <<8 | c;
  13.     }
  14.     canvas.setVector(canvas.rect, pix);
  15.     canvas.unlock();
  16. }

This is an easy way to fill a BitmapData Object up with a bunch of TV-style static....

This post is meant to serve as filler while I work to get a good solid SIMPLE fp10, drawing api z-sorting example going... There seem to be 3 main ways of doing z-sorting all of which don't seem right to me for some reason... they all work... but I have a gut feeling there is a faster way... The winner so far (unexpectedly) is using Array.sortOn

Posted in BitmapData, Vector, misc | Tagged , , | 6 Comments

Gradient Bezier 3D

By Zevan | August 23, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(backgroundColor=0x333333, width=800, height=600)];
  2. x = stage.stageWidth / 2;
  3. y = stage.stageHeight / 2;
  4. var verts:Vector.<Number>  = new Vector.<Number>();
  5. var tVerts:Vector.<Number> = new Vector.<Number>();
  6. var pVerts:Vector.<Number> = new Vector.<Number>();
  7. var uvts:Vector.<Number> = new Vector.<Number>();
  8.  
  9. var igraph:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
  10.  
  11. var tVect:Vector3D = new Vector3D();
  12. var m:Matrix3D = new Matrix3D();
  13. for (var i:int = 0; i<200; i++){
  14.     for (var j:int = 0; j<3; j++){
  15.         tVect.x = Math.random() * 0.15;
  16.         m.identity();
  17.         m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
  18.         m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
  19.         m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
  20.         tVect = m.transformVector(tVect);
  21.         verts.push(tVect.x, tVect.y, tVect.z);
  22.     }
  23.    
  24.     var stroke:GraphicsStroke = new GraphicsStroke();
  25.    
  26.     var col:int = [0xFFFFFF, 0x000000, 0xFFCC00, 0xFF0000][int(Math.random() * 4)];
  27.    
  28.     stroke.thickness = 2+(Math.random()*Math.random())*8;
  29.     var mg:Matrix = new Matrix();
  30.     mg.createGradientBox(350+Math.random()*20-10, 350+Math.random()*20-10, 0, -270+i/2,-240+i/2);
  31.     stroke.fill = new GraphicsGradientFill(GradientType.RADIAL, [0xFFFFFF,0x444444], [1, 1], [30, 255], mg);
  32.  
  33.     var bez:GraphicsPath = new GraphicsPath();
  34.     bez.commands = Vector.<int>([1, 3]);
  35.     igraph.push(stroke);
  36.     igraph.push(bez);
  37. }
  38.  
  39. var perspective:PerspectiveProjection = new PerspectiveProjection();
  40. perspective.fieldOfView = 45;
  41. var trans:Matrix3D = new Matrix3D();
  42. var proj:Matrix3D = perspective.toMatrix3D();
  43. var dx:Number = 0, dy:Number = 0;
  44.  
  45. addEventListener(Event.ENTER_FRAME, onLoop);
  46. function onLoop(evt:Event):void {
  47.     dx += (mouseX - dx) / 4;
  48.     dy += (mouseY - dy) / 4;
  49.        
  50.     trans.identity();
  51.     trans.appendRotation(dy, Vector3D.X_AXIS);
  52.     trans.appendRotation(dx, Vector3D.Y_AXIS);
  53.     trans.appendTranslation(0,0,0.5);
  54.     trans.transformVectors(verts, tVerts);
  55.     Utils3D.projectVectors(proj, tVerts, pVerts, uvts);
  56.    
  57.     var inc:int = 0;
  58.     for (var i:int = 1; i<igraph.length; i+=2){
  59.         GraphicsPath(igraph[i]).data = pVerts.slice(inc, inc + 6);
  60.         inc += 6;
  61.     }
  62.      
  63.     graphics.clear();
  64.     graphics.drawGraphicsData(igraph);
  65. }

A variation on yesterdays post - this makes use of GraphicsGradientFill to add some depth...

Check out the swf...

Posted in 3D, Graphics, bezier | Tagged , , | Leave a comment

3D Bezier

By Zevan | August 22, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(backgroundColor=0x000000, width=800, height=600)];
  2. x = stage.stageWidth / 2;
  3. y = stage.stageHeight / 2;
  4. var verts:Vector.<Number>  = new Vector.<Number>();
  5. var tVerts:Vector.<Number> = new Vector.<Number>();
  6. var pVerts:Vector.<Number> = new Vector.<Number>();
  7. var uvts:Vector.<Number> = new Vector.<Number>();
  8.  
  9. var igraph:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
  10.  
  11. var tVect:Vector3D = new Vector3D();
  12. var m:Matrix3D = new Matrix3D();
  13. for (var i:int = 0; i<300; i++){
  14.     for (var j:int = 0; j<3; j++){
  15.         tVect.x = Math.random() * 0.15;
  16.         m.identity();
  17.         m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
  18.         m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
  19.         m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
  20.         tVect = m.transformVector(tVect);
  21.         verts.push(tVect.x, tVect.y, tVect.z);
  22.     }
  23.    
  24.      
  25.     var stroke:IGraphicsData = new GraphicsStroke();
  26.    
  27.     var col:int = [0xFFFFFF, 0x000000, 0xFFCC00, 0xFF0000][int(Math.random() * 4)];
  28.     with (stroke) thickness = (Math.random()*Math.random())*10, fill = new GraphicsSolidFill(col);
  29.  
  30.     var bez:GraphicsPath = new GraphicsPath();
  31.     bez.commands = Vector.<int>([1, 3]);
  32.     igraph.push(stroke);
  33.     igraph.push(bez);
  34. }
  35.  
  36. var perspective:PerspectiveProjection = new PerspectiveProjection();
  37. perspective.fieldOfView = 45;
  38. var trans:Matrix3D = new Matrix3D();
  39. var proj:Matrix3D = perspective.toMatrix3D();
  40. var dx:Number = 0, dy:Number = 0;
  41.  
  42. addEventListener(Event.ENTER_FRAME, onLoop);
  43. function onLoop(evt:Event):void {
  44.     dx += (mouseX - dx) / 4;
  45.     dy += (mouseY - dy) / 4;
  46.        
  47.     trans.identity();
  48.     trans.appendRotation(dy, Vector3D.X_AXIS);
  49.     trans.appendRotation(dx, Vector3D.Y_AXIS);
  50.     trans.appendTranslation(0,0,0.5);
  51.     trans.transformVectors(verts, tVerts);
  52.     Utils3D.projectVectors(proj, tVerts, pVerts, uvts);
  53.    
  54.     var inc:int = 0;
  55.     for (var i:int = 1; i<igraph.length; i+=2){
  56.         GraphicsPath(igraph[i]).data = pVerts.slice(inc, inc + 6);
  57.         inc += 6;
  58.     }
  59.      
  60.     graphics.clear();
  61.     graphics.drawGraphicsData(igraph);
  62. }

After a few hours of trying to get a super optimized fp10 z-sorting demo happening, I gave up (for now) and decided to just let loose with something easy. The result is this 3D Bezier example...


Check out the swf...

Posted in 3D, Graphics, bezier | Tagged , , , | 3 Comments