Sign in to follow this  

How to draw a Color Spectrum (Color Picker)?

This topic is 4340 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

How to create a quad with full color spectrum or "Color picker" like in paint or photoshop? When I try this: glShadeModel(GL_SMOOTH); glBegin(GL_QUADS); glColor3f(1.0,1.0,1.0); glVertex2i(200,200); glColor3f(0.0,0.0,1.0); glVertex2i(400, 200); glColor3f(0.0,1.0,0.0); glVertex2i(400, 400); glColor3f(1.0,0.0,0.0); glVertex2i(200, 400); glEnd(); It doesn't give me all colors (like black or brown), also, is there HSL color mod? cause I want a luminosity also.

Share this post


Link to post
Share on other sites
What you want to do is probably something like this?

http://clb.demon.fi/files/ui.png

That kind of color picker has the hue on the x-axis and combined saturation/lightness on the y-axis. Good theory can be found in wikipedia:

http://en.wikipedia.org/wiki/HLS_color_space

My code that draws a color picker like the one above is adapted from one of the wikipedia's links:

// Helper function called by HSL2RGB
float Hue2RGB(float v1, float v2, float vH)
{
if (vH < 0) vH += 1.f;
if (vH > 1) vH -= 1.f;
if (6.f * vH < 1) return v1 + (v2 - v1) * 6.f * vH;
if (2.f * vH < 1) return v2;
if (3.f * vH < 2) return v1 + (v2 - v1) * (0.666666f - vH) * 6.f;
return v1;
}

// Input: hsl.x = hue, hsl.y = saturation, hsl.z = lightness, all inside [0,1].
// Output: rgb inside [0,1].
D3DXVECTOR3 HSL2RGB(D3DXVECTOR3 hsl)
{
D3DXVECTOR3 rgb;
if (hsl.y == 0) // if saturation 0, give a grayscale color (fill with lightness component)
rgb.x = rgb.y = rgb.z = hsl.z;
else
{
float var_1 = 0;
float var_2 = 0;

if (hsl.z < 0.5f)
var_2 = hsl.z * (1.0f + hsl.y);
else
var_2 = (hsl.z + hsl.y) - (hsl.y * hsl.z);

var_1 = 2.f * hsl.z - var_2;

rgb.x = Hue2RGB(var_1, var_2, hsl.x + 0.333333f);
rgb.y = Hue2RGB(var_1, var_2, hsl.x);
rgb.z = Hue2RGB(var_1, var_2, hsl.x - 0.333333f);
}
return rgb;
}

// I use this function to fill the 2D colormap.. Loop for each pixel in the 2d map and call this function with x = [0,1] and y = [0,1].
D3DXVECTOR3 ColorMap(float x, float y)
{
float h = x;
float s = 1.0f - y;
float l = 1.0f - y; // you may want to make this an external variable!

return HSL2RGB(D3DXVECTOR3(h,s,l));
}



If you want to be able to get more finetuned colors, you could make the lightness parameter a controllable variable.

Share this post


Link to post
Share on other sites
This code should be easy to adapt to OpenGL. Just use your own vector or color class for the computations. The color values then can be stored in a gl texture for display. After a click you can determine the color under the cursor.

Share this post


Link to post
Share on other sites
Ok, I understood the conversion part.
Now I have to apply those functions in my drawing, the question is if I should draw this quad via glBegin(GL_QUADS) or I should draw a set of vertical lines where I set the converted color for both vertex of each line?

Share this post


Link to post
Share on other sites
i assume something like
vec3 col[100][100];
for ( int x=0; x<100; x++ )
for ( int y=0; y<100; y++ )
col[x][y] = ColorMap(x*0.01,y*0.01);

use col to create a texture (may need to scale nums 0->1 -> 0->255)

Share this post


Link to post
Share on other sites

This topic is 4340 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this