Convert HSV to RGB

Monkey Forums/Monkey Code/Convert HSV to RGB

Duke87

(Posted 2016) [#1]

Hey monks,

I just needed a function to convert from HSV to RGB Colors.
(might be usefull if you'd like to brighten up/darken a color)

#rem
        Took Java example from
	<a href="http://stackoverflow.com/questions/7896280/converting-from-hsv-hsb-in-java-to-rgb-without-using-java-awt-color-disallowe" target="_blank">http://stackoverflow.com/questions/7896280/converting-from-hsv-hsb-in-java-to-rgb-without-using-java-awt-color-disallowe</a>
        and translated into Monkey
#end 


#rem
 * @param _Hue
     *            0-360
     * @param _Saturation
     *            0-100
     * @param _Value
     *            0-100
     * @return color-Array [0]-Red ; [1]-Green ; [2]-Blue
#end 
Function hsv2rgb:float[](_Hue:Float,_Saturation:Float,_Value:Float)

	Local R:Float, G:Float, B:float

    _Hue /= 360.0
    _Saturation /= 100.0
    _Value /= 100.0

    if (_Saturation = 0)
    	R = _Value * 255
        G = _Value * 255
        B = _Value * 255
            
    Else 
     
        Local var_h:float = _Hue * 6
        if (var_h = 6)
        	var_h = 0	'; // H must be < 1
        Endif 
        
        local var_i:int = int(var_h)'; // Or ... var_i =
                                                            '// floor( var_h )
        Local var_1:float = _Value * (1 - _Saturation)
        Local var_2:float = _Value * (1 - _Saturation * (var_h - var_i))
        Local var_3:float = _Value * (1 - _Saturation * (1 - (var_h - var_i)))

        Local var_r:Float  
        Local var_g:Float 
        Local var_b:Float
            
        if (var_i = 0) 
        	var_r = _Value
            var_g = var_3
            var_b = var_1
                
        else if (var_i = 1) 
            var_r = var_2
            var_g = _Value
            var_b = var_1
                
        else if (var_i = 2) 
            var_r = var_1
            var_g = _Value
            var_b = var_3
                
        else if (var_i = 3) 
            var_r = var_1
            var_g = var_2
            var_b = _Value
            
        else if (var_i = 4) 
            var_r = var_3
            var_g = var_1
            var_b = _Value
                
        else 
            var_r = _Value
            var_g = var_1
            var_b = var_2
        Endif 

        R = var_r * 255'; // RGB results from 0 to 255
        G = var_g * 255';
        B = var_b * 255';
       
	Endif 
	
	Local rgb:float[] = New Float[3]
    rgb[0] = R
    rgb[1] = G
    rgb[2] = B
    'Print ""+R+"/"+G+"/"+B
    Return rgb
End Function

Edit:
here's the RGB to HSV Function

#rem

 took Java example from: <a href="http://stackoverflow.com/questions/2399150/convert-rgb-value-to-hsv" target="_blank">http://stackoverflow.com/questions/2399150/convert-rgb-value-to-hsv</a> and translated it into Monkey
 * @param _Red
     *            0-255
     * @param _Green
     *            0-255
     * @param _Blue
     *            0-255
     * @return color-Array [0]-Hue ; [1]-Saturation ; [2]-Value
#end 
Function rgb2hsv:Float[](_Red:Float,_Green:Float,_Blue:Float)
	Local arrHSV:Float[] = New Float[3]
	Local h:Float,s:Float,v:Float 
	Local min:Float,max:Float,delta:Float 
	
	min = Min(Min(_Red, _Green), _Blue)
    max = Max(Max(_Red, _Green), _Blue)

    '// V
    v = max

    delta = max - min

    '// S
     if( max <> 0 )
        s = delta / max
     else 
        s = 0
        h = -1
        arrHSV[0] = h
        arrHSV[1] = s*100.0
        arrHSV[2] =  v * 100.0/255.0
       ' Print "HSV:  " +h+"/"+(s*100.0)+"/"+ (255.0 / v * 100.0)
        return arrHSV
     Endif 

    '// H
     if( _Red = max )
        h = ( _Green - _Blue ) / delta'; // between yellow & magenta
     else if( _Green = max )
        h = 2 + ( _Blue - _Red ) / delta'; // between cyan & yellow
     else
        h = 4 + ( _Red - _Green ) / delta'; // between magenta & cyan
	Endif 
     h *= 60';    // degrees

    if( h < 0 )
        h += 360';
	Endif 
	
	arrHSV[0] = h
    arrHSV[1] = s*100.0
    arrHSV[2] = v * 100.0 / 255.0
    'Print "HSV:  " +h+"/"+(s*100.0)+"/"+ (255.0 / v * 100.0)
    return  arrHSV
End Function

Feel free to play with it.
If there are any bugs, please let me know.

bye Duke

Duke87

(Posted 2016) [#2]

Here's a little example for how to use these functions for adjusting the brightness of a color.

Import mojo


#rem
	#### HEADER ####
	Here you can find some predefining Settings for your App.
	(e.g. Name, Size, Version, etc.)
#end 
#GLFW_WINDOW_TITLE			="My Windows Title"
#GLFW_WINDOW_WIDTH			=600
#GLFW_WINDOW_HEIGHT			=800

#ANDROID_APP_LABEL			="My Android Title"
#ANDROID_APP_PACKAGE		="de.maniac.example1"
#ANDROID_SCREEN_ORIENTATION	="portrait"					'"user", "portrait", "landscape"
#ANDROID_GAMEPAD_ENABLED	=False
#ANDROID_VERSION_CODE		="1"
#ANDROID_VERSION_NAME		="0.1"


'##########################   HAUPTFUNKTION DER APPLIKATION   #########################################
Function Main:Int()
	'EnableKeyboard()
	New cGame				'Konstruktor zum erstellen des Spiels 
End Function 


#rem
	#### Main Game Class ####
	This is your main game Class, it should extends the mojo's App Class.
	Therefor you need to implement at least OnCreate,OnRender and OnUpdate Methods
#end 
Class cGame Extends App

	Field _r:Float,_g:Float,_b:float
	Field aHSV:Float[]
	Field aRGB:Float[] 
	
	Field br:Float = 50.0
	
	Method OnCreate:Int()
		
		SetUpdateRate(60)							'Setting up the Update Rate
		_r = 255
		_g = 255
		_b = 0
		
		aHSV = New Float[3]
		aRGB = New Float[3]
		Return True
	End Method
	
	Method OnUpdate:Int()
		aHSV = rgb2hsv(_r,_g,_b)
		aRGB = hsv2rgb(aHSV[0],aHSV[1],br)
		
		If KeyDown(KEY_LEFT)
			br -= 0.5
		Endif
		
		If KeyDown(KEY_RIGHT)
			br +=0.5
		Endif 
		Return True
	End Method
	

	
	Method OnRender:Int()
		Cls 
		SetColor 255,255,255
		DrawText "RGB: " +Int(_r)+" / " + Int(_g) + " / " + Int(_b),100,40
		DrawText "HSV: " +Int(aHSV[0])+ " / " + Int(aHSV[1])+ " / " + br,100,65
		
		DrawText "SetColor RGB: " + Int(aRGB[0])+" "+Int(aRGB[1]) + " "+Int(aRGB[2]),100,310
		DrawText "Press left/right key for darken/lighten up",100,330
		SetColor aRGB[0],aRGB[1],aRGB[2]
		
		DrawRect(100,100,200,200)
		Return True
	End Method

End Class


Function hsv2rgb:float[](_Hue:Float,_Saturation:Float,_Value:Float)

	Local R:Float, G:Float, B:float

    _Hue /= 360.0
    _Saturation /= 100.0
    _Value /= 100.0

    if (_Saturation = 0)
    	R = _Value * 255
        G = _Value * 255
        B = _Value * 255
            
    Else 
     
        Local var_h:float = _Hue * 6
        if (var_h = 6)
        	var_h = 0	'; // H must be < 1
        Endif 
        
        local var_i:int = int(var_h)'; // Or ... var_i =
                                                            '// floor( var_h )
        Local var_1:float = _Value * (1 - _Saturation)
        Local var_2:float = _Value * (1 - _Saturation * (var_h - var_i))
        Local var_3:float = _Value * (1 - _Saturation * (1 - (var_h - var_i)))

        Local var_r:Float  
        Local var_g:Float 
        Local var_b:Float
            
        if (var_i = 0) 
        	var_r = _Value
            var_g = var_3
            var_b = var_1
                
        else if (var_i = 1) 
            var_r = var_2
            var_g = _Value
            var_b = var_1
                
        else if (var_i = 2) 
            var_r = var_1
            var_g = _Value
            var_b = var_3
                
        else if (var_i = 3) 
            var_r = var_1
            var_g = var_2
            var_b = _Value
            
        else if (var_i = 4) 
            var_r = var_3
            var_g = var_1
            var_b = _Value
                
        else 
            var_r = _Value
            var_g = var_1
            var_b = var_2
        Endif 

        R = var_r * 255'; // RGB results from 0 to 255
        G = var_g * 255';
        B = var_b * 255';
       
	Endif 
	
	Local rgb:float[] = New Float[3]
    rgb[0] = R
    rgb[1] = G
    rgb[2] = B
    'Print "RGB:  "+R+"/"+G+"/"+B
    Return rgb
End Function 


#rem
 * @param _Red
     *            0-255
     * @param _Green
     *            0-255
     * @param _Blue
     *            0-255
     * @return color-Array [0]-Hue ; [1]-Saturation ; [2]-Value
#end 
Function rgb2hsv:Float[](_Red:Float,_Green:Float,_Blue:Float)
	Local arrHSV:Float[] = New Float[3]
	Local h:Float,s:Float,v:Float 
	Local min:Float,max:Float,delta:Float 
	
	min = Min(Min(_Red, _Green), _Blue)
    max = Max(Max(_Red, _Green), _Blue)

    '// V
    v = max

    delta = max - min

    '// S
     if( max <> 0 )
        s = delta / max
     else 
        s = 0
        h = -1
        arrHSV[0] = h
        arrHSV[1] = s*100.0
        arrHSV[2] =  v * 100.0/255.0
       ' Print "HSV:  " +h+"/"+(s*100.0)+"/"+ (255.0 / v * 100.0)
        return arrHSV
     Endif 

    '// H
     if( _Red = max )
        h = ( _Green - _Blue ) / delta'; // between yellow & magenta
     else if( _Green = max )
        h = 2 + ( _Blue - _Red ) / delta'; // between cyan & yellow
     else
        h = 4 + ( _Red - _Green ) / delta'; // between magenta & cyan
	Endif 
     h *= 60';    // degrees

    if( h < 0 )
        h += 360';
	Endif 
	
	arrHSV[0] = h
    arrHSV[1] = s*100.0
    arrHSV[2] = v * 100.0 / 255.0
    'Print "HSV:  " +h+"/"+(s*100.0)+"/"+ (255.0 / v * 100.0)
    return  arrHSV


End Function

First you have to convert a color you'd like to adjust from RGB -> HSV. Now you can use the _Value of HSV colorsheme to setup the brightness and reconvert it into RGB.

Bye Duke