Category Archives: arrays

3D Ring

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, motion, sortOn | Tagged , , | 3 Comments

Haskell Inspired zipWith() Function

Actionscript:
  1. initOperators();
  2.  
  3. trace(zipWith("-", [1,2,3], [1,2,3]));
  4. trace(zipWith("+", [1,2,3], [1,2,3]));
  5. trace(zipWith("*", [1,2,3], [1,2,3]));
  6. trace(zipWith("+", [1,1,1,3], [4,5,6,7]));
  7. trace(zipWith("<<", [2, 4], [1,1]));
  8. /*
  9. outputs:
  10.  
  11. 0,0,0
  12. 2,4,6
  13. 1,4,9
  14. 5,6,7,10
  15. 4,8
  16. */
  17.  
  18. function zipWith(op:String, a:Array, b:Array):Array{
  19.     var aLeng:int = a.length;
  20.     var bLeng:int = b.length;
  21.     var leng:Number = (aLeng <bLeng) ? aLeng : bLeng;
  22.     var zipped:Array = [];
  23.    
  24.     if (!this[op])return [];
  25.    
  26.     for (var i:int = 0; i<leng; i++){
  27.         zipped[i]=this[op](a[i], b[i]);
  28.     }
  29.     return zipped;
  30. }
  31.  
  32. function initOperators():void{
  33.     this["+"]=function(a:Number, b:Number):Number{ return a + b };
  34.     this["-"]=function(a:Number, b:Number):Number{ return a - b };
  35.     this["/"]=function(a:Number, b:Number):Number{ return a / b };
  36.     this["*"]=function(a:Number, b:Number):Number{ return a * b };
  37.     this["%"]=function(a:Number, b:Number):Number{ return a % b };
  38.    
  39.     this["&"]=function(a:Number, b:Number):Number{ return a & b };
  40.     this["<<"]=function(a:Number, b:Number):Number{ return a <<b };
  41.     this["|"]=function(a:Number, b:Number):Number{ return a | b };
  42.     this[">>"]=function(a:Number, b:Number):Number{ return a>> b };
  43.     this[">>>"]=function(a:Number, b:Number):Number{ return a>>> b };
  44.     this["^"]=function(a:Number, b:Number):Number{ return a ^ b };
  45. }

This snippet is basically like the haskell zipWith() function. It can combines two arrays into one array given a single function. In this case I defined a bunch of operator functions, but it would work with any kind of function that takes two arguments and returns a value. You could extend this to work with strings and do other strange things I guess.

If you have yet to go play with haskell ... go do it now.

Also posted in Number, Operators, binary, functions, misc, return values | Tagged , , , | 2 Comments

Too Many Buttons

Actionscript:
  1. [SWF (width = 500, height = 500)]
  2.  
  3. var canvas:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xFFFFFF);
  4. addChild(new Bitmap(canvas));
  5.  
  6. var indexCanvas:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xFFFFFF);
  7.  
  8. var btnNum:int = 5000;
  9. var info:Array = [];
  10.  
  11. var brush:BitmapData = new BitmapData(10,10,false, 0xCCCCCC);
  12. var border:Shape = new Shape();
  13. border.graphics.lineStyle(2, 0x000000);
  14. border.graphics.drawRect(0,0,10,10);
  15. brush.draw(border);
  16.  
  17. var txt:TextField = TextField(addChild(new TextField()));
  18. with (txt) height = 20, width = 50, background = 0xFFFFFF, selectable = false
  19. var tf:TextFormat = new TextFormat();
  20. tf.align = TextFormatAlign.RIGHT;
  21. txt.border= true;
  22. txt.defaultTextFormat = tf;
  23.  
  24. var redRect:Shape = Shape(addChild(new Shape()));
  25. with (redRect.graphics) beginFill(0xFF0000), drawRect(0,0,10,10);
  26.                                              
  27. var pnt:Point = new Point();
  28. var r:Rectangle = new Rectangle(0,0,10,10);
  29. for (var i:int = 0; i <btnNum; i++){
  30.     pnt.x = r.x = int(Math.random() * stage.stageWidth);
  31.     pnt.y = r.y = int(Math.random() * stage.stageHeight);
  32.     indexCanvas.fillRect(r, i);
  33.     canvas.copyPixels(brush, brush.rect, pnt)
  34.     info[i] = [r.x, r.y, i];   
  35. }
  36.  
  37. addEventListener(Event.ENTER_FRAME, onCheckBtns);
  38. function onCheckBtns(evt:Event):void{
  39.    var currentIndex:int = indexCanvas.getPixel(mouseX, mouseY);
  40.    if (currentIndex != 0xFFFFFF){
  41.      var currentBox:Array = info[currentIndex]
  42.      redRect.visible = true;
  43.      redRect.x = currentBox[0];
  44.      txt.y = redRect.y = currentBox[1];
  45.      if (mouseX <txt.width){
  46.          tf.align = TextFormatAlign.LEFT;
  47.          txt.defaultTextFormat = tf;
  48.          txt.x = redRect.x + 10;
  49.      }else{
  50.          tf.align = TextFormatAlign.RIGHT;
  51.          txt.defaultTextFormat = tf;
  52.          txt.x = redRect.x - txt.width;
  53.      }
  54.      txt.text = currentBox[2];
  55.      txt.visible = true;
  56.    }else{
  57.      redRect.visible = false;
  58.      txt.visible = false;
  59.    }
  60. }

This is a simplified example of the technique discussed in yesterdays post. The idea is to use a BitmapData image to store index values for a large number of elements that need to be able to act as if the have MouseEvents. For a more detailed description of this technique see yesterdays post.

Have a look at the swf on wonderfl

Also posted in BitmapData, misc | Tagged , , | Leave a comment

~20,000 Rollovers

Actionscript:
  1. [SWF(width = 500, height = 500, frameRate = 30)]
  2.  
  3. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
  4.  
  5. var indexCanvas:BitmapData = new BitmapData(stage.stage.stageWidth, stage.stageHeight, false,
  6.                                             0xFFFFFF);
  7. addChild(new Bitmap(canvas));
  8.  
  9. var s:Shape = new Shape();
  10.  
  11. var lineData:Array = [];
  12. var dataIndex:int = 0;
  13.  
  14. trace(0xFFFFFF - 1)
  15. var totalLines:int = 20000;
  16. var iterations:int = 9;
  17. var linesPerIter:int = totalLines / iterations;
  18.  
  19. var xp:int = stage.stageWidth / 2;
  20. var yp:int = stage.stageHeight / 2;
  21.  
  22. var stepAmt:Number = 60;
  23. var halfStepAmt:Number = stepAmt / 2;
  24.  
  25. addEventListener(Event.ENTER_FRAME, onDraw);
  26. function onDraw(evt:Event):void {
  27.      if (lineData.length <totalLines){
  28.         generateData(linesPerIter);
  29.      }else{
  30.         stage.quality = "high";
  31.         addChild(s);
  32.         s.x = 0;
  33.         s.y = 0;
  34.          
  35.         removeEventListener(Event.ENTER_FRAME, onDraw);
  36.         addEventListener(Event.ENTER_FRAME, onRun);
  37.      }
  38. }
  39.  
  40. function onRun(evt:Event):void {
  41.    var currentIndex:int = indexCanvas.getPixel(mouseX, mouseY);
  42.    var currentLine:Array = lineData[currentIndex];
  43.    
  44.    s.graphics.clear();
  45.    if (currentIndex != 0xFFFFFF){
  46.           s.graphics.lineStyle(3, 0xFF0000);
  47.           s.graphics.moveTo(currentLine[0], currentLine[1]);
  48.           s.graphics.lineTo(currentLine[2], currentLine[3]);  
  49.    }
  50. }
  51.  
  52. function generateData(num:int):void{
  53.     var rxA:int, rxB:int, ryA:int, ryB:int;
  54.     var g:Graphics = s.graphics;
  55.     for (var i:int = 0; i<num; i++){
  56.         rxA = xp;
  57.         ryA = yp;
  58.        
  59.         xp += Math.round(Math.random() * stepAmt) - halfStepAmt;
  60.         yp += Math.round(Math.random() * stepAmt) - halfStepAmt;
  61.        
  62.         if (xp> stage.stageWidth){
  63.             xp = stage.stageWidth - halfStepAmt;
  64.         }else
  65.         if (xp <0){
  66.             xp = halfStepAmt;
  67.         }
  68.         if (yp> stage.stageHeight){
  69.             yp = stage.stageHeight - halfStepAmt;
  70.         }else
  71.         if (yp <0){
  72.             yp = halfStepAmt;
  73.         }
  74.        
  75.         rxB = xp;
  76.         ryB = yp;
  77.          
  78.         lineData[dataIndex] = [rxA, ryA, rxB, ryB];            
  79.         s.x = rxA;
  80.         s.y = ryA;
  81.         var endX:Number = rxB - rxA;
  82.         var endY:Number = ryB - ryA;
  83.         var m:Matrix = s.transform.matrix;
  84.         g.clear();
  85.         g.lineStyle(1, 0x000000, 0.3);
  86.  
  87.         g.lineTo(endX, endY);
  88.         stage.quality = "high";
  89.         canvas.draw(s, m);
  90.        
  91.         g.clear();
  92.         g.lineStyle(3, dataIndex);
  93.        
  94.         g.lineTo(endX, endY);
  95.         stage.quality = "low";
  96.         indexCanvas.draw(s, m);
  97.        
  98.         dataIndex++
  99.     }
  100. }

I'm working on a data visualization that contains a long path made up of approximately one million points. There is some information associated with every two sets of coordinates that needs to be displayed when the user rolls their mouse over any part of the line.

I took a little time to think about the best way to do this and came up with a few techniques. The first one I tried seems to work nicely - this snippet is the proof of concept for that first technique. I tested this snippet with 1,000,000 xy coordinates and it works nicely. It takes a little while to draw though, so for the purposes of this demo I've just included 20,000 coordinates.

Have a look at the swf over at wonderfl.net

The way this works is by drawing lines to two different BitmapData instances. I draw anti-aliased slightly transparent lines to a BitmapData instance called "canvas" (this is added to the display list) - I then draw aliased lines to a BitmapData called "indexCanvas" (this is never added to the display list) - each aliased line uses an incremental value for its color - this incremental value is also the index for a two dimensional array containing the coordinate information for the aliased line. I use getPixel() on the "indexCanvas" and use the return value as the index for the 2D array. The data from the 2D array is used to draw a red line with the graphics class. This technique enables you to have many many rollovers and all you ever have to do is call getPixel() and use the returned color value to look up info about what you're mouse is touching.

There are a few cool ways this could be repurposed and this is really only one solution to the problem of having many many things that you need to be able to rollover... there are others that don't use BitmapData at all... I may write those up in the next couple of days.

Also posted in BitmapData, Data Structures, UI, display list, graphics algorithms, matrix, misc, pixel manipulation, return values | Tagged , , | 2 Comments

Array map

Actionscript:
  1. var a:Array = [1,2,3,4,5,6];
  2. var double:Array = a.map(function():int{return arguments[0] * 2});
  3. trace(double);
  4. /*outputs:
  5. 2,4,6,8,10,12
  6. */

A condensed example of Array.map()

Here is the same thing written in haskell:

a = [1,2,3,4,5,6]
double = map (*2) a

main = print double
Also posted in functions | Tagged , , | Leave a comment

zip Function for Arrays

Actionscript:
  1. var one:Array = [1,2,3];
  2. var two:Array = [10, 20, 30];
  3.  
  4. var zipOneTwo:Array = zip(one, two);
  5.  
  6. // trace each tupple
  7. for each (var tuple:Array in zipOneTwo){
  8.     trace(tuple);
  9. }
  10.  
  11. /* outputs:
  12. 1,10
  13. 2,20
  14. 3,30
  15. */
  16.  
  17. function zip(a:Array, b:Array):Array{
  18.     var longest:Array = (a.length>= b.length) ? a : b;
  19.     var zipped:Array = [];
  20.     for (var i:int = 0; i<longest.length; i++){
  21.         zipped.push([a[i], b[i]]);
  22.     }
  23.     return zipped;
  24. }

This snippet shows a function called zip that takes two arrays and returns a two dimensional array of tuples. Just imagine that each array is one side of a zipper and you'll sort of get the idea...

I do wish flash would trace this:

[[1, 10], [2, 20], [3, 30]]

We shouldn't have to write a utility function to see the real array structure...

I've been messing with haskell for a few days now... just for fun I thought I'd write a few functions inspired by it... this is the first one...

Posted in arrays | Tagged , , | 3 Comments

Summarize Contents of Array

Actionscript:
  1. var a:Array = [true, true, true, false, false, true, true, true, false];
  2.  
  3. var counter:int = 0;
  4. var prev:Boolean;
  5. var summary:Array = [];
  6. for (var i:int = 1; i<a.length; i++){
  7.     prev = a[i - 1]
  8.     counter++;
  9.     if (prev != a[i]){
  10.         if (prev){
  11.             summary.push("true: "+ counter);
  12.         }else{
  13.             summary.push("false: "+ counter);
  14.         }
  15.         counter = 0;
  16.     }
  17. }
  18. summary.push(a[i-1].toString()+": "+ (counter+1));
  19.  
  20. trace(summary);
  21.  
  22. /** outputs:
  23. true: 3,false: 2,true: 3,false: 1
  24. */

This is a handy way to summarize the contents of an array of boolean values.

Also posted in misc | Tagged , , | 8 Comments

2D Map Avoid

Actionscript:
  1. [SWF(width=401,height=401,background=0xEFEFEF)]
  2.  
  3. var w:Number = stage.stageWidth-1;
  4. var h:Number = stage.stageHeight-1;
  5. var tileSize:Number = 20;
  6. var halfTileSize:Number = 20;
  7. var hTiles:Number = w / tileSize;
  8. var vTiles:Number = h / tileSize;
  9. var world:Shape = Shape(addChild(new Shape()));
  10. var map:Array=[];
  11. populateMap();
  12. var gridColor:uint = 0xCCCCCC;
  13. grid(tileSize,  gridColor);
  14.  
  15. vTiles -= 1;
  16. var movers:Array = [];
  17. for (var i:int = 0; i<100; i++){
  18.     movers.push(makeMover(i % hTiles, int( i / hTiles),0x000000))
  19.     movers.push(makeMover(i % hTiles, vTiles - int( i / hTiles),0xFF0000))
  20. }
  21. var moverNum:int = movers.length;
  22. hTiles -= 1;
  23.  
  24. addEventListener(Event.ENTER_FRAME, onLoop);
  25. function onLoop(evt:Event):void {
  26.     world.graphics.clear();
  27.     for (var i:int = 0; i<moverNum; i++){
  28.        movers[i]();
  29.      }
  30. }
  31. function populateMap():void{
  32.     for (var i:int = 0; i<vTiles; i++){
  33.         map[i] = [];
  34.         for (var j:int = 0; j<hTiles; j++){
  35.             map[i][j] = 0;
  36.         }
  37.     }
  38. }
  39. function grid(size:Number=30, lineColor:uint=0xFFFF00, lineAlpha:Number=1):void {
  40.     with(graphics){
  41.         lineStyle(0, lineColor, lineAlpha);
  42.         drawRect(0,0,w,h);
  43.         for (var i:Number = size; i<w; i+=size) {
  44.             moveTo(i, 0);
  45.             lineTo(i, w);
  46.         }
  47.         for (i = size; i<h; i+=size) {
  48.             moveTo(0, i);
  49.             lineTo(h, i);
  50.         }
  51.     }
  52. }
  53. function makeMover(x:Number, y:Number, col:uint):Function{
  54.     var xp:Number = x;
  55.     var yp:Number = y;
  56.     var prevX:Number = x;
  57.     var prevY:Number = y;
  58.     map[yp][xp] = 1;
  59.     var dx:Number = xp;
  60.     var dy:Number = yp;
  61.     var counter:int = 0;
  62.     return function():void{
  63.         if (counter> 20){
  64.             if (int(Math.random()*30) == 1){
  65.                 xp += int(Math.random()*2) - 1 | 1;
  66.                 xp = xp <0 ? 0 : xp;
  67.                 xp = xp> hTiles ? hTiles : xp;
  68.                 if (map[yp][xp] == 1){
  69.                      xp = prevX;
  70.                 }else{
  71.                     map[prevY][prevX] = 0;
  72.                     map[yp][xp] = 1;
  73.                     counter = 0;
  74.                 }
  75.                 prevX = xp;
  76.             }else
  77.             if (int(Math.random()*30) == 1){
  78.                 yp += int(Math.random()*2) - 1 | 1;
  79.                 yp = yp <0 ? 0 : yp;
  80.                 yp = yp> vTiles ? vTiles : yp;
  81.                 if (map[yp][xp] == 1){
  82.                      yp = prevY;
  83.                 }else{
  84.                     map[prevY][prevX] = 0;
  85.                     map[yp][xp] = 1;
  86.                     counter = 0;
  87.                 }
  88.                 prevY = yp;
  89.             }
  90.         }
  91.         counter++;
  92.         dx += (xp - dx) * 0.5;
  93.         dy += (yp - dy) * 0.5;
  94.         with(world.graphics){
  95.             lineStyle(0, gridColor,1, true)
  96.             beginFill(col);
  97.             drawRect(dx * tileSize, dy * tileSize, tileSize, tileSize);
  98.         }
  99.     }
  100. }

This (somewhat long) snippet moves boxes around on a grid - the boxes avoid one another by reading values in a 2D array. This technique can also be used for collision detection in tile-based games.


Have a look at the swf here...

Also posted in motion, random | Tagged , , | Leave a comment

x and y Coordinates in 1D Array / Vector

Actionscript:
  1. var canvas:BitmapData=new BitmapData(400,400,false,0x000000);
  2. addChild(new Bitmap(canvas));
  3. var pix:Vector.<uint>=canvas.getVector(canvas.rect);
  4.  
  5. canvas.lock();
  6. for (var i:int = 0; i<300; i++) {
  7.     var xp:int=50+i;
  8.     var yp:int=50+i/2;
  9.     // target x and y coords in 1D array
  10.     pix[xp+yp*400]=0xFFFFFF;
  11. }
  12. canvas.setVector(canvas.rect, pix);
  13. canvas.unlock();

This snippet shows how to target x and y coordinates in a 1D Array / Vector. This can be useful sometimes when working with setVector().

This is sort of like re-inventing setPixel().... and for that reason is kind of pointless - that said, it's interesting to know. I first learned about this technique from using processing.

Also posted in BitmapData, Vector, pixel manipulation, setPixel | Tagged , , | Leave a comment

Array.push() Vector.push() Optimization

Actionscript:
  1. var tVerts:Vector.<Number> = new Vector.<Number>();
  2. var inc:int = 0;
  3. var t:Number, i:Number, j:Number, k:Number;
  4.  
  5.  // fast way
  6. t = getTimer();
  7. for (i= -2; i<2; i+=.03){
  8.     for (j = -2; j<2; j+=.03){
  9.         for (k = -2; k<2; k+=.03){
  10.             tVerts[inc] = i;
  11.             inc++;
  12.             tVerts[inc] = j;
  13.             inc++;
  14.             tVerts[inc]= k;
  15.             inc++;
  16.         }
  17.     }
  18. }
  19. trace(getTimer() - t);
  20.  
  21. tVerts  = new Vector.<Number>();
  22.  
  23. // slow way
  24. t = getTimer();
  25. for (i= -2; i<2; i+=.03){
  26.     for (j = -2; j<2; j+=.03){
  27.         for (k = -2; k<2; k+=.03){
  28.  
  29.             tVerts.push(i, j, k);
  30.         //  tVerts.push(j);
  31.         //  tVerts.push(k);
  32.         }
  33.     }
  34. }
  35. trace(getTimer() - t);

Today I needed to populate a Vector in the above manner... populating the vector using push() was quite slow in this case because (among other reasons) push() is a method call. I was curious how much faster populating the Vector without push would be... so I wrote this snippet - in this case it was significantly faster - took less than a third of the time. You can run this snippet to see what kind of results you get.

It's important to note that this nested for loop could be optimized further but I wanted to focus on the push() optimization alone.

Warning

The most HORRIBLE thing about testing the speed of ActionScript code is that you CANNOT rely on the debug player to test optimizations. Always use the release version of the flash player. The debug player will give unusual (usually slower) results...

Also posted in Vector | Tagged , | 1 Comment