Category Archives: misc

Polar Coordinates Distribution

If you're at all interested in watching me free from code. I recorded a video of me coding this snippet (which is about 11 minutes long or so).

In the video I create a few functions that allow you to draw shapes like these:

Mathematically this stuff is really simple ... the free form nature of the video takes a less technical perspective as you'll see (I even made a few funny mistakes).



Actionscript:
  1. [SWF(width = 600, height = 600)]
  2. var dotNum:int = 1000;
  3. var dotRad:Number = 0.5;
  4.  
  5. x = 120
  6. y = 100;
  7.  
  8. // extra stuff to display what the functions can do
  9. stage.addEventListener(MouseEvent.CLICK, onDrawAll);
  10.  
  11. function onDrawAll(evt:Event):void{
  12.     graphics.clear();
  13.     for (var i:int = 0; i<16; i++){
  14.         var m:Number;
  15.    
  16.         var rad:Number = 120;
  17.         var xp:Number = i % 4 * rad
  18.         var yp:Number = int(i / 4) * rad
  19.    
  20.         var type:int = int(Math.random() * 4);
  21.         if (type == 0){
  22.           makeShape(xp, yp, rad-60, Math.random() , 1);
  23.         }else if (type == 1){
  24.            makeShape(xp, yp, rad-60, 1,  Math.random());
  25.         }
  26.         else if (type == 2){
  27.            m = Math.random() * 2;
  28.            makeShape(xp, yp, rad-Math.random()*120, m, m);
  29.         }
  30.         else if (type == 3){
  31.            m = Math.random() * 2;
  32.            makeShape(xp, yp, rad-Math.random()*120, m, m/2);
  33.         }
  34.     }
  35. }
  36.  
  37. // main part from the video
  38. function makeShape(xp:Number, yp:Number,
  39.                    maxRad:Number = 100,m0:Number=1,
  40.                    m1:Number=1):void{
  41.     var polarX:Number;
  42.     var polarY:Number;
  43.     var radius:Number;
  44.     graphics.lineStyle(0, 0);
  45.     var theta:Number = Math.random() * Math.PI * 2;
  46.     for (var i:int = 0; i<dotNum; i++){
  47.         radius = Math.random() * maxRad
  48.         polarX = xp + radius * Math.cos(theta * m0);
  49.         polarY = yp + radius * Math.sin(theta * m1);
  50.         theta += 0.1;
  51.          
  52.         makeDot(polarX, polarY);
  53.        
  54.     }
  55. }
  56.  
  57. function makeDot(xp:Number, yp:Number, fillColor:uint = 0x000000):void{
  58.     graphics.beginFill(fillColor);
  59.     graphics.drawCircle(xp, yp, dotRad);
  60.     graphics.endFill();
  61. }

Here it is over at wonderf:

Also posted in Graphics, Math, functions | Tagged , , | 4 Comments

Collecting Colors

Some of you may have seen these preliminary test images images on my flickr:


If your up for it .... i am working on collecting colors and words for use with this project ... so watch the video (below) and go to the link (below) you will be able to make a contribution.

LEARN ABOUT THE TOOLS
video, (may not all make sense but the tool is shown which is the important part)

POPULATE THE DB
population tool add some colors

I have a smart filter that checks for people doing weird things like curses etc... so don't bother trying to do that.

Additional info here, scroll down to see our presentation about the project

Posted in misc | 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, arrays | 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, arrays, display list, graphics algorithms, matrix, pixel manipulation, return values | Tagged , , | 2 Comments

Recursive Countdown

Actionscript:
  1. loop(20);
  2.  
  3. function loop(i:int):void {
  4.     if (i <0) return;
  5.       trace(i);
  6.       loop(i - 1);
  7. }
  8.  
  9. /* outputs:
  10. 20
  11. 19
  12. 18
  13. 17
  14. 16
  15. 15
  16. 14
  17. 13
  18. 12
  19. 11
  20. 10
  21. 9
  22. 8
  23. 7
  24. 6
  25. 5
  26. 4
  27. 3
  28. 2
  29. 1
  30. 0
  31. */

This snippet uses a recursive function to count down from some number. Recursion is pretty useless in actionscript, it will eventually cause an error... If you were to try to countdown from a higher number it would choke pretty fast...

Been writing haskell lately so I have recursion on the brain.

Also posted in functions | Tagged , , | 7 Comments

Rotation Property Weirdness

Actionscript:
  1. var boxA:Shape = Shape(addChild(new Shape()));
  2. with (boxA.graphics) beginFill(0), drawRect(-10,-10,20,20);
  3.  
  4. var boxB:Shape = Shape(addChild(new Shape()));
  5. with (boxB.graphics) beginFill(0), drawRect(-10,-10,20,20);
  6.  
  7. boxA.x = 100;
  8. boxA.y = 100;
  9.  
  10. boxB.x = 200;
  11. boxB.y = 100;
  12.  
  13. var rot:Number = 32750;
  14.  
  15. addEventListener(Event.ENTER_FRAME, onLoop);
  16. function onLoop(evt:Event):void {
  17.   rot += 1
  18.   // will stop rotating
  19.   boxA.rotation = rot
  20.   // will keep rotating
  21.   boxB.rotation = rot % 360;
  22. }

I recently became aware of a strange aspect of the rotation property on DisplayObjects. For some reason, once it's value goes a little beyond ~32750 the DisplayObject will simply stop rotating. If you read the rotation property it is still changing, but there is no visual update - a quick check on the DisplayObject.transform.matrix property will show that the value has stopped.

The easy fix is to use mod before applying the value to the rotation property. Surprised I've never come across this one before. Maybe someone can shed some light on this.


// for people searching google for solutions to this problem I'll add the following key words:
MovieClip stops rotating, DisplayObject stops rotating, rotation property broken, not rotating

Also posted in DisplayObject, motion | Tagged , , | 1 Comment

Paste an Arbitrary Piece of Code

Actionscript:
  1. ...
  2. // loop through until we find the root note
  3.     // grab the third and the fifth and exit the loop
  4.     for (var i:int = 0; i<leng; i++){
  5.         if (cMajor[i] == note){
  6.             third = cMajor[(i + 2) % leng];
  7.             fifth = cMajor[(i + 4) % leng];
  8.             break;
  9.         }
  10.     }
  11.    
  12.     // we may need a double sharp on the middle note
  13.     var sharpFlatDouble:String = sharpFlat;
  14.    
  15.     // check if this is a sharp, check if it is A or D
  16.     // if it is add the symbol for double sharp
  17.     if (sharpFlat == "#"){
  18.         if (note == "D" || note == "A"){
  19.             sharpFlatDouble = "x";
  20.         }
  21.     }
  22. ...

If your working on some code... just randomly copy a piece of it and paste it in the comments... This code is from a program that generates any major scale (it's still not finished). Feel free to post code chunks in any language...

[EDIT] the code doesn't need to work on its own... you can just randomly copy from something your working on...

Posted in misc | Tagged , , | 15 Comments

Float as a Fraction

Actionscript:
  1. // print some floats as fractions
  2. printFraction(0.5);
  3. printFraction(0.75);
  4. printFraction(0.48);
  5.  
  6. // try something a little more complex
  7. var float:Number = 0.98765432;
  8. trace("\na more complex example:");
  9. printFraction(float);
  10. var frac:Array = asFraction(float);
  11. trace("double check it:");
  12. trace(frac[0] + "/" + frac[1] +" = " + frac[0] / frac[1]);
  13.  
  14. /* outputs:
  15. 0.5 = 1/2
  16. 0.75 = 3/4
  17. 0.48 = 12/25
  18.  
  19. a more complex example:
  20. 0.98765432 = 12345679/12500000
  21. double check it:
  22. 12345679/12500000 = 0.98765432
  23. */
  24.  
  25.  
  26. function printFraction(n:Number):void{
  27.     var frac:Array = asFraction(n);
  28.     trace(n + " = " + frac[0] + "/" + frac[1]);
  29. }
  30.  
  31. // takes any value less than one and returns an array
  32. // with the numerator at index 0 and the denominator at index 1
  33. function asFraction(num:Number):Array{
  34.     var decimalPlaces:int = num.toString().split(".")[1].length;
  35.     var denom:Number = Math.pow(10, decimalPlaces);
  36.     return reduceFraction(num * denom, denom);
  37. }
  38.  
  39. // divide the numerator and denominator by the GCF
  40. function reduceFraction(numerator:int, denominator:Number):Array{
  41.     // divide by the greatest common factor
  42.     var divisor:int = gcf(numerator, denominator);
  43.     if (divisor){
  44.         numerator /= divisor;
  45.         denominator /= divisor;
  46.     }
  47.     return [numerator, denominator];
  48. }
  49.                    
  50. // get the greatest common factor of two integers
  51. function gcf(a:int, b:int):int{
  52.     var remainder:int;
  53.     var factor:Number = 0;
  54.     var maxIter:int = 100;
  55.     var i:int = 0;
  56.     while (1){
  57.         if (b> a){
  58.            var swap:int = a;
  59.            a = b;
  60.            b = swap;
  61.         }
  62.         remainder = a % b;
  63.         a = b;
  64.         b = remainder
  65.         if (remainder == 0){
  66.             factor = a;
  67.             break;
  68.         }else if (remainder==1){
  69.             break;
  70.         }else if (i> maxIter){
  71.             trace("failed to calculate gcf");
  72.             break;
  73.         }
  74.         i++;
  75.     }
  76.     return factor;
  77. }

This snippet contains a few functions for calculating fractions based on float values. Writing this brought back some memories from grade school math.

Also posted in Math | Tagged , , | 4 Comments

Ancient Egyptian Multiplication

Actionscript:
  1. egyptianMultiply(12, 99);
  2.  
  3. // trace(12 * 99) // test to make sure it works
  4.  
  5. /* outputs:
  6. /64 768
  7. /32 384
  8.  16 192
  9.  8 96
  10.  4 48
  11. /2 24
  12. /1 12
  13. ---
  14. 1188
  15. */
  16.  
  17.  
  18. function egyptianMultiply(valueA:Number, valueB:Number):void {
  19.    
  20.     var left:Array = [];
  21.     var right:Array = []
  22.    
  23.     // swap if valueB is smaller than value A
  24.     if (valueB <valueA){
  25.         var swap:int = valueB;
  26.         valueB = valueA;
  27.         valueA = swap;
  28.     }
  29.    
  30.     // create left and right columns
  31.     var currentLeft:int = 1;
  32.     var currentRight:int = valueA;
  33.    
  34.     while (currentLeft <valueB){
  35.         left.push(currentLeft);
  36.         right.push(currentRight);
  37.         currentRight += currentRight;
  38.         currentLeft += currentLeft;
  39.     }
  40.    
  41.    
  42.     // add up the right column based on the left
  43.     currentLeft = 0;
  44.     var rightSum:int;
  45.     var leftSum:int;
  46.     var i:int = left.length - 1;
  47.    
  48.     while (currentLeft != valueB){
  49.      
  50.       leftSum = currentLeft + left[i];
  51.       // if the next number causes the sum
  52.       // to go above valueB, skip it
  53.       if (leftSum <= valueB){
  54.         currentLeft = leftSum;
  55.         rightSum += right[i];
  56.         trace("/" + left[i]  + " " + right[i]);
  57.       } else {
  58.         trace(" " + left[i]  + " " + right[i]);
  59.       }
  60.       i--;
  61.     }
  62.     trace("---");
  63.     trace(rightSum);
  64. }

Someone mentioned egyptian multiplication to me yesterday... So read a little about it here and whipped up this example. For some reason I decided to do it in processing ... once it worked I ported it to ActionScript.

The above link describing the technique I used is from http://www.jimloy.com/... I haven't spent much time digging around the site, but it appears to have some pretty nice stuff on it...

If you're curious, here is the original processing version:

JAVA:
  1. Vector left = new Vector();
  2. Vector right = new Vector();
  3.  
  4. int valueA = 10;
  5. int valueB = 8;
  6.  
  7. if (valueB <valueA){
  8.     int swap = valueB;
  9.     valueB = valueA;
  10.     valueA = swap;
  11. }
  12.  
  13. int currentLeft = 1;
  14. int currentRight = valueA;
  15. while (currentLeft <valueB){
  16.     left.add(currentLeft);
  17.     right.add(currentRight);
  18.     currentRight += currentRight;
  19.     currentLeft += currentLeft;
  20. }
  21.  
  22. currentLeft = 0;
  23.  
  24. int result = 0;
  25. int i = left.size() - 1;
  26. while (currentLeft != valueB){
  27.  
  28.   int temp = currentLeft + (Integer) left.get(i);
  29.   if (temp <= valueB){
  30.    
  31.     currentLeft = temp;
  32.     result += (Integer) right.get(i);
  33.     println("/" + left.get(i) + " " + right.get(i));
  34.   } else {
  35.     println(" " + left.get(i)  + " " + right.get(i));
  36.   }
  37.    
  38.   i--;
  39. }
  40. println("---");
  41. println(result);

After writing, this I took a look at the wikipedia entry... I also found myself on this short page about a scribe called Ahmes. (I recommend reading this if you are interested in PI)

Also posted in Math | Tagged , , , | 1 Comment

Fp10 3d Logo

Actionscript:
  1. var container:Sprite = new Sprite();
  2. container.x = stage.stageWidth / 2;
  3. container.y = stage.stageHeight / 2;
  4. addChild(container);
  5.  
  6. var redBox:Sprite = new Sprite();
  7. redBox.graphics.beginFill(0xFF0000);
  8. redBox.graphics.drawRect(-50,-250,100,500);
  9. redBox.rotationZ = 10;
  10. container.addChild(redBox);
  11.  
  12. var logos:Array = []
  13. var elements:Array = [];
  14. elements.push({element:redBox, z:0});
  15.  
  16. // add the logos
  17. for (var i:int = 0; i<6; i++){
  18.     var logoContainer:MovieClip = new MovieClip();
  19.     var logoText:TextField = new TextField();
  20.     logoText.defaultTextFormat = new TextFormat("_sans", 50);
  21.     logoText.text = "LOGO";
  22.     logoText.autoSize = "left";
  23.     logoText.selectable= false;
  24.    
  25.     logoText.x = -logoText.width / 2;
  26.     logoText.y = -logoText.height / 2;
  27.     logoContainer.addChild(logoText);
  28.     logoText.backgroundColor = 0xFFFFFF;
  29.    
  30.     container.addChild(logoContainer);
  31.     logos.push(logoContainer);
  32.     elements.push({element:logoContainer, z:0});
  33. }
  34.  
  35. var ang:Number = -Math.PI / 2;
  36. var rotationSpeed:Number = 0.05;
  37. addEventListener(Event.ENTER_FRAME, onLoop);
  38. function onLoop(evt:Event):void {
  39.    
  40.      var dx:Number = (mouseY - stage.stageHeight / 2) / 10;
  41.      var dy:Number = (mouseX - stage.stageWidth / 2) / 10;
  42.      container.rotationX += (dx - container.rotationX) / 4;
  43.      container.rotationY += (dy - container.rotationY) / 4;
  44.      
  45.      ang += rotationSpeed;
  46.      for (var i:int = 0; i<logos.length; i++){
  47.          var logo:Sprite = logos[i];
  48.          logo.x = 150 * Math.cos(ang + i);
  49.          logo.z = 150 * Math.sin(ang + i);
  50.          logo.alpha = 1 - logo.z / 200;
  51.          logo.rotationY = -Math.atan2(logo.z, logo.x)  / Math.PI * 180  - 90;
  52.      }
  53.      
  54.      // z-sort
  55.      for (i = 0; i<elements.length; i++){
  56.           elements[i].z = elements[i].element.transform.getRelativeMatrix3D(this).position.z;
  57.      }
  58.      
  59.     elements.sortOn("z", Array.NUMERIC | Array.DESCENDING);
  60.     for (i = 0; i<elements.length; i++) {
  61.         container.addChild(elements[i].element);
  62.     }
  63. }

A student of mine was having trouble creating a 3D logo for a client. I created this snippet to help explain how some of the fp10 3D stuff works.... z-sorting etc... The code could be optimized a bit... but it works nicely...


Have a look at the swf...

Also posted in 3D, motion | Tagged , , , | 2 Comments