Displaying Graduated color bar

Hi,
Anyone has the idea to dispaly a graduated color bar showing variation of different values between maximum and minimum in glut mode.

What do u mean “glut mode” u want to display a color ramp?
Just create a 1D texture of GL_RGBA (internal format and format) and apply it to a quad of the size you want. THen render the quad orthogonally on top of the rendering by disabling the depth test.
You need to pass in the data to the texture urself by manually creating the color ramp by incrementing the R,G,B and A channels yourself.

@mobeen bhai
Is there any example or tutorial can you refer me?

I dont think u will find an example for such a

I dont think u will find an example for such a simple thing.
I can outline the steps and hoepfully u can follow them.
You need to create a 1D texture first and set its params which u can do like this.


const int color_width=256;
GLuint texID;
glGenTextures(1, &texID);
glEnable(GL_TEXTURE_1D);
glBindTexture(GL_TEXTURE_1D);
glTexParameteri(GL_TEXTURE_1D, GL_TEXTURE_WRAP_S, GL_CLAMP); glTexParameteri(GL_TEXTURE_1D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); 
GLubyte data[color_width][3];
FillData(data);
glTexImage1D(GL_TEXTURE_1D,0,GL_RGB8,color_width,0,GL_RGB,GL_UNSIGNED_BYTE,data);

Now two more things to do. In render function, render the quad of the size u want and attach the 1D texture to it.


void render() {
   glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

   glMatrixMode(GL_PROJECTION);
   glLoadIdentity();
   glOrtho(0,width,0,height,0,1);
   
   glMatrixMode(GL_MODELVIEW);
   glLoadIdentity();

   glBindTexture(GL_TEXTURE_1D, texID);   
   glBegin(GL_QUADS);
      glTexCoord(0,0); glVertex2i(20,120);
      glTexCoord(1,0); glVertex2i(120,120);
      glTexCoord(1,1); glVertex2i(120,100);
      glTexCoord(0,1); glVertex2i(20,100);
   glEnd();
   
   glFinish();
   glutSwapBuffers();
}

Implement the FIllData function that would fill in the color value in the data array. You would need to increment r,g,b values based on the total colors you want and the size of the whole array and just integrate for the whole color ramp. You give it a try. I am not sure if the above code works fine cos i have not tested it myself. This is just to give u an idea.

Regards,
Mobeen

NeHe Tutorial #3

I used Quad to display the graduated color bar. but it doesn,t seem to be good, because it can incorporate only two color at a time. I have an array of values, and each value must have its own different color code…,

Here is the whole project code:
(See section “Color Code”)
#include <windows.h> //suitable when using Windows 95/98/NT
#include <gl/gl.h>
#include <gl/glu.h>
#include <gl/glut.h>
#include <math.h>
#include<stdio.h>
#include <stdlib.h>
#include <dos.h>
// Prototype Decalartion
void myDisplay(void);
void filledCube(GLfloat xLocation, GLfloat yLocation, GLfloat zLocation, GLfloat widthofCube, GLfloat lenghtofCube, GLfloat heightofCube, GLfloat* fillcolor);

// Variable declaraction
double P[50]; int counter1=0; // global variables
GLfloat angle= 0.0;
GLfloat rX=0, rY=0;
int oldX=0, oldY=0;
void Mouse(int button, int s, int x, int y)
{
if (s == GLUT_DOWN)
{
oldX = x;
oldY = y;
}
}

void Motion(int x, int y)
{
rY += (x - oldX)/5.0f;
rX += (y - oldY)/5.0f;

oldX = x; 
oldY = y; 
glutPostRedisplay(); 

}

/////////////////////////// Axis function ///////////////////////////////
void axis(GLfloat length)
{ // draw a axis, with cone at end
glPushMatrix();
glBegin(GL_LINES);
glVertex3d(0, 0, 0);
glVertex3d(0,0,length); // along the z-axis
glEnd();
glTranslated(0, 0,length -0.2);
glutSolidCone(0.04, 0.2, 12, 9);
glPopMatrix();
}
//////////////////////////// Axis Function end here ////////////////////

///////////////////////////////// bmpfont //////////////////////////////
void
bitmap_output(GLfloat x, GLfloat y, GLfloat z, char *string, void *font)
{
int len, i;

glRasterPos3f(x, y, z);
len = (int) strlen(string);
for (i = 0; i < len; i++) {
glutBitmapCharacter(font, string[i]);
}
}
/////////////////////bmp font end here/////////////////////////////////

//<<<<<<<<<<<<<<<<<<<<<<<<<<<<< displayFunction >>>>>>>>>>>>>>>>>>>>>>
void myDisplay()
{
glMatrixMode(GL_PROJECTION); // set the view volume shape
glLoadIdentity();
glOrtho(-2.064/48.0, 2.064/48.0, -2.0, 2.0, 0.1, 100);

glMatrixMode(GL_MODELVIEW); // position and aim the camera
glLoadIdentity();
gluLookAt(2.0, 2.0, 2.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

glClearColor (0.0f, 0.0f, 0.0f, 0.0f);
glClear(GL_COLOR_BUFFER_BIT); // clear the screen

//////// QUAD (GRADUATED_COLOR_BAR) ////////////

 glColor3f(1.0, 1.0, 1.0);
 bitmap_output(1.2, 0.0, 3.5, "MIN", GLUT_BITMAP_9_BY_15);
 bitmap_output(3.3, 0.0, 1.3, "MAX", GLUT_BITMAP_9_BY_15);
 GLfloat wb=.1, lb=2.8;
 glMatrixMode(GL_MODELVIEW);
 GLfloat axis2=3.2;GLfloat bar_length=1.2;

 glPushMatrix ();            
        glTranslatef(bar_length, 0.0, axis2); //glTranslatef(1.2, 0.0, 3.2);
        glRotatef (45, 0.0f, 1.0f, 0.0f);
        
        glBegin (GL_QUADS);            
        
        glColor3f (0.0f, 0.0f, 1.0f);  // BLUE COLOR LEFT END   
        glVertex3f (0.0f, 0.0f,0.0);                          
        glVertex3f (0.0f, wb,0.0); 
        
        glColor3f (1.0f, 0.0f, 0.0f);  //RED COLOR RIGHT END 
        glVertex3f (lb, wb,0.0);                        
        glVertex3f (lb, 0.0f,0.0);             
        glEnd ();
 glPopMatrix (); 

////////////////// QUAD END///////////////////

glRotatef(rX,1,0,0);
glRotatef(rY,0,1,0);


// DRAW AXES      
glColor3d(1,0,0); // red color
axis(2); // x-axis
glPushMatrix();
	glRotated(90, 0,1.0, 0);
	glColor3d(0,1,0); //green color
	axis(2); // y-axis
	glRotated(90, 1, 0, 0);
	glColor3d(0,0,1); // blue color
	axis(2); // z-axis
glPopMatrix();
 
P[0]=0.1; P[1]=0.2; P[2]=0.3; P[3]=0.4; P[4]=0.5;  //Arbitrary numbers	
GLdouble PMAX=.5, PMIN=.1;
int N=4;	
GLfloat j=0.0;
GLfloat color[4];
     for (GLint i=0;i&lt;=N; i=i+1)

      {  
       
        GLfloat avg = (PMAX+PMIN)/2;
        GLfloat avg2 = (avg+PMIN)/2;
        GLfloat avg3 = (avg+PMAX)/2;            

//------------------- color code -------------- How it should be made continuous? it uses distcrete color code
if(P[i]>=PMIN && P[i]<=(avg2)){
color[0]=0.0; color[1]=0.0; color[2]=0.5; color[3]=1;}

        if(P[i]&gt;(avg2) && P[i]&lt;=(avg)){
            color[0]=0.0; color[1]=0.0; color[2]=1.0; color[3]=1;}
            
        if(P[i]&gt;(avg) && P[i]&lt;=(avg3)){
            color[0]=0.5; color[1]=0.0; color[2]=0.0; color[3]=1;}
            
            if(P[i]&gt;(avg3) && P[i]&lt;=(PMAX)){
            color[0]=1.0; color[1]=0.0; color[2]=0.0; color[3]=1;}

//--------------------------------------------

        filledCube(j, 0, 0, .1, .1, .1, color);  //location (x,y,z), size (length, width, height), color (set by array color[] above)

        j=j+0.1; // Translation along X axis
      }
        
 
 glPushMatrix();    
//////////////////////////////some text ///////////////////////////////////////
glColor3f(1.0, 1.0, 1.0);
 //bitmap_output(2.2, 1.9, 1.5, "simulation viewer", GLUT_BITMAP_HELVETICA_18);
 bitmap_output(2.2, 0.0, 0.0, "X-AXIS", GLUT_BITMAP_9_BY_15);
 bitmap_output(0.0, -2.2, 0.0, "Y-AXIS", GLUT_BITMAP_9_BY_15);
 bitmap_output(0.0, 0.0, 2.2, "Z-AXIS", GLUT_BITMAP_9_BY_15);
 glPopMatrix();
glFlush();
glutSwapBuffers();

}
//<<<<<<<<<<<<<< display function end >>>>>>>>>>>>>>>

/////////////////////////////////// filledcube function /////////////////////////////////////////
void filledCube(GLfloat xLocation, GLfloat yLocation, GLfloat zLocation, GLfloat widthofCube, GLfloat lenghtofCube, GLfloat heightofCube, GLfloat* fillcolor) {
GLfloat hWidth = widthofCube0.5;
GLfloat hLength = lenghtofCube
0.5;
GLfloat hHeight = heightofCube*0.5;

glPushMatrix();

glTranslatef(xLocation, yLocation, zLocation);

glBegin(GL_QUADS);
glColor4fv(fillcolor);

  //face 1
  glVertex3f(hWidth, hHeight, -hLength); 	 
  glVertex3f(-hWidth, hHeight, -hLength);   
  glVertex3f(-hWidth, hHeight, hLength);    
  glVertex3f(hWidth, hHeight, hLength);    
  //face 2
  glVertex3f(hWidth, hHeight, -hLength);   
  glVertex3f(hWidth, hHeight, hLength);   
  glVertex3f(hWidth , -hHeight, hLength);    
  glVertex3f(hWidth, -hHeight, -hLength); 
  //face 3
  glVertex3f(hWidth, hHeight, hLength);   
  glVertex3f(hWidth, hHeight, hLength);   
  glVertex3f(hWidth, -hHeight, hLength);    
  glVertex3f(hWidth, -hHeight, hLength);
  //face 4
  glVertex3f(hWidth, hHeight, -hLength);   
  glVertex3f(-hWidth, hHeight, -hLength);   
  glVertex3f(-hWidth, -hHeight, -hLength);    
  glVertex3f(hWidth, -hHeight, -hLength);
  //face 5
  glVertex3f(-hWidth , hHeight, -hLength);    
  glVertex3f(-hWidth, hHeight, hLength);    
  glVertex3f(-hWidth, -hHeight, hLength);    
  glVertex3f(-hWidth, -hHeight, -hLength);
  //face 6
  glVertex3f(hWidth, -hHeight, -hLength);   
  glVertex3f(-hWidth, -hHeight, -hLength);   		
  glVertex3f(-hWidth, -hHeight, hLength);   
  glVertex3f(hWidth, -hHeight, hLength);

glEnd();
glPopMatrix();
}

//<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
int main(int argc, char** argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB );
glutInitWindowSize(640,480);
glutInitWindowPosition(100, 100);
glutCreateWindow(“Reservoir Rock Model”);
glutDisplayFunc(myDisplay);
glutMouseFunc(Mouse); // register the mouse action function
glutMotionFunc(Motion); // register the mouse action function
glClearColor(1.0f, 0.0f, 1.0f,0.0f); // background is white Reintializatin screen
glViewport(0, 0, 640, 480);
glutMainLoop();
return 0;
}

The way you are doing it currently, you would have to generate a new vertex pair for each new color that you want to add. Let me illlustrate using an ascii fig.


//This is how you are doing it currently
//+ is a vertex
Red                          Blue
+-----------------------------+
|                             |
+-----------------------------+

//for each new color, you would have to insert a new vertex for e.g. lets say i need a green color in there so I would need to add a new vertex pair in between as follows

Red          Green           Blue
+--------------+--------------+
|              |              |
+--------------+--------------+

So here is the modified code doing what is shown in the illustration,


glBegin (GL_QUADS); 
   glColor3f (0.0f, 0.0f, 1.0f); // BLUE COLOR LEFT END 
   glVertex3f (0.0f, wb,0.0); 
   glVertex3f (0.0f, 0.0f,0.0); 
    
   glColor3f(0,1,0);
   glVertex3f (lb/2.0, 0.0,0.0); 
   glVertex3f (lb/2.0, wb,0.0); 
   
   glVertex3f (lb/2.0, 0.0f,0.0); 
   glVertex3f (lb/2.0, wb,0.0); 

   glColor3f (1.0f, 0.0f, 0.0f); //RED COLOR RIGHT END 
   glVertex3f (lb, wb,0.0); 
   glVertex3f (lb, 0.0f,0.0); 
glEnd ();

One more thing, when posting code please use the [ code ] tag

Mobeen has given you the answer. You must use more than one quad. Put them next to each other, assigning the colors you want to the left and right edges of each quad. In other words, do what you’ve already done but for a whole bunch of narrow quads placed end to end. Below is a routine that does this. Note that it sets up a simple coordinate system for plotting the color bar. When you want to position things on the screen (that don’t move with your 3D objects), set up a simple coordinate system. This will not interfere with, or override, the coordinate system you set up for your 3D scene. Call this routine from the end of your myDisplay routine.



//---+----3----+----2----+----1----+---<>---+----1----+----2----+----3----+----4
//--------------------------------  Color_Bar  ---------------------------------

void Color_Bar ()
{
    int i;

    static float col[6][3] = {{1,0,0},  // red
	                      {0,1,0},  // green
	                      {0,0,1},  // blue
	                      {1,1,0},  // yellow
	                      {0,1,1},  // cyan
	                      {1,0,1}}; // purple

    static int bot[6][2] = {{0,0}, {20,0}, {40,0}, {60,0}, {80,0}, {100,0}},
	       top[6][2] = {{0,5}, {20,5}, {40,5}, {60,5}, {80,5}, {100,5}};

    // Set up coordinate system to position color bar near bottom of window.

    glMatrixMode (GL_PROJECTION);
    glLoadIdentity ();
    glOrtho (-40, 140, -20, 200, -1, 1);
    glMatrixMode (GL_MODELVIEW);
    glLoadIdentity ();

    // Use Quad strips to make color bar.

    glBegin (GL_QUAD_STRIP);
       for (i = 0; i <= 5; i++)  {
          glColor3fv  (col[i]);
	  glVertex2iv (bot[i]);
	  glVertex2iv (top[i]);
       }
    glEnd ();

    // Label ends of color bar.

    glColor3f (1, 1, 1);

    bitmap_output (-5, 7, 0, "Min_H", GLUT_BITMAP_9_BY_15);
    bitmap_output (95, 7, 0, "Max_H", GLUT_BITMAP_9_BY_15);
}

did u know that if u draw a line with gl and make the two points diferent colors you will already get a gradient effect from one color to the other
i gues you could make a bunch of these lines with a loop of colors

did i mention that opengl is the coolest thing EVERRR