Change the HSB of a node in Godot? - colors

Question

I need to change the hue of a node in Godot (using code). There doesn't seem to be any easy way (such as module.hue) to do so. Is there anything that I am missing? If this simply isn't possible, how could I convert a HSB value to an RGB value easily? Thanks!

Answer 1

If what you want is to modify the HSB of a CanvasItem, we are going to make a shader. Add a ShaderMaterial on the Material slot of the CanvasItem (Control or Node2D), and give it a new Shader with the following code:
shader_type canvas_item;
uniform float hue : hint_range(0.0, 6.283185) = 0.0;
uniform float saturation : hint_range(0.0, 1.0) = 1.0;
uniform float value : hint_range(0.0, 1.0) = 1.0;
void fragment()
{
// Original Color
COLOR = texture(TEXTURE,UV);
vec3 color = COLOR.rgb;
float alpha = COLOR.a;
// Convert to YIQ space
mat3 RGB_to_YIQ = mat3(
vec3(0.2989, 0.5959, 0.2115),
vec3(0.5870, -0.2774, -0.5229),
vec3(0.1140, -0.3216, 0.3114)
);
color = RGB_to_YIQ * color;
// Apply hue rotation
float sin_hue = sin(hue);
float cos_hue = cos(hue);
mat3 hue_rotation = mat3(
vec3(1.0, 0.0, 0.0),
vec3(0.0, cos_hue, -sin_hue),
vec3(0.0, sin_hue, cos_hue)
);
color = hue_rotation * color;
// Apply saturation
mat3 saturation_scale = mat3(
vec3(1.0, 0.0, 0.0),
vec3(0.0, saturation, 0.0),
vec3(0.0, 0.0, saturation)
);
color = saturation_scale * color;
// Apply value
mat3 value_scale = mat3(
vec3(value, 0.0, 0.0),
vec3( 0.0, value, 0.0),
vec3( 0.0, 0.0, value)
);
color = value_scale * color;
// Convert back to RGB space
color = inverse(RGB_to_YIQ) * color;
// Output
COLOR = vec4(color, alpha);
}
This code could be optimized further. For instance we can hard-code inverse(RGB_to_YIQ) instead of computing it every time (you take advantage of symbolab or similar software to compute it).
By the way, Godot founder Juan Linietsky also sheared some shader code for hue rotation (link).
And how did I get to that?
I began looking for a conversion from RGB to HSB, and the results suggested HSV instead. Then I found on Definition of HSB that apparently HSB is the same thing as HSV. Wikipedia claims the same thing in the article HSL and HSV.
Then looking for a conversion between RGB and HSV I found a way to apply a transformation on this article: Affine HSV color manipulation. The way it works is by converting the RGB color to YIQ space and then we apply transformation on the YIQ space and convert back to RGB.
It didn't work correctly at first. I was getting a sepia effect instead of the expected gray scale with saturation set to zero. Turns out I had the matrix transposed.
By the way the values of the matrix I'm using in the code above are from yet another article: My First Matrix, RGB, YIQ, and Color Cubes.
See also the article YIQ (there other possible matrices to use here).
By the way, if you want to create a Color from HSV, you can use the Color.from_hsv method. And to get HSV back, you can use the the h, s and v properties. You can refer to the source code of the Color class for how that works.
I also want to point out that modulate is multiplicative. It behaves like a color filter. Consequently it cannot do hue rotation or change the saturation. If you wanted to specify modulate in HSV, the color picker in the inspector panel has that option.