Introduction:
Everything around us is seen colored; when you are going to draw a scene in OpenGL you have to add some colors to the objects to make them similar to the real world objects. Colors have two end points.
All colors: represented by the white color (the material of the object reflects all colors)
No colors: represented by the black color (the material of the object reflects no color)
In this tutorial we are going to introduce how colors are represented in OpenGL, we will do some color blending to the objects; also we will show how to change the default color of the background of the OpenGL window.
Computer Colors
The colors in computer are represented by three components of other basic colors, namely Red, Green, Blue colors. The blending of the three colors gives us the desired color, for example
Black: Red=0, Green=0, Blue=0 (means no color)
Green: Red=0 Green=1, Blue=0
Yellow: Red=1, Green=1 Blue=0
White: Red=1, Green=1, Blue=1(all colors)
In Fig. 1 we see how the colors are represented by the computer monitor
Fig. 1 Computer colors
The default color for OpenGL is white. We are going to use the function glColor3f(redvalue, greenvalue, bluevalue) to add colors to the objects.
The program
Open new project in Visual C++ 6, “You can use the code from tutorial 1 and update it to complete the current tutorial”. Update the init() function to become as follow
void init(void)
{
glClearColor (0.0, 0.0, 0.0, 0.0);
glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);
glEnable(GL_COLOR_MATERIAL);
}
glEnable(GL_COLOR_MATERIAL) enable the coloring in OpenGL.
Also we are going to change the shapes in tutorial 1 and use other shapes; this will help us understanding how shapes are drawn in OpenGL. For example to draw a Star you can use the glBegin(GL_LINE_LOOP) and connect the segments to form a Star, let us see how to do that in OpenGL
We will use structures in C++ which will be very helpful in developing large programs like a complete game. We need to define a structure for the point as follow
struct POINT
{
GLfloat x;
GLfloat y;
};
Then we will define the five points of the Star, p1, p2, p3, p4, and p5 ( it is preferred to sketch the drawing on a paper and define the points before start coding). Then we will use the glBegin(GL_LINE_STRIP) to draw the Star which will connects each point to the other, for example p1 will be connected to p2, and p2, will be connected to p3, and p3 will be connected to p4 and p4 will be connect to p5 and finally p5 will be connected to p1 to form a line loop. Change the display function to be as follow
void display(void)
{
glClear(GL_COLOR_BUFFER_BIT );
glLoadIdentity();
glColor3f(1.0f,1.0f,0.0f);
POINT p1,p2,p3,p4,p5;
p1.x=300;p1.y=200;
p2.x=260;p2.y=300;
p3.x=350;p3.y=240;
p4.x=250;p4.y=240;
p5.x=340;p5.y=300;
glBegin(GL_LINE_LOOP);
glVertex2i(p1.x,p1.y);
glVertex2i(p2.x,p2.y);
glVertex2i(p3.x,p3.y);
glVertex2i(p4.x,p4.y);
glVertex2i(p5.x,p5.y);
glEnd();
glutSwapBuffers();
}
The result of the above code will be as shown in Fig. 2 , as we can see we have used the Yellow color to color the lines. The shape is pretty simple but we will show you how to convert this shape into a more colorful polygon.
Fig. 2 drawing a Star
If you just change the glBegin(GL_LINE_LOOP) to glBegin(GL_POLYGON). The shape will not be a Pentagon as you may expect. Instead it will take non-uniform shape (try to do this as a practice). The reason of that is the order of the points. We have to change the order the points to start from point one p1 and rotating counter-clockwise, like rotating around a circle. The order of the points should be as follow p1, p4, p2, p5, and p3. This way we will get the desired Pentagon shape. As shown by the following code.
void display(void)
{
glClear(GL_COLOR_BUFFER_BIT );
glLoadIdentity();
glColor3f(1.0f,1.0f,0.0f);
POINT p1,p2,p3,p4,p5;
p1.x=300;p1.y=200;
p2.x=260;p2.y=300;
p3.x=350;p3.y=240;
p4.x=250;p4.y=240;
p5.x=340;p5.y=300;
glBegin(GL_POLYGON);
glVertex2i(p1.x,p1.y);
glVertex2i(p4.x,p4.y);
glVertex2i(p2.x,p2.y);
glVertex2i(p5.x,p5.y);
glVertex2i(p3.x,p3.y);
glEnd();
glutSwapBuffers();
}
The result of the above code is shown in Fig. 3, it is important to mention that if you draw other shapes after the Pentagon, they will all take the same color (Yellow in our example)
Fig.3 Drawing a Pentagon by using the same points in Fig. 2
Now we will do some tweaks to our pentagon, so as to have the effect of blending colors. This can be done by specifying a different color for each vertex. Let us try using the following code for coloring the pentagon
void display(void)
{
glClear(GL_COLOR_BUFFER_BIT );
glLoadIdentity();
POINT p1,p2,p3,p4,p5;
p1.x=300;p1.y=200;
p2.x=260;p2.y=300;
p3.x=350;p3.y=240;
p4.x=250;p4.y=240;
p5.x=340;p5.y=300;
glBegin(GL_POLYGON);
glColor3f(1.0f,1.0f,0.0f);
glVertex2i(p1.x,p1.y);
glColor3f(0.0f,1.0f,0.5f);
glVertex2i(p4.x,p4.y);
glColor3f(0.4f,0.0f,0.5f);
glVertex2i(p2.x,p2.y);
glColor3f(0.2f,0.3f,1.0f);
glVertex2i(p5.x,p5.y);
glColor3f(0.7f,0.1f,0.0f);
glVertex2i(p3.x,p3.y);
glEnd();
glutSwapBuffers();
}
.The result will be as shown in Fig. 4
Fig. 4 The pentagon with blended colors
The last thing we will do here is to change the background color of our OpenGL window. The function which is responsible for this is
glClearColor (0.0, 0.0, 0.0, 0.0);
which is defined in the init() function. We will notice that the RGB colors are all zeros, means black. If we want to change this color to Sky blue color we can use the following RGB values
glClearColor (0.7, 0.9, 1.0, 0.0);
The result of the above change will be as shown in Fig. 5
Fig. 5 The background colored with sky blue color
Source code
Click here to download the source code of this tutorial.