Difference between revisions of "HSV color"
(Created page with "The [https://secure.wikimedia.org/wikipedia/en/wiki/HSL_and_HSV HSV color space] is based on how humans perceive color, and as such, makes various aesthetically-pleasing color tr...") |
m (Color range from 0 - 255 to 0 - 1, minor code style changes) |
||
(8 intermediate revisions by 7 users not shown) | |||
Line 5: | Line 5: | ||
*'''Value''' is how saturated an image is, the amount of each color. | *'''Value''' is how saturated an image is, the amount of each color. | ||
− | This function converts HSV values to RGB : | + | This function converts HSV values to RGB: |
<source lang="lua"> | <source lang="lua"> | ||
− | -- Converts HSV to RGB. (input and output range: 0 - | + | -- Converts HSV to RGB. (input and output range: 0 - 1) |
+ | |||
function HSV(h, s, v) | function HSV(h, s, v) | ||
if s <= 0 then return v,v,v end | if s <= 0 then return v,v,v end | ||
− | h | + | h = h*6 |
local c = v*s | local c = v*s | ||
local x = (1-math.abs((h%2)-1))*c | local x = (1-math.abs((h%2)-1))*c | ||
− | local m,r,g,b = (v-c), 0,0,0 | + | local m,r,g,b = (v-c), 0, 0, 0 |
− | if h < 1 | + | if h < 1 then |
− | elseif h < 2 then r,g,b = x,c,0 | + | r, g, b = c, x, 0 |
− | elseif h < 3 then r,g,b = 0,c,x | + | elseif h < 2 then |
− | elseif h < 4 then r,g,b = 0,x,c | + | r, g, b = x, c, 0 |
− | elseif h < 5 then r,g,b = x,0,c | + | elseif h < 3 then |
− | else | + | r, g, b = 0, c, x |
− | end return | + | elseif h < 4 then |
+ | r, g, b = 0, x, c | ||
+ | elseif h < 5 then | ||
+ | r, g, b = x, 0, c | ||
+ | else | ||
+ | r, g, b = c, 0, x | ||
+ | end | ||
+ | return r+m, g+m, b+m | ||
end | end | ||
</source> | </source> | ||
+ | and the same function implemented in GLSL, for those that need it: | ||
+ | |||
+ | <source lang="C"> | ||
+ | vec3 HSV(float h, float s, float v) | ||
+ | { | ||
+ | if (s <= 0 ) { return vec3 (v); } | ||
+ | h = h * 6; | ||
+ | float c = v*s; | ||
+ | float x = (1-abs((mod(h,2)-1)))*c; | ||
+ | float m = v-c; | ||
+ | float r = 0.0; | ||
+ | float g = 0.0; | ||
+ | float b = 0.0; | ||
+ | |||
+ | if (h < 1) { r = c; g = x;b = 0.0;} | ||
+ | else if (h < 2) { r = x; g = c; b = 0.0; } | ||
+ | else if (h < 3) { r = 0.0; g = c; b = x; } | ||
+ | else if (h < 4) { r = 0.0; g = x; b = c; } | ||
+ | else if (h < 5) { r = x; g = 0.0; b = c; } | ||
+ | else { r = c; g = 0.0; b = x; } | ||
+ | return vec3(r+m,g+m,b+m); | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | Or for those who want to save up on space (and achieve better performance, as branching is quite costly on GPUs), here's one-liner: | ||
+ | |||
+ | <source lang="c"> | ||
+ | vec3 hsv(float h,float s,float v) { return mix(vec3(1.),clamp((abs(fract(h+vec3(3.,2.,1.)/3.)*6.-3.)-1.),0.,1.),s)*v; } | ||
+ | </source> | ||
[[Category:Snippets]] | [[Category:Snippets]] | ||
+ | {{#set:LOVE Version=any}} | ||
+ | {{#set:Description=An alternate colorspace, allowing for aesthetically-pleasing color transformations.}} | ||
== Other Languages == | == Other Languages == | ||
− | {{i18n| | + | {{i18n|HSV color}} |
Latest revision as of 18:15, 2 March 2022
The HSV color space is based on how humans perceive color, and as such, makes various aesthetically-pleasing color transformations very simple.
- Hue describes where in the spectrum the color is. As Hue increases, a color will transition in the following order: Red, orange, yellow, green, teal, blue, violet, purple, magenta, red.
- Saturation denotes how vibrant a color is. Ranges from grey to pure color.
- Value is how saturated an image is, the amount of each color.
This function converts HSV values to RGB:
-- Converts HSV to RGB. (input and output range: 0 - 1)
function HSV(h, s, v)
if s <= 0 then return v,v,v end
h = h*6
local c = v*s
local x = (1-math.abs((h%2)-1))*c
local m,r,g,b = (v-c), 0, 0, 0
if h < 1 then
r, g, b = c, x, 0
elseif h < 2 then
r, g, b = x, c, 0
elseif h < 3 then
r, g, b = 0, c, x
elseif h < 4 then
r, g, b = 0, x, c
elseif h < 5 then
r, g, b = x, 0, c
else
r, g, b = c, 0, x
end
return r+m, g+m, b+m
end
and the same function implemented in GLSL, for those that need it:
vec3 HSV(float h, float s, float v)
{
if (s <= 0 ) { return vec3 (v); }
h = h * 6;
float c = v*s;
float x = (1-abs((mod(h,2)-1)))*c;
float m = v-c;
float r = 0.0;
float g = 0.0;
float b = 0.0;
if (h < 1) { r = c; g = x;b = 0.0;}
else if (h < 2) { r = x; g = c; b = 0.0; }
else if (h < 3) { r = 0.0; g = c; b = x; }
else if (h < 4) { r = 0.0; g = x; b = c; }
else if (h < 5) { r = x; g = 0.0; b = c; }
else { r = c; g = 0.0; b = x; }
return vec3(r+m,g+m,b+m);
}
Or for those who want to save up on space (and achieve better performance, as branching is quite costly on GPUs), here's one-liner:
vec3 hsv(float h,float s,float v) { return mix(vec3(1.),clamp((abs(fract(h+vec3(3.,2.,1.)/3.)*6.-3.)-1.),0.,1.),s)*v; }
Other Languages
Dansk –
Deutsch –
English –
Español –
Français –
Indonesia –
Italiano –
Lietuviškai –
Magyar –
Nederlands –
Polski –
Português –
Română –
Slovenský –
Suomi –
Svenska –
Türkçe –
Česky –
Ελληνικά –
Български –
Русский –
Српски –
Українська –
עברית –
ไทย –
日本語 –
正體中文 –
简体中文 –
Tiếng Việt –
한국어
More info