Tag Archives: actionscript

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 | Also 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 | Also tagged | Leave a comment

lineTo() w/ drawCircle()

By Zevan | February 17, 2009
CLICK HERE TO COPY
Actionscript:
  1. var dial:Sprite = Sprite(addChild(new Sprite()));
  2. with(dial.graphics) lineStyle(1, 0x000000), beginFill(0xCCCCCC), drawCircle(0,0,100), lineTo(0,0);
  3. dial.x = stage.stageWidth / 2;
  4. dial.y = stage.stageHeight / 2;

This snippet shows how you can combine drawCircle() and lineTo() to quickly draw a clock/dial primitive shape. I'll use this in tomorrows snippet...

Posted in Graphics | Also tagged | Leave a comment

(HSV HSB) to RGB

By Zevan | February 16, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=720,height=360,backgroundColor=0x000000,frameRate=30)]
  2.  
  3. // ported from here:
  4. //http://www.cs.rit.edu/~ncs/color/t_convert.html
  5.  
  6. function hsv(h:Number, s:Number, v:Number):Array{
  7.     var r:Number, g:Number, b:Number;
  8.     var i:int;
  9.     var f:Number, p:Number, q:Number, t:Number;
  10.      
  11.     if (s == 0){
  12.         r = g = b = v;
  13.         return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  14.     }
  15.    
  16.     h /= 60;
  17.     i  = Math.floor(h);
  18.     f = h - i;
  19.     p = v *  (1 - s);
  20.     q = v * (1 - s * f);
  21.     t = v * (1 - s * (1 - f));
  22.    
  23.     switch( i ) {
  24.         case 0:
  25.             r = v;
  26.             g = t;
  27.             b = p;
  28.             break;
  29.         case 1:
  30.             r = q;
  31.             g = v;
  32.             b = p;
  33.             break;
  34.         case 2:
  35.             r = p;
  36.             g = v;
  37.             b = t;
  38.             break;
  39.         case 3:
  40.             r = p;
  41.             g = q;
  42.             b = v;
  43.             break;
  44.         case 4:
  45.             r = t;
  46.             g = p;
  47.             b = v;
  48.             break;
  49.         default:        // case 5:
  50.             r = v;
  51.             g = p;
  52.             b = q;
  53.             break;
  54.     }
  55.     return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  56. }
  57.  
  58.  
  59. //
  60. //  -- test it out by drawing a few things
  61. //
  62.  
  63. var canvas:BitmapData = new BitmapData(720, 360, false, 0x000000);
  64.  
  65. addChild(new Bitmap(canvas));
  66.  
  67. canvas.lock();
  68. var size:int = canvas.width * canvas.height;
  69. var xp:int, yp:int, c:Array, i:int;
  70.  
  71. for (i = 0; i<size; i++){
  72.     xp = i % 360;
  73.     yp = i / 360;
  74.     c =  hsv(xp, 1, yp / 360);
  75.     canvas.setPixel(xp, yp, c[0] <<16 | c[1] <<8 | c[2]);
  76. }
  77.  
  78. var dx:Number, dy:Number, dist:Number, ang:Number;
  79.  
  80. for (i = 0; i<size; i++){
  81.     xp = i % 360;
  82.     yp = i / 360;
  83.     dx = xp - 180;
  84.     dy = yp - 180;
  85.     dist = 1 - Math.sqrt((dx * dx) + (dy * dy)) / 360;
  86.     ang = Math.atan2(dy, dx) / Math.PI * 180;
  87.     if (ang <0){
  88.         ang += 360;
  89.     }
  90.     c =  hsv(ang, 1, dist);
  91.     canvas.setPixel(360 + xp, yp, c[0] <<16 | c[1] <<8 | c[2]);
  92. }
  93. canvas.unlock();

This is one of those things I've been meaning to play with for awhile. The above demos a function called hsv() which takes 3 arguments: angle (0-360), saturation(0-1) and value(0-1). The function returns an array of rgb values each with a range of (0-255).

There's some room for optimization here, but for clarity I left as is. Even just playing with HSV (also know as HSB) for a few minutes, I see some interesting potential for dynamically generating color palettes for generative style experiments.

I looked around for the most elegant looking code snippet to port in order to write this... I eventually stumbled upon this great resource.

If you test the above on your timeline it will generate this image:

I usually only post one snippet a day... not sure why I decided to post two today.

Posted in BitmapData, color, graphics algorithms, pixel manipulation, setPixel | Also tagged , | 6 Comments