Category Archives: BitmapData

Bresenham line

By Zevan | March 11, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData = Bitmap(addChild(new Bitmap(new BitmapData(400,400, false, 0x000000)))).bitmapData;
  2.  
  3. drawLine(10,10,100,90, 0xFF0000);
  4. drawLine(100,90,60,80, 0xFF0000);
  5. drawLine(100,90,95,60, 0xFF0000);
  6.    
  7. for (var i:int = 0; i<100; i+=1){
  8.     drawLine(i *4, 100 + i, 200, 390);
  9. }
  10. // code ported from here:
  11. // http://www.edepot.com/linebenchmark.html
  12. function drawLine(x1:int, y1:int, x2:int, y2:int, col:uint = 0xFFFFFF){
  13.     var x:int, y:int;
  14.     var dx:int, dy:int;
  15.     var incx:int , incy:int
  16.     var balance:int;
  17.  
  18.     if (x2>= x1){
  19.         dx = x2 - x1;
  20.         incx = 1;
  21.     }else{
  22.         dx = x1 - x2;
  23.         incx = -1;
  24.     }
  25.  
  26.     if (y2>= y1){
  27.         dy = y2 - y1;
  28.         incy = 1;
  29.     }else{
  30.         dy = y1 - y2;
  31.         incy = -1;
  32.     }
  33.  
  34.     x = x1;
  35.     y = y1;
  36.  
  37.     if (dx>= dy){
  38.         dy <<= 1;
  39.         balance = dy - dx;
  40.         dx <<= 1;
  41.  
  42.         while (x != x2){
  43.             canvas.setPixel(x, y, col);
  44.             if (balance>= 0){
  45.                 y += incy;
  46.                 balance -= dx;
  47.             }
  48.             balance += dy;
  49.             x += incx;
  50.         }
  51.         canvas.setPixel(x, y, col);
  52.     }else{
  53.         dx <<= 1;
  54.         balance = dx - dy;
  55.         dy <<= 1;
  56.  
  57.         while (y != y2){
  58.             canvas.setPixel(x, y, col);
  59.             if (balance>= 0){
  60.                 x += incx;
  61.                 balance -= dy;
  62.             }
  63.             balance += dx;
  64.             y += incy;
  65.         }
  66.         canvas.setPixel(x, y, col);
  67.     }
  68. }

This snippet shows Brensenham's line drawing algorithm. I ported this implementation from here... all the line algorithms in that link are easy to port to actionscript. I've messed with them all at some point.

Tomorrow I'm going to post a super slow line drawing algorithm... so I figured I'd post a fast line drawing algorithm today.

Also posted in graphics algorithms, setPixel | 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.

Also posted in color, graphics algorithms, pixel manipulation, setPixel | Tagged , , | 6 Comments

Visualizing Binary Numbers Part 2

By Zevan | February 4, 2009
CLICK HERE TO COPY
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.

Also posted in setPixel | Tagged , | Leave a comment

Visualizing Binary Numbers

By Zevan | February 3, 2009
CLICK HERE TO COPY
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:

Also posted in misc, pixel manipulation | Tagged , | 3 Comments