Category Archives: pixel manipulation

Swirl Gradient

By Zevan | April 26, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData=new BitmapData(200,200,false,0x000000);
  2. addChild(new Bitmap(canvas));
  3. scaleX=scaleY=2;
  4. var pixNum:int=canvas.width*canvas.height;
  5.  
  6. var xp:Vector.<int> = new Vector.<int>();
  7. var yp:Vector.<int> = new Vector.<int>();
  8. var radius:Vector.<Number> = new Vector.<Number>();
  9. var theta:Vector.<Number> = new Vector.<Number>();
  10. for (var i:int = 0; i<pixNum; i++) {
  11.     xp.push(i % 200);
  12.     yp.push(int(i / 200));
  13.     var dx:Number=100-xp[i];
  14.     var dy:Number=100-yp[i];
  15.     theta.push(Math.atan2(dy, dx));
  16.     radius.push(Math.sqrt(dx * dx + dy * dy)/20);
  17. }
  18.  
  19. addEventListener(Event.ENTER_FRAME, onLoop);
  20. function onLoop(evt:Event):void {
  21.     canvas.lock();
  22.     var n:Number = mouseX / 100;
  23.     for (var i:int = 0; i<pixNum; i++) {
  24.         var swirl:Number = 1+Math.sin(6*Math.cos(radius[i]) -n*theta[i]);
  25.         canvas.setPixel(xp[i], yp[i],  Math.abs(255 - swirl * 255));
  26.     }
  27.     canvas.unlock();
  28. }

This snippet creates a swirl gradient. While this snippet is not highly optimized, it does implement a basic optimization technique ... I cache some repetitive calculations in Vectors and then use them on the main loop.

I got the function for a swirl gradient from mathworld...

Also posted in BitmapData, Math, setPixel | Tagged , | Leave a comment

Slow Line Drawing

By Zevan | March 12, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData = Bitmap(addChild(new Bitmap(new BitmapData(400, 400, false, 0x000000)))).bitmapData;
  2.  
  3. function line(x1:Number, y1:Number, x2:Number, y2:Number, res:int=10):void{
  4.     var dx:Number = x2 - x1;
  5.     var dy:Number = y2 - y1;
  6.     var dist:Number = Math.sqrt((dx * dx) + (dy * dy));
  7.     var step:Number = 1 / (dist / res);
  8.     for (var i:Number = 0; i<=1; i+= step){
  9.         // lerp : a  + (b - a) * f
  10.         canvas.setPixel(x1 + dx * i, y1 + dy * i, 0xFFFFFF);
  11.     }
  12. }
  13.  
  14. addEventListener(Event.ENTER_FRAME, onLoop);
  15. function onLoop(evt:Event):void {
  16.    canvas.fillRect(canvas.rect, 0x000000);
  17.   line(100 , 100, mouseX, mouseY,1);
  18.   line(100 + 50, 100, mouseX+ 50, mouseY,5);
  19. }

Yesterday I posted an implementation of the Bresenham Line Algorithm. Today I'm posting a comparatively slow way to draw a line with setPixel(). This snippet uses lerp and the Pythagorean theorem. It works nicely for small numbers of lines, its easy to draw dotted lines with it and its easy to explain. In a real app where you needed to use setPixel() to draw a line you should use one of the fast algorithms like Wu or Bresenham.

I didn't originally write this snippet to use set pixel... a few weeks ago I wrote something very similar to calculate a set of x y coords between two given points. In the program I used it in speed wasn't an issue (as I only needed to run the function one time). I've needed this kind of function many times before in games and small apps...

This was the original:

CLICK HERE TO COPY
Actionscript:
  1. function calculatePoints(x1:Number, y1:Number, x2:Number, y2:Number, res:int=10):Array{
  2.     var points:Array = new Array();
  3.     var dx:Number = x2 - x1;
  4.     var dy:Number = y2 - y1;
  5.     var dist:Number = Math.sqrt((dx * dx) + (dy * dy));
  6.     var step:Number = 1 / (dist / res);
  7.     for (var i:Number = 0; i<=1; i+= step){
  8.         points.push(new Point(x1 + dx * i, y1 + dy * i));
  9.     }
  10.     return points;
  11. }
  12.  
  13. trace(calculatePoints(0,0,100,0,10));
  14. /* outputs:
  15. (x=0, y=0),(x=10, y=0),(x=20, y=0),(x=30.000000000000004, y=0),(x=40, y=0),(x=50, y=0),(x=60, y=0),(x=70, y=0),(x=80, y=0),(x=89.99999999999999, y=0),(x=99.99999999999999, y=0)
  16. */

...and another version to allow you to specify the number of points to calculate rather than the pixel interval at which they should be calculated:

CLICK HERE TO COPY
Actionscript:
  1. function calculatePoints(x1:Number, y1:Number, x2:Number, y2:Number, pointNum:int=10):Array{
  2.     var points:Array = new Array();
  3.     var step:Number = 1 / (pointNum + 1);
  4.     for (var i:Number = 0; i<=1; i+= step){
  5.         points.push(new Point(x1 + (x2 - x1) * i, y1 + (y2 - y1) * i));
  6.     }
  7.     return points;
  8. }
  9.  
  10. trace(calculatePoints(0,30,30,0,1));
  11. /* outputs:
  12. (x=0, y=30),(x=15, y=15),(x=30, y=0)
  13. */

This last version isn't perfect, sometimes the pointNum will be off by 1, I may fix that in a future post.

Also posted in Math, graphics algorithms, misc, 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 BitmapData, color, graphics algorithms, setPixel | Tagged , , | 6 Comments

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 BitmapData, misc | Tagged , | 3 Comments