How to draw a Color Spectrum (Color Picker)?

Started by
5 comments, last by zedzeek 18 years, 2 months ago
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.
Advertisement
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 HSL2RGBfloat 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.
Thanks but I need it in OpenGl.
And you are using Directx's APIs.
I want pure OpenGl if it's possible.
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.

Crafter 2D: the open source 2D game framework

?Github: https://github.com/crafter2d/crafter2d
Twitter: [twitter]crafter_2d[/twitter]

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?
another question:
who calls the
D3DXVECTOR3 ColorMap(float x, float y)
fucntion and whar are x and y?
What is this 2D map and how should I define it?
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)

This topic is closed to new replies.

Advertisement