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> |
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,
fcan be replaced withborcbecause both are not used after the final assignment. - Switching the summands in
-c*b+ctoc-c*bsaves 1 byte. - The
|16and|8snippets are very strange and explained here: https://gist.github.com/1325937#gistcomment-62276
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 tof=[c,-c*d*b+c,e=-c*b+c,e,c*d*b+e,c], saving another 4 bytes.