Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HSV to RGB in 107 bytes

HSV to RGB in 107 bytes

I'm kinda new to this and I'm sure some of you will find a stranger/smaller solution... Golf away!

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>
@xpansive
Copy link
Author

xpansive commented Sep 26, 2011

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]]}

@atk
Copy link

atk commented Sep 26, 2011

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.

@davidkaneda
Copy link

davidkaneda commented Nov 1, 2011

Is there an easy way to go the other way?

@xpansive
Copy link
Author

xpansive commented Nov 3, 2011

@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.

@atk
Copy link

atk commented Nov 3, 2011

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
    ]
}

@xpansive
Copy link
Author

xpansive commented Nov 3, 2011

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

@maettig
Copy link

maettig commented Nov 9, 2011

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 with b or c because both are not used after the final assignment.
  • Switching the summands in -c*b+c to c-c*b saves 1 byte.
  • The |16 and |8 snippets are very strange and explained here: https://gist.github.com/1325937#gistcomment-62276

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment