I'm kinda new to this and I'm sure some of you will find a stranger/smaller solution... Golf away!
-
-
Save xpansive/1241234 to your computer and use it in GitHub Desktop.
function( | |
//parameters range from 0 - 1 | |
a, // hue 0.0 - 1.0 | |
b, // saturation 0.0 - 1.0 | |
c, // value 0.0 - 1.0 | |
d, // hue divider | |
e, // value splitter | |
f // array placeholder | |
){ | |
d=a*6%1; // deviation of the current hue (red<->yellow<->green<->cyan<->blue<->violet), | |
// the higher the value, the more the color deviates to the next hue | |
// create an array of the color strength regardless of hue | |
f=[ | |
c, // full value on this color | |
-c*d*b+c, // deviation part 1 | |
e=-c*b+c, // deviation part 2 | |
e, // median deviation | |
c*d*b+e, // deviation part 3 | |
c // full value | |
]; | |
// select the colors out of the array in regard of hue | |
return[ // [r,g,b] - ranges from 0 to 1 | |
f[d=a*6|0], //red | |
f[(4+d)%6], //green | |
f[(2+d)%6] //blue | |
] | |
} |
function(a,b,c,d,e,f){d=a*6%1;f=[c,-c*d*b+c,e=-c*b+c,e,c*d*b+e,c];return[f[d=a*6|0],f[(4+d)%6],f[(2+d)%6]]} |
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
Version 2, December 2004 | |
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE> | |
Everyone is permitted to copy and distribute verbatim or modified | |
copies of this license document, and changing it is allowed as long | |
as the name is changed. | |
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
0. You just DO WHAT THE FUCK YOU WANT TO. |
{ | |
"name": "hsvToRgb", | |
"description": "Converts colors from HSV to RGB.", | |
"keywords": [ | |
"color", | |
"rgb", | |
"hsv" | |
] | |
} |
<!DOCTYPE html> | |
<title>hsvToRgb Test</title> | |
<canvas id="canvas"></canvas> | |
<script> | |
var hsvToRgb = function(a,b,c,d,e,f){d=a*6%1;f=[c,-c*d*b+c,e=-c*b+c,e,c*d*b+e,c];return[f[d=a*6|0],f[(4+d)%6],f[(2+d)%6]]} | |
var canvas = document.getElementById("canvas"); | |
var ctx = canvas.getContext("2d"); | |
var size = canvas.width = canvas.height = 150; | |
var imageData = ctx.createImageData(size, size); | |
var pixels = imageData.data; | |
var hue = 0; | |
setInterval(function() { | |
var hue = new Date/4000; | |
for (var i = size * size * 4; i -= 4;) { | |
var c = hsvToRgb(hue % 1, i / 4 % size / size, i / 4 / size / size); | |
pixels[i] = c[0] * 255; | |
pixels[i + 1] = c[1] * 255; | |
pixels[i + 2] = c[2] * 255; | |
pixels[i + 3] = 255; | |
} | |
ctx.putImageData(imageData, 0, 0); | |
}, 50) | |
</script> |
I'd like the annotated version to be a bit more commented, please.
Btw., f=[c,-c*d*b+c,e=-c*b+c,e,c*d*b-c*b+c,c]
can be shortened to f=[c,-c*d*b+c,e=-c*b+c,e,c*d*b+e,c]
, saving another 4 bytes.
Is there an easy way to go the other way?
@atk I somehow missed that comment two months ago... Thanks for the optimization, and also I can't really comment it more because I don't understand how it works. I just found the algorithm elsewhere and minified it.
@davidkaneda
Not sure. I'll look into it.
That's ok, we can create the commented version together.
function(
//parameters range from 0 - 1
a, // hue 0.0 - 1.0
b, // saturation 0.0 - 1.0
c, // value 0.0 - 1.0
d, // hue divider
e, // value splitter
f // array placeholder
){
d=a*6%1; // deviation of the current hue (red<->yellow<->green<->cyan<->blue<->violet),
// the higher the value, the more the color deviates to the next hue
// create an array of the color strength regardless of hue
f=[
c, // full value on this color
-c*d*b+c, // deviation part 1
e=-c*b+c, // deviation part 2
e, // median deviation
c*d*b+e, // deviation part 3
c // full value
];
// select the colors out of the array in regard of hue
return[ // [r,g,b] - ranges from 0 to 1
f[d=a*6|0], //red
f[(4+d)%6], //green
f[(2+d)%6] //blue
]
}
Wow... Thanks! I didn't really understand any of the math when I wrote it and just sort of hoped it would work when I changed something. That's probably the best commented version of the algorithm on the web!
Also, here's my latest project, hsl to/from hsv: https://gist.github.com/1337890
Same problem here. The function returns bad colors when hue is exactly 1. Here is a fixed 100 bytes version based on what we did at https://gist.github.com/1325937.
function(a,b,c){a*=6;b*=c;b=[c,c-a%1*b,c-b,c-b,c-b+a%1*b,c];return[b[~~a%6],b[(a|16)%6],b[(a|8)%6]]}
A few comments and hints:
- I try to avoid dummy arguments and reuse variables instead. For example, in your original code,
f
can be replaced withb
orc
because both are not used after the final assignment. - Switching the summands in
-c*b+c
toc-c*b
saves 1 byte. - The
|16
and|8
snippets are very strange and explained here: https://gist.github.com/1325937#gistcomment-62276
And down to 111 with variable reuse:
function(a,b,c,d,e,f){d=a*6%1;f=[c,-c*d*b+c,e=-c*b+c,e,c*d*b-c*b+c,c];return[f[d=a*6|0],f[(4+d)%6],f[(2+d)%6]]}