Category Archives: sortOn

3D Ring

By Zevan | May 3, 2010
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 500, height=500)]
  2. var ring:MovieClip = createRing();
  3. ring.x = stage.stageWidth / 2;
  4. ring.y = stage.stageHeight / 2;
  5. addChild(ring);
  6.  
  7. function createRing(sectionNum:int = 30):MovieClip{
  8.     var container:MovieClip = new MovieClip();
  9.     container.circles = [];
  10.     container.theta = 0;
  11.     container.thetaDest = 0;
  12.     var step:Number = (Math.PI * 2) / sectionNum;
  13.     for (var i:int = 0; i<sectionNum; i++){
  14.         var c:MovieClip = new MovieClip();
  15.         with (c.graphics){
  16.             lineStyle(0,0x000000);
  17.             beginFill(0xCCCCCC);
  18.             drawCircle(0,0,20);
  19.         }
  20.         c.thetaOffset = step * i;
  21.         container.addChild(c);
  22.         container.circles.push(c);
  23.     }
  24.     container.addEventListener(Event.ENTER_FRAME, onRun);
  25.     return container;
  26. }
  27. function onRun(evt:Event):void {
  28.     var container:MovieClip = MovieClip(evt.currentTarget);
  29.     var num:int = container.circles.length;
  30.     for (var i:int = 0; i<num; i++){
  31.         var c:MovieClip = container.circles[i];
  32.         var angle:Number = container.theta + c.thetaOffset;
  33.         c.x = 200 * Math.cos(angle);
  34.         c.y = 100 * Math.sin(angle);
  35.         c.scaleX = (100 + c.y) / 120 + 0.2;
  36.         c.scaleY = c.scaleX;
  37.     }
  38.     container.circles.sortOn("y", Array.NUMERIC);
  39.     for (i = 0; i<num; i++){
  40.         container.addChild(container.circles[i]);
  41.     }
  42.     if (container.mouseX <-100){
  43.         container.thetaDest -= 0.05;
  44.     }
  45.     if (container.mouseX> 100){
  46.         container.thetaDest += 0.05;
  47.     }
  48.     container.theta += (container.thetaDest  - container.theta) / 12;
  49.    
  50. }

This snippet shows how to create a 3D ring navigation using sine and cosine. Have a look:

Also posted in 3D, Graphics, MovieClip, UI, arrays, motion | 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 3D, Graphics, Vector, matrix, misc | Tagged , , , | 2 Comments

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...

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

Vector.sortOn()

By Zevan | April 11, 2009
CLICK HERE TO COPY
Actionscript:
  1. var a:Vector.<Sprite> = new Vector.<Sprite>();
  2.  
  3. trace("unsorted");
  4. for (var i:int = 0; i<10; i++){
  5.     var s:Sprite = new Sprite();
  6.     s.x = int(Math.random()*100);
  7.     a.push(s);
  8.     trace(s.x);
  9. }
  10.  
  11. quickSortOn(a, "x", 0, a.length-1);
  12.  
  13. trace("sorted");
  14. for (i= 0; i<10; i++){
  15.     trace(a[i].x);
  16. }
  17.  
  18. // modified code from kirupa.com
  19. // http://www.kirupa.com/developer/actionscript/quickSort.htm
  20. function quickSortOn(a:Vector.<Sprite>, prop:String, left:int, right:int):void {
  21.     var i:int = 0, j:int = 0, pivot:Sprite, tmp:Sprite;
  22.     i=left;
  23.     j=right;
  24.     pivot = a[Math.round((left+right)*.5)];
  25.     while (i<=j) {
  26.         while (a[i][prop]<pivot[prop]) i++;
  27.         while (a[j][prop]>pivot[prop]) j--;
  28.         if (i<=j) {
  29.             tmp=a[i];
  30.             a[i]=a[j];
  31.             i++;
  32.             a[j]=tmp;
  33.             j--;
  34.         }
  35.     }
  36.     if (left<j)  quickSortOn(a, prop, left, j);
  37.     if (i<right) quickSortOn(a, prop, i, right);
  38. }
  39. /* outputs something like:
  40. unsorted
  41. 26
  42. 33
  43. 20
  44. 63
  45. 7
  46. 68
  47. 75
  48. 39
  49. 67
  50. 53
  51. sorted
  52. 7
  53. 20
  54. 26
  55. 33
  56. 39
  57. 53
  58. 63
  59. 67
  60. 68
  61. 75
  62. */

This demo is my first quick stab at using at a sortOn() function for the Vector class. It sorts a Vector of Sprites by their x property.

Recently there were a few times when I was prototyping ideas and suddenly realized that I needed to change my Vector to an Array because I needed to use sortOn().(If you don't already know, there is no built in sortOn() method for the Vector class). In the past I spent some time with sorting algorithms, bubble, insertion etc... so I knew I could pretty easily write my own sortOn(), but I also realized that a generic implementation wouldn't be easy/possible without loosing the type of the Vector. What I mean is, if you have a Vector of Sprites, you need a sorting method that takes a Vector.< Sprite > type as an argument (as seen above), if you have a Vector of TextFields you need a Vector.< TextField > type as an argument. You could of course use a generic type, but this kind of defeats the purpose of using a vector in the first place...

I will likely post a revised version of this in the near future with a slightly improved implementation of QuickSort. I haven't spent that much time with this, but If I recall correctly this is not the ideal implementation. I ported this code from a nice Kirupa tutorial and modified it to sort based on a property...

Also posted in Object, Vector, arrays, associative arrays | Tagged , | 3 Comments