Jim Rogers

Lives in Baton Rouge, LA, with two dogs, one cat, and one lovely wife. I'm a lead developer for GCR & Associates.

Katrin and Jim

Month List

RBG from HSV

by Jim Nov 13, 2007 3:10 PM

I needed to convert HSV (Hue, Saturation, Value) colors to RGB to make a hue control for my AS3 project. I found a function to do this and ported it, so here goes:

// Get an RGB value as uint from hue, saturation, value
// Each argument has the range 0 to 1
private function getRBGfromHSV(H:Number, S:Number, V:Number):uint
{
  // Adapted from: http://easyrgb.com/math.php?MATH=M21#text21
  var R:uint, G:uint, B:uint;
  var var_h:Number;
  var var_i:int;
  var var_1:Number, var_2:Number, var_3:Number;
  var var_r:Number, var_g:Number, var_b:Number;
 
  if (S == 0)
  {
     R = V * 255;
     G = V * 255;
     B = V * 255;
  }
  else
  {
     var_h = H * 6;
     if ( var_h >= 6 )
       var_h = 0;         // H must be < 1
     var_i = Math.floor(var_h);   
     var_1 = V * ( 1 - S );
     var_2 = V * ( 1 - S * ( var_h - var_i ) );
     var_3 = V * ( 1 - S * ( 1 - ( var_h - var_i ) ) );

     if      ( var_i == 0 ) { var_r = V     ; var_g = var_3 ; var_b = var_1; }
     else if ( var_i == 1 ) { var_r = var_2 ; var_g = V     ; var_b = var_1; }
     else if ( var_i == 2 ) { var_r = var_1 ; var_g = V     ; var_b = var_3; }
     else if ( var_i == 3 ) { var_r = var_1 ; var_g = var_2 ; var_b = V    ; }
     else if ( var_i == 4 ) { var_r = var_3 ; var_g = var_1 ; var_b = V    ; }
     else                   { var_r = V     ; var_g = var_1 ; var_b = var_2; }
 
     R = var_r * 255;
     G = var_g * 255;
     B = var_b * 255;
  }
  return (R << 16) + (G << 8) + B;
}

That's in ActionScript 3, but it would be trivial to convert it to Javascript.

And to make a hue gradient, or "rainbow" gradient:

var g:Graphics = mDialog.graphics;

g.lineStyle(0, 0, 0);

var colors:Array = new Array();
var positions:Array = new Array();
var alphas:Array = new Array();
for (var h:Number = 0; h <= 1.01; h += .0833333)
{
  colors.push(getRBGfromHSV(h, 1.0, 1.0));
  positions.push(255 * h);
  alphas.push(1.0);
}

// The matrix will rotate my gradient 90 degrees
var gradientMatrix:Matrix = new Matrix();
gradientMatrix.createGradientBox(mHueRect.width, mHueRect.height, Math.PI/2.0);
gradientMatrix.translate(mHueRect.x, mHueRect.y);
g.beginGradientFill(GradientType.LINEAR, 
  colors,
  alphas, 
  positions, 
  gradientMatrix);
g.drawRect(mHueRect.x, mHueRect.y, mHueRect.width, mHueRect.height);
g.endFill();

Tags:

Code

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading