How to create a hue (saturation) picker in cocos2d

Question

I'm trying to create a simplified hue/saturation picker for cocos2d. I want to create a gradient and to pick from it. I need to recolor a black/white image gradient for every color like blue, red and others. So I need to create many gradients. I know that I should use some blend functions to achieve this. But I'm still a little bit confused about what is the best way to proceed. Should I use blend functions at all ?

My problem basically is that I use a gradient from black to transparent or to white but with

sprite.setColor(color);

I get a gradient from black to the desired color but I need a gradient from the desired darker color to white.

Answer 1

What you need to do is create a 2D gradient that goes from unsaturated to saturated left-to-right, and from dark to light bottom-to-top. I'd do it by creating a new bitmap (or if you're using OpenGL, a texture). I'd then color each pixel using the following pseudocode:

hue = <whatever the user set the hue to>
for (row = 0; row < height; row++)
{
    for (col = 0; col < width; col++)
    {
        sat = col / width;
        val = row / height;
        rgb = HSVToRGB(hue, sat, value);
        setPixel (col, row, rgb);
    }
}