Monthly Archives: February 2009

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 | 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 | Tagged , , | 6 Comments

Math.min() Math.max() …rest

By Zevan | February 16, 2009
CLICK HERE TO COPY
Actionscript:
  1. trace("min", Math.min(100, 99, 32, 75, 44, 90));
  2. trace("max", Math.max(100, 99, 32, 75, 44, 90));
  3. /*outputs:
  4. 32
  5. 100
  6. */

It's easy not to notice that Math.min() and Math.max() can take any number of arguments. I've seen people nest min/max calls instead of using the above option.... like this:

CLICK HERE TO COPY
Actionscript:
  1. trace(Math.min(1, Math.min(2, 3)));

Posted in misc | Tagged , | Leave a comment

Simple BlendMode Nav

By Zevan | February 15, 2009
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate=30;
  2. var nav:Sprite = Sprite(addChild(new Sprite()));
  3. nav.x=nav.y=150;
  4.  
  5. var cover:Sprite;
  6. var coverDest:Number=0;
  7. var spacing:int=4;
  8. var btnNum:int=6;
  9.  
  10. buildNav();
  11.  
  12. addEventListener(Event.ENTER_FRAME, onLoop);
  13.  
  14. function onLoop(evt:Event):void {
  15.     cover.x += (coverDest - cover.x) /4;
  16. }
  17.  
  18. function buildNav():void {
  19.     for (var i:int = 0; i<btnNum; i++) {
  20.         var b:Sprite=makeBox(50,50);
  21.         b.x = i * (b.width + spacing);
  22.         b.buttonMode=true;
  23.         b.addEventListener(MouseEvent.CLICK, onClick);
  24.     }
  25.     cover=makeBox(54, 60);
  26.     cover.blendMode=BlendMode.INVERT;
  27. }
  28.  
  29. function onClick(evt:MouseEvent):void {
  30.     coverDest=evt.currentTarget.x;
  31. }
  32.  
  33. function makeBox(w:Number, h:Number) {
  34.     var b:Sprite = new Sprite();
  35.     with (b.graphics) {
  36.         beginFill(0x000000),drawRect(-w/2,-h/2,w,h);
  37.     }
  38.     nav.addChild(b);
  39.     return b;
  40. }

This is something I do in my intermediate flash classes... the only difference is that we do the graphics in the flash IDE during class time instead of drawing them with ActionScript.

Posted in motion | Tagged , | Leave a comment