Monthly Archives: February 2009

Snap to Grid

By Zevan | February 21, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 400)]
  2.  
  3. // draw the same grid as yesterday
  4. var tileSize:int = 40;
  5. var cols:int = stage.stageWidth / tileSize;
  6. var rows:int = stage.stageHeight / tileSize;
  7. var grid:Sprite = Sprite(addChild(new Sprite()));
  8. grid.graphics.lineStyle(0,0x000000);
  9. var i:int = 0;
  10. for (i = 1; i<cols; i++){
  11.     var posX:Number = i * tileSize
  12.     grid.graphics.moveTo(posX, 0);
  13.     grid.graphics.lineTo(posX, stage.stageHeight);
  14. }
  15. for (i = 1; i<rows; i++){
  16.     var posY:Number = i * tileSize
  17.     grid.graphics.moveTo(0, posY);
  18.     grid.graphics.lineTo(stage.stageWidth, posY);
  19. }
  20.  
  21. //
  22. // -- add a circle that snaps to the grid when dragged
  23. //
  24. var circle:Sprite = Sprite(addChild(new Sprite()));
  25. with (circle.graphics) beginFill(0xFF0000), drawCircle(0,0,10);
  26. circle.x = circle.y =  tileSize * 3;
  27. circle.buttonMode = true;
  28.  
  29. circle.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  30. function onDown(evt:MouseEvent):void {
  31.     addEventListener(Event.ENTER_FRAME, onRunSnapping);
  32. }
  33.  
  34. function onRunSnapping(evt:Event):void {
  35.     circle.x =  Math.round(mouseX / tileSize) * tileSize;
  36.     circle.y =  Math.round(mouseY / tileSize) * tileSize;
  37. }
  38.  
  39. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  40. function onUp(evt:MouseEvent):void {
  41.     removeEventListener(Event.ENTER_FRAME, onRunSnapping);
  42. }

This builds on yesterdays post by adding a draggable red circle that snaps to the grid. This is the real trick:

CLICK HERE TO COPY
Actionscript:
  1. circle.x =  Math.round(mouseX / tileSize) * tileSize;
  2. circle.y =  Math.round(mouseY / tileSize) * tileSize;

Posted in Graphics, UI, motion | Tagged , | Leave a comment

Stage Grid

By Zevan | February 20, 2009
CLICK HERE TO COPY
Actionscript:
  1. // try changing the size of  the stage
  2. [SWF(width = 600, height = 400)]
  3.  
  4. // try changing the tile size (make sure swf width and height are evenly divisible by this number)
  5. var tileSize:int = 20;
  6.  
  7.  
  8. var cols:int = stage.stageWidth / tileSize;
  9. var rows:int = stage.stageHeight / tileSize;
  10.  
  11. var grid:Sprite = Sprite(addChild(new Sprite()));
  12. grid.graphics.lineStyle(0,0x000000);
  13.  
  14. var i:int = 0;
  15.  
  16. for (i = 1; i<cols; i++){
  17.     var posX:Number = i * tileSize
  18.     grid.graphics.moveTo(posX, 0);
  19.     grid.graphics.lineTo(posX, stage.stageHeight);
  20. }
  21. for (i = 1; i<rows; i++){
  22.     var posY:Number = i * tileSize
  23.     grid.graphics.moveTo(0, posY);
  24.     grid.graphics.lineTo(stage.stageWidth, posY);
  25. }

This is a quick way to fill the stage with a grid. I like my grids to have square tiles with sizes like 5x5, 10x10 20x20 etc.... So as long as you make sure that you're swf width and height are evenly divisible by your tileSize, this snippet will work nicely.

Posted in Graphics | Tagged , | Leave a comment

Tausworthe Random Numbers (seeded)

By Zevan | February 19, 2009
CLICK HERE TO COPY
Actionscript:
  1. // best thing about this are the random seeds
  2. var s1:Number= 0xFFFFFF;
  3. var s2:Number = 0xCCCCCC;
  4. var s3:Number= 0xFF00FF;
  5.  
  6. // saw this algorithm on this somewhat annoying thread:
  7. // http://www.reddit.com/r/programming/comments/7yjlc/why_you_should_never_use_rand_plus_alternative/
  8. // additional googling brought me to this: http://wakaba.c3.cx/soc/kareha.pl/1100499906/
  9. // and finally to this ( didn't understand most of this one) www.ams.org/mcom/1996-65-213/S0025-5718-96-00696-5/S0025-5718-96-00696-5.pdf
  10.  
  11. function rand():Number {
  12.     s1=((s1&4294967294)<<12)^(((s1<<13)^s1)>>19);
  13.     s2=((s2&4294967288)<<4)^(((s2<<2)^s2)>>25);
  14.     s3=((s3&4294967280)<<17)^(((s3<<3)^s3)>>11);
  15.     var r:Number = (s1^s2^s3) * 2.3283064365e-10;
  16.     r = (r<0) ? r+=1 : r;
  17.     return r;
  18. }
  19.  
  20. // see a visual comparison between this and actionscript's Math.random()
  21.  
  22. var canvas:BitmapData = new BitmapData(400,400,false, 0xCCCCCC);
  23. addChild(new Bitmap(canvas));
  24.  
  25. var posX:Number;
  26. var posY:Number;
  27.  
  28. addEventListener(Event.ENTER_FRAME, onLoop);
  29.  
  30. function onLoop(evt:Event):void {
  31.  
  32.     for (var i:int = 0; i<100; i++){
  33.         posX = rand() * 180
  34.         posY = rand() * 180
  35.         canvas.setPixel( 100 + posX, 10 + posY, 0x000000);
  36.     }
  37.    
  38.     for (i = 0; i<100; i++){
  39.         posX = Math.random() * 180
  40.         posY = Math.random() * 180
  41.         canvas.setPixel( 100 + posX, 210 + posY, 0x000000);
  42.     }
  43. }

The above snippet demo's an alternative random number generator that uses the Tausworthe method.


Top square is Tausworthe and bottom is Math.random()

I don't actually know much about this, or fully understand how it works. I just saw it on a random reddit thread, googled about it for a few minutes and then ported it to actionscript.

There's lots of talk about what the BEST random number generator is.... which one is the fastest, which one is the most random. etc... I don't really know much about that, especially since I'm just playing around with code and I don't need a RNG for some scientific experiment. For me, what's nice about this approach is the three random seeds. For some reason, Math.random() doesn't have a place where you can enter a seed for random numbers. Random seeds are very useful when you want to do something random but want to be able to replicate the random results at a later time. For instance:

CLICK HERE TO COPY
Actionscript:
  1. var s1:Number= 0xFFFFFF;
  2. var s2:Number = 0xCCCCCC;
  3. var s3:Number= 0xFF00FF;
  4.  
  5. trace("first three values:");
  6. trace(rand());
  7. trace(rand())
  8. trace(rand())
  9.  
  10. s1 = 0xFF;
  11. s2 = 0xEFEFEF;
  12. s3 = 19008;
  13.  
  14. trace("\nfirst three values with different seeds:");
  15. trace(rand());
  16. trace(rand())
  17. trace(rand())
  18.  
  19. s1 = 0xFFFFFF;
  20. s2  = 0xCCCCCC;
  21. s3 = 0xFF00FF;
  22.  
  23. trace("\noriginal three values:");
  24. trace(rand());
  25. trace(rand())
  26. trace(rand())
  27.  
  28. function rand():Number {
  29.     s1=((s1&4294967294)<<12)^(((s1<<13)^s1)>>19);
  30.     s2=((s2&4294967288)<<4)^(((s2<<2)^s2)>>25);
  31.     s3=((s3&4294967280)<<17)^(((s3<<3)^s3)>>11);
  32.     var r:Number = (s1^s2^s3) * 2.3283064365e-10;
  33.     r = (r<0) ? r+=1 : r;
  34.     return r;
  35. }
  36.  
  37. /*
  38. outputs:
  39. first three values:
  40. 0.051455706589931385
  41. 0.050584114155822715
  42. 0.417276361484596
  43.  
  44. first three values with different seeds:
  45. 0.6032885762463134
  46. 0.9319786790304015
  47. 0.8631882804934321
  48.  
  49. original three values:
  50. 0.051455706589931385
  51. 0.050584114155822715
  52. 0.417276361484596
  53. */

I stumbled upon a bunch of other random number algorithms, maybe I'll throw them in a class in the next couple days.

Posted in Number, misc | Tagged , | 2 Comments

Dial UI, Record Scratch etc…

By Zevan | February 18, 2009
CLICK HERE TO COPY
Actionscript:
  1. var angOffset:Number = 0;
  2. var percent:Number  = 0;
  3.  
  4. var dial:Sprite = Sprite(addChild(new Sprite()));
  5. with(dial.graphics) lineStyle(1, 0x000000), beginFill(0xCCCCCC), drawCircle(0,0,100), lineTo(0,0);
  6. dial.x = stage.stageWidth / 2;
  7. dial.y = stage.stageHeight / 2;
  8.  
  9. dial.addEventListener(MouseEvent.MOUSE_DOWN, onDialDown);
  10. stage.addEventListener(MouseEvent.MOUSE_UP, onStageUp);
  11. function onDialDown(evt:MouseEvent):void {
  12.     calcOffset();
  13.     dial.addEventListener(Event.ENTER_FRAME, onRotateDial);
  14. }
  15.  
  16. function calcOffset():void {
  17.     angOffset = Math.atan2(mouseY - dial.y, mouseX - dial.x) / Math.PI * 180 - dial.rotation;
  18. }
  19.  
  20. function onRotateDial(evt:Event):void {
  21.     dial.rotation =  Math.atan2(mouseY - dial.y, mouseX - dial.x) / Math.PI * 180 - angOffset;
  22.     percent = dial.rotation;
  23.     if (percent <0){
  24.         percent += 360;
  25.     }
  26.     percent /= 360;
  27.     // range 0 - 1
  28.     trace(percent);
  29. }
  30.  
  31. function onStageUp(evt:Event):void {
  32.     dial.removeEventListener(Event.ENTER_FRAME, onRotateDial);
  33. }

The above shows the meat of what you need to create some kind of dial UI... this would also work well if you need to create an interactive turntable (record scratching etc...).

Everytime I needed to create dials for UI, the client wanted left -> right mouse motion rather than a circular... like what you see in Reason. Someone recently asked me how to do a circular motion style dial and this is the technique I came up with.

Posted in UI | Tagged , | Leave a comment