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();