Tag Archives: color

(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

Basic Tint Function

By Zevan | November 17, 2008
CLICK HERE TO COPY
Actionscript:
  1. // display object, red (0-255), green, blue, amount (0-1)
  2. function tint(dsp:DisplayObject, r:Number, g:Number, b:Number, amount:Number=1):void {
  3.     if (amount != 1) {
  4.         r *= amount;
  5.         g *= amount;
  6.         b *= amount;
  7.     }
  8.     amount = 1-amount;
  9.     var ct:ColorTransform = transform.colorTransform;
  10.     ct.redOffset = r;
  11.     ct.redMultiplier = amount;
  12.     ct.greenOffset = g;
  13.     ct.greenMultiplier = amount;
  14.     ct.blueOffset = b;
  15.     ct.blueMultiplier = amount;
  16.     dsp.transform.colorTransform = ct;
  17. }
  18.  
  19. // test out the tint function on a circle with a stroke:
  20. var circle:Shape = Shape(addChild(new Shape()));
  21. with (circle.graphics) {
  22.     lineStyle(5, 0x339999);
  23.     beginFill(0x003333);
  24.     drawCircle(0,0,50);
  25.     x = 100;
  26.     y = 100;
  27. }
  28.  
  29. // tint the circle 50% green
  30. tint(circle, 0, 255, 0, .5);

The ColorTransform object is a little confusing with its "redMultiplier, redOffset, greenMultiplier etc..." properties. Once you understand them it's not a big deal, but I still find them a bit cumbersome. So when I just want to tint a clip similar to the way you might tint a clip in the IDE... I use this tint function. Rather than taking a hexidecimal number it takes values for red, green and blue (0-255) - and an amount argument (0-1).

Posted in color | Also tagged , , | 1 Comment

XOR Color Invert

By Zevan | November 7, 2008
CLICK HERE TO COPY
Actionscript:
  1. var yellow:uint = 0xFFFF00;
  2.  
  3. // draws yellow circle
  4. with(graphics) beginFill(yellow), drawCircle(100,100,50);
  5.  
  6. // invert the color using XOR assignment
  7. // yellow becomes 0x0000FF
  8. yellow ^= 0xFFFFFF;
  9.  
  10. // draws blue  circle
  11. with(graphics) beginFill(yellow), drawCircle(200,100,50);

Just a fun use for XOR. You could also do it without XOR assignment:

CLICK HERE TO COPY
Actionscript:
  1. with(graphics) beginFill(yellow ^ 0xFFFFFF), drawCircle(200,100,50);

Playing a little with bitwise operators is a good way to make sure you understand them. Try tweaking this trace statement:

CLICK HERE TO COPY
Actionscript:
  1. trace((0x543210 ^ 0xFFFFFF).toString(16));

If you'd like to read about bitwise operators, I recommend wikipedia's article.

Posted in Operators, one-liners | Also tagged , | Leave a comment