more(nesting(functions(graphDrawing)));

By Zevan | March 23, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=800, height=600)]
  2.  
  3. var canvas:Graphics;
  4. var graphData:Array = sineData();
  5.  
  6. var graph0:Shape = Shape(addChild(new Shape()));
  7. graph0.x = 50;
  8. graph0.y = 150;
  9.  
  10. var graph1:Shape = Shape(addChild(new Shape()));
  11. graph1.x = 400;
  12. graph1.y = 150;
  13.  
  14. var graph2:Shape = Shape(addChild(new Shape()));
  15. graph2.x = 50;
  16. graph2.y = 400;
  17.  
  18. // use graphData to draw 3 different looking graphs:
  19.  
  20. canvas = graph0.graphics;
  21. axis(lines(graphData));
  22.  
  23. canvas = graph1.graphics;
  24. axis(dots(graphData, 0xFF0000), 0xFFCC00, 2);
  25.  
  26. canvas = graph2.graphics;
  27. axis(dots(dots(lines(lines(graphData, 0xCCCCCC, 20))), 0x0022FF, 0, 4), 0xFF);
  28.  
  29.  
  30. // generate data
  31. function sineData():Array{
  32.     var dat:Array = new Array();
  33.     for (var i:int = 0; i<60; i++){
  34.         dat.push(new Point(i * 4,  (30 + i) * Math.sin(i * 24 * Math.PI/180)));
  35.     }            
  36.     return dat;
  37. }
  38.  
  39. // render lines
  40. function lines(dat:Array, col:uint=0x000000, thick:Number=0):Array{
  41.     canvas.lineStyle(thick, col);
  42.     canvas.moveTo(dat[0].x, dat[0].y)
  43.     for (var i:int = 1; i<dat.length; i++){
  44.          canvas.lineTo(dat[i].x, dat[i].y);
  45.     }
  46.     return dat;
  47. }
  48.  
  49. // render dots
  50. function dots(dat:Array, col:uint=0xFF0000, thick:Number=0, rad:Number=1.5):Array{
  51.     canvas.lineStyle(thick, col);
  52.     for (var i:int = 0; i<dat.length; i++){
  53.          canvas.drawCircle(dat[i].x, dat[i].y, rad);
  54.     }
  55.     return dat;
  56. }
  57.  
  58. // render graph axis
  59. function axis(dat:Array, col:uint=0x000000, thick:Number=0):Array{
  60.     var d:Array = dat.concat();
  61.     d.sortOn("y", Array.NUMERIC);
  62.     var lastIndex:int = d.length - 1;
  63.     var minY:Number = d[0].y;
  64.     var maxY:Number = d[lastIndex].y;
  65.     d.sortOn("x", Array.NUMERIC);
  66.     var minX:Number = d[0].x;
  67.     var maxX:Number = d[lastIndex].x;
  68.     canvas.lineStyle(thick, col, .2);
  69.     canvas.moveTo(minX, 0);
  70.     canvas.lineTo(maxX, 0);
  71.     canvas.lineStyle(thick, col);
  72.     canvas.moveTo(minX, minY);
  73.     canvas.lineTo(minX, maxY);
  74.     canvas.lineTo(maxX, maxY);
  75.     return dat;
  76. }

This is something I've been meaning to post for awhile. Finally had time to write it today... It contains functions that are designed to be nested for the purpose of rendering a small data set in a few different ways...

The upper left image is rendered with axis labels and lines... and it defaults to the color black (line 21):

axis(lines(graphData));

The upper right image is rendered with yellow axis and red dots (line 24):

axis(dots(graphData, 0xFF0000), 0xFFCC00, 2);

etc... (line 27)
axis(dots(dots(lines(lines(graphData, 0xCCCCCC, 20))), 0x0022FF, 0, 4), 0xFF);

Alternatively you could write each function call on one line:

lines(graphData, 0xCCCCCC, 20);
lines(graphData);
dots(graphData);
dots(graphData, 0x0022FF, 0, 4)
axis(graphData, 0xFF);

NOTE: If you think this post is insane, please read the warning page of this site...

Posted in Graphics, functions, misc | Tagged , | Leave a comment

Torus 3D

By Zevan | March 22, 2009
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate = 30;
  2. const TWO_PI:Number = Math.PI * 2;
  3. var centerX:Number = 200;
  4. var centerY:Number = 200;
  5. var p:Array = new Array();
  6. var zpos:Number;
  7. var xpos:Number;
  8. var ypos:Number;
  9. var depth:Number;
  10. var canvas:BitmapData = new BitmapData(400,400,true,0xFF000000);
  11. addChild(new Bitmap(canvas));
  12.  
  13. var dy:Number = 0
  14. var dx:Number = 0;
  15.  
  16. addEventListener(Event.ENTER_FRAME, onLoop);
  17. function onLoop(evt:Event):void {
  18.     canvas.fillRect(canvas.rect, 0xFF000000);
  19.      
  20.      dx += (mouseX / 100 - dx)/12;
  21.      dy += (mouseY / 100 - dy)/12;
  22.      var xp:Number, yp:Number, zp:Number;
  23.      
  24.      canvas.lock();
  25.      for (var a:Number =0; a <TWO_PI; a+=.08){
  26.           for (var b:Number =0; b <TWO_PI; b+=.08){
  27.               xp = (70 + 40 * Math.cos(a)) * Math.cos(b) ;
  28.               yp = (70 + 40 * Math.cos(a)) * Math.sin(b);
  29.               zp =  40 * Math.sin(a);
  30.               calc3D(xp, yp, zp, dx, dy);
  31.               convert3D();
  32.               canvas.setPixel(p[0], p[1], 0xFFFFFF);
  33.           }
  34.      }
  35.      canvas.unlock();
  36. }
  37. function calc3D(px:Number, py:Number, pz:Number, rotX:Number=0, rotY:Number=0):void {
  38.     // I first learned this from code by Andries Odendaal - www.wireframe.co.za
  39.     zpos=pz*Math.cos(rotX)-px*Math.sin(rotX) ;
  40.     xpos=pz*Math.sin(rotX)+px*Math.cos(rotX) ;
  41.     ypos=py*Math.cos(rotY)-zpos*Math.sin(rotY) ;
  42.     zpos=py*Math.sin(rotY)+zpos*Math.cos(rotY);
  43. }
  44. function convert3D():void {
  45.     depth = 1/((zpos/200)+1);
  46.     p[0] =  xpos * depth + centerX;
  47.     p[1] =  ypos * depth + centerY;
  48. }

This code draws a rotating 3D torus using setPixel().

Posted in 3D, BitmapData | Tagged , | Leave a comment

Flashvars

By Zevan | March 22, 2009
CLICK HERE TO COPY
Actionscript:
  1. // variable is passed into the swf via Javascript (most likely swfObject)
  2. // myswf.swf?myFlashVar="a new value"
  3.  
  4. var myFlashVar:String = "Some Default Value";
  5. if (root.loaderInfo.parameters.myFlashVar){
  6.    myFlashVar = root.loaderInfo.parameters.myFlashVar;
  7. }

Getting at flashvars in AS3 requires a bit more typing than it did in AS2. Above is a technique I find myself using from time to time. Usually for paths to xml or dynamic callouts (large buttons with text, an image and a link that change frequently).

Posted in dynamic, misc | Tagged , | Leave a comment

Low Precision Sine and Cosine

By Zevan | March 21, 2009
CLICK HERE TO COPY
Actionscript:
  1. var t:Number=0, cos:Number, sin:Number;
  2.  
  3. var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
  4. addChild(new Bitmap(canvas));
  5.  
  6. var shape:Shape = new Shape();
  7. with(shape.graphics) beginFill(0x568338, .2), drawCircle(0,0,10);
  8.  
  9. addEventListener(Event.ENTER_FRAME, onLoop);
  10. function onLoop(evt:Event):void {
  11.    
  12.          t += .1;
  13.         // -- low precision sine/cosine
  14.         //always wrap input angle to -PI..PI
  15.         if (t <-3.14159265){
  16.             t += 6.28318531;
  17.         }else{
  18.         if (t>  3.14159265)
  19.             t -= 6.28318531;
  20.         }
  21.        
  22.         //compute sine
  23.         if (t <0){
  24.             sin = 1.27323954 * t + .405284735 * t * t;
  25.         }else{
  26.             sin = 1.27323954 * t - 0.405284735 * t * t;
  27.         }
  28.        
  29.         //compute cosine: sin(t + PI/2) = cos(t)
  30.         t += 1.57079632;
  31.         if (t>  3.14159265){
  32.             t -= 6.28318531;
  33.         }
  34.        
  35.         if (t <0){
  36.             cos = 1.27323954 * t + 0.405284735 * t * t
  37.         }else{
  38.             cos = 1.27323954 * t - 0.405284735 * t * t;
  39.         }
  40.         t -= 1.57079632;
  41.        
  42.         // move the shape
  43.         shape.x = 200 + 100 * cos;
  44.         shape.y = 200 + 100 * sin;
  45.        
  46.         // draw to the canvas
  47.         canvas.draw(shape, shape.transform.matrix);
  48. }

This snippet draws a circle using low precision sine and cosine... you'll notice that its not a perfect looking circle:


Back in January I saw this blog post by Michael Baczynski over at http://lab.polygonal.de/. The blog post describes a technique for fast sine and cosine approximation - (I highly recommend giving it a read - very fun stuff).

It's worth noting that there is a higher precision sine and cosine that will likely draw a better looking circle but will be about half as fast. According to the original post ... the low precision technique is approximately 14x faster than using Math.cos()/Math.sin().

There some other really great posts over at polygonal go check them out.

Posted in Math, motion | Tagged , | 2 Comments