Monthly Archives: March 2010

Polar Coordinates Distribution

By Zevan | March 3, 2010

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



CLICK HERE TO COPY
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:

Posted in Graphics, Math, functions, misc | Tagged , , | 4 Comments

Nested Tree Nav

By Zevan | March 2, 2010

This snippet takes xml and builds a multi-tiered navigation based on how nodes are nested etc...:

So that something like this:

CLICK HERE TO COPY
XML:
  1. var menu:XML=<nav>
  2.    <element label="one">
  3.        <element label="a" />
  4.    <element label="b" />
  5.    <element label="c" />
  6. </element>
  7. <element label="two">
  8.      <element label="three">
  9.      <element label="aa">
  10.        <element label="zevan" />
  11.      </element>
  12.      <element label="bb" />
  13.      <element label="cc" />
  14.  </element>
  15.  </element>
  16. </nav>;

Turns into an expandable and collapsible menu that looks like this:

Here is the timeline code:

CLICK HERE TO COPY
Actionscript:
  1. var menu:XML=<nav>
  2.    <element label="one">
  3.        <element label="a" />
  4.    <element label="b" />
  5.    <element label="c" />
  6. </element>
  7. <element label="two">
  8.      <element label="three">
  9.      <element label="aa">
  10.        <element label="zevan" />
  11.      </element>
  12.      <element label="bb" />
  13.      <element label="cc" />
  14.  </element>
  15.  </element>
  16. </nav>;
  17.  
  18. var elements:Array = new Array();
  19. setupMenu();
  20.  
  21. function setupMenu():void {
  22.     parse(menu);
  23.     // hide child elements
  24.     for (var i:int = 0; i<elements.length; i++) {
  25.         var mc:MovieClip = elements[i];
  26.         if (mc.parents != 1) {
  27.             removeChild(mc);
  28.         }
  29.     }
  30.     arrangeY();
  31. }
  32.  
  33. function parse(m:XML):void {
  34.     for each (var d:XML in m.children()) {
  35.         makeBtn(d, numParents(d));
  36.         parse(d);
  37.     }
  38. }
  39.  
  40. function makeBtn(d:XML, offsetX:int):void {
  41.     var btn:MovieClip = new MovieClip();
  42.     btn.x = offsetX * 20;
  43.     btn.y = numChildren * 20;
  44.     btn.data = d;
  45.     btn.parents = offsetX;
  46.     btn.value = d.@label;
  47.  
  48.     var txt:TextField = new TextField();
  49.     txt.text = d.@label;
  50.     txt.selectable = false;
  51.     txt.border = true;
  52.     txt.width = 100;
  53.     txt.mouseEnabled = false;
  54.     txt.height = 19;
  55.     btn.addChild(txt);
  56.     btn.buttonMode= true;
  57.     addChild(btn);
  58.    
  59.     // store references to btn
  60.     elements.push(btn);
  61.     elements[d.parent().@label+"_"+d.@label] = btn
  62.  
  63.     btn.addEventListener(MouseEvent.CLICK, onClick);
  64. }
  65.  
  66. function onClick(evt:MouseEvent):void {
  67.     showHide(MovieClip(evt.currentTarget));
  68.     arrangeY();
  69.     trace(evt.currentTarget.value);
  70. }
  71.  
  72. function showHide(btn:MovieClip, forceHide:Boolean=false):void {
  73.     for each (var d:XML in btn.data.children()) {
  74.         var mc:MovieClip = elements[btn.data.@label+"_"+d.@label];
  75.         if (contains(mc)) {
  76.             removeChild(mc);
  77.             showHide(mc, true);
  78.         } else if (forceHide == false) {
  79.             addChild(mc);
  80.         }
  81.     }
  82. }
  83.  
  84. function arrangeY():void {
  85.     var inc:Number = 0;
  86.     for (var i:int = 0; i<elements.length; i++) {
  87.         if (contains(elements[i])) {
  88.             elements[i].y = inc * 20;
  89.             inc++;
  90.         }
  91.     }
  92. }
  93.  
  94. function numParents(e:XML):int {
  95.     var num:int = 0;
  96.     while (e.parent()!= null) {
  97.         num++;
  98.         e = e.parent();
  99.     }
  100.     return num;
  101. }

This is one of those snippets I've had laying around but never got around to posting. Next time I need to do a multi-tiered nav I'll wrap it up into a nice class (the wondeful class was done just by using my script that auto-converts timeline code to doc class code).

Posted in Uncategorized | 2 Comments