Monthly Archives: February 2009

Visualizing Binary Numbers Part 2

Actionscript:
  1. [SWF(width=900,height=390,backgroundColor=0x000000,frameRate=30)]
  2.  
  3. var canvas:BitmapData=new BitmapData(4,8,false,0xFFFFFFFF);
  4. var pixNum:int = canvas.width * canvas.height;
  5.  
  6. var frame:Bitmap = Bitmap(addChild(new Bitmap(canvas)));
  7. frame.scaleX = frame.scaleY = canvas.width * 10;
  8. frame.x = stage.stageWidth / 2 - frame.width / 2;
  9. frame.y =20;
  10.  
  11. var txt:TextField = TextField(addChild(new TextField()));
  12. txt.autoSize = TextFieldAutoSize.LEFT;
  13. txt.defaultTextFormat = new TextFormat("Verdana", 8, 0xFFFFFF);
  14. txt.x = frame.x - 3;
  15. txt.y = frame.y + frame.height + 10;
  16.  
  17. var s:String, a:Number = 0, d:Number = 0;
  18. var r:Number = 0xFFFFFFFF / (stage.stageWidth-20) ;
  19.  
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.      a  += (d - a) / 8;
  23.      
  24.      d = (mouseX-10) * r;
  25.      
  26.      s = Math.max(0,Math.min(0xFFFFFFFF, a)).toString(2);
  27.    
  28.      if (s.length <pixNum){
  29.         while(s.length-1 <pixNum){
  30.             s = "0" + s;
  31.         }
  32.      }
  33.      
  34.      txt.text = s;
  35.    
  36.     canvas.lock();
  37.     canvas.fillRect(canvas.rect, 0xFFFFFF);
  38.     for (var i:int = 0; i<pixNum; i++){
  39.         if (s.charAt(i) == "0"){
  40.             canvas.setPixel(i % 4,  i / 4, 0x000000);
  41.         }
  42.     }
  43.     canvas.unlock();
  44. }

Similar to yesterdays post... this snippet visualizes binary numbers. Move your mouse left and right to change the value of the number that's being displayed.

Here are a few stills:

This code uses the mouse position to choose which binary number to display. Going all the way to the left of the screen will set this number to 0 and going all the way to the right will set it to 4294967295... that number may look arbitrary unless you see it in in binary 11111111111111111111111111111111 or in hexadecimal 0xFFFFFFFF.

Posted in BitmapData, setPixel | Tagged , | Leave a comment

Visualizing Binary Numbers

Actionscript:
  1. [SWF(width=320,height=512,backgroundColor=0x000000,frameRate=30)]
  2.  
  3. var canvas:BitmapData=new BitmapData(32,512,false,0xFFFFFF);
  4. addChild(new Bitmap(canvas)).scaleX = 10;
  5.  
  6. var a:uint ;
  7. var s:String;
  8. var m:Number = 0;
  9. var d:Number = 0;
  10. var mi:int ;
  11. var r:Number = 0xFFFFFF / stage.stageWidth;
  12.  
  13. addEventListener(Event.ENTER_FRAME, onLoop);
  14.  
  15. function onLoop(evt:Event):void {
  16.    
  17.     d = mouseX * r;
  18.     m += (d - m) / 30;
  19.    
  20.     mi = int(m);
  21.  
  22.     canvas.lock();
  23.     canvas.fillRect(canvas.rect, 0xFFFFFF);
  24.  
  25.     a = 0xFFFFFFFF;
  26.     for (var i:int = 0; i<512; i++) {
  27.         s = (a -= mi).toString(2);
  28.         for (var j:int = 0; j<s.length; j++) {
  29.             if (s.charAt(j)=="0") {
  30.                 canvas.setPixel(j, i, 0x000000);
  31.             }
  32.         }
  33.     }
  34.     canvas.unlock();
  35. }

The above uses setPixel() to visualize numbers in binary format. You can move your mouse left and right to change an incremental counting value....

Here's a still generated by this snippet:

Posted in BitmapData, misc, pixel manipulation | Tagged , | 3 Comments

Snippet Template (imports)

Actionscript:
  1. package {
  2.     import adobe.utils.*;
  3.     import flash.accessibility.*;
  4.     import flash.display.*;
  5.     import flash.errors.*;
  6.     import flash.events.*;
  7.     import flash.external.*;
  8.     import flash.filters.*;
  9.     import flash.geom.*;
  10.     import flash.media.*;
  11.     import flash.net.*;
  12.     import flash.printing.*;
  13.     import flash.profiler.*;
  14.     import flash.sampler.*;
  15.     import flash.system.*;
  16.     import flash.text.*;
  17.     import flash.ui.*;
  18.     import flash.utils.*;
  19.     import flash.xml.*;
  20.    
  21.     dynamic public class Snippet extends MovieClip {
  22.         public function Snippet() {
  23.              // paste your snippet here (functions and all)
  24.         }
  25.     }
  26. }

This snippet imports all flash packages and is dynamic... you can copy actionsnippet code into the constructor of this file if you use Flex, FlashDevelop, TextMate etc... I tested it with a bunch of snippets and it seems to work nicely.

When I first teach classes in AS3 this is the template I use:

Actionscript:
  1. package{
  2.     import flash.display.*;
  3.     import flash.events.*;
  4.      
  5.     public class Main extends Sprite{
  6.         // etc...
  7.     }
  8. }

Display and events cover a lot of ground..... next one I find myself adding is flash.geom, followed by flash.net... I'd say those are my top 4 most frequently used packages.... I do lots of text layout in the Flash IDE, otherwise flash.text would be in there....

Posted in OOP, dynamic, misc, timeline | Tagged , | 4 Comments

Static Stage and More…

Actionscript:
  1. package {
  2.     import flash.display.*;
  3.  
  4.     public class Main extends MovieClip{
  5.    
  6.         private static var _display:MovieClip;
  7.         private static var _stage:Stage;
  8.        
  9.         // use getters instead of public static vars so they
  10.         // cannot be reset outside of Main
  11.         public static function get display():MovieClip{
  12.             return _display;
  13.         }
  14.        
  15.         public static function get stage():Stage{
  16.             return _stage;
  17.         }
  18.        
  19.         public function Main(){
  20.            Main._display = this;
  21.            Main._stage = stage;
  22.            
  23.            // test out the static references
  24.            var t:Test = new Test();
  25.         }
  26.     }
  27. }
  28.  
  29. class Test{
  30.     public function Test(){
  31.         // test out the static references
  32.         with(Main.display.graphics){
  33.             lineStyle(1, 0xFF0000);
  34.             for (var i:int = 0; i<100; i++){
  35.                 lineTo(Math.random() * Main.stage.stageWidth,
  36.                        Math.random() * Main.stage.stageHeight);
  37.             }
  38.         }
  39.     }
  40. }

This snippet creates two private static variables that reference the stage and the main timeline/document class. It then uses getters to regulate the use of these static vars so that they cannot be reset from outside the Main class.

Sometimes the amount of extra coding you need to do to maintain a valid stage reference can be cumbersome... similarly, passing references of the document class all around your app can be annoying. If you don't mind using two global vars in your app... this trick can come in handy.

What's nice about using getters here is that if someone tries to do this:

Actionscript:
  1. Main.display = new MovieClip();

they'll get an error... in flex, you even see that little red ex pop up next to this line of code if you write it :) ... that wouldn't happen with a public static var....

Posted in DisplayObject, OOP, variables | Tagged , , | Leave a comment