NeHe Productions: Adding Colour

1 of 3

HOME

TWITTER

FACEBOOK

Adding Colour

RSS

ATOM

FORUM

Like

16

+10

In the last tutorial I taught y ou how to display Triangles and Quads on the screen. In this tutorial I will teach y ou how to add 2
dif f erent ty pes of coloring to the triangle and quad. Flat coloring will make the quad one solid color. Smooth coloring will blend the
3 colors specif ied at each point (v ertex) of the triangle together, creating a nice blend of colors.
Using the code f rom the last tutorial, we will be adding to the DrawGLScene procedure. I will rewrite the entire procedure below, so
if y ou plan to modif y the last lesson, y ou can replace the DrawGLScene procedure with the code below, or just add code to the
DrawGLScene procedure that is not already in the last tutorial.
?
1 int DrawGLScene(GLvoid)
// Here's Where We Do All The Drawing
2{
3
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Clear The Screen And The Depth Buffer
glLoadIdentity();
// Reset The Current Modelview Matrix
4
5
glTranslatef(-1.5f,0.0f,-6.0f);
// Left 1.5 Then Into Screen Six Units
6
7
glBegin(GL_TRIANGLES);
// Begin Drawing Triangles
8
If y ou remember f rom the last tutorial, this is the section of code to draw the triangle on the lef t half of the screen. The next line
of code will be the f irst time we use the command glColor3f (r,g,b). The three parameters in the brackets are red, green and blue
intensity v alues. The v alues can be f rom 0.0f to 1.0f . It works the same way as the color v alues we use to clear the background
of the screen.
We are setting the color to red (f ull red intensity, no green, no blue). The line of code right af ter that is the f irst v ertex (the top of
the triangle), and will be drawn using the current color which is red. Any thing we draw f rom now on will be red until we change the
color to something other than red.
?
1 glColor3f(1.0f,0.0f,0.0f);
2 glVertex3f( 0.0f, 1.0f, 0.0f);

// Set The Color To Red

// Move Up One Unit From Center (Top Point)

We'v e placed the f irst v ertex on the screen, setting it's color to red. Now bef ore we set the second v ertex we'll change the color
to green. That way the second v ertex which is the lef t corner of the triangle will be set to green.
?
1 glColor3f(0.0f,1.0f,0.0f);
2 glVertex3f(-1.0f,-1.0f, 0.0f);

// Set The Color To Green

// Left And Down One Unit (Bottom Left)

Now we're on the third and f inal v ertex. Just bef ore we draw it, we set the color to blue. This will be the right corner of the triangle.
As soon as the glEnd() command is issued, the poly gon will be f illed in. But because it has a dif f erent color at each v ertex, rather
than one solid color throughout, the color will spread out f rom each corner, ev entually meeting in the middle, where the colors will
blend together. This is smooth coloring.
?
glColor3f(0.0f,0.0f,1.0f);
// Set The Color To Blue
1
glVertex3f( 1.0f,-1.0f, 0.0f);
// Right And Down One Unit (Bottom Right)
2
// Done Drawing A Triangle
3 glEnd();
4

NeHe Productions: Adding Colour

2 of 3

5 glTranslatef(3.0f,0.0f,0.0f);

// From Right Point Move 3 Units Right

Now we will draw a solid blue colored square. It's important to remember that any thing drawn af ter the color has been set will be
drawn in that color. Ev ery project y ou create down the road will use coloring in one way or another. Ev en in scenes where
ev ery thing is texture mapped, glColor3f can still be used to tint the color of textures, etc. More on that later.
So to draw our square all one color, all we hav e to do is set the color once to a color we like (blue in this example), then draw the
square. The color blue will be used f or each v ertex because we're not telling OpenGL to change the color at each v ertex. The f inal
result... a solid blue square. Again, the square (quad) is drawn in a clockwise order meaning we start of f looking at the back of the
quad.
?
1
2
3
4
5
6
7
8
9}

glColor3f(0.5f,0.5f,1.0f);
glBegin(GL_QUADS);
glVertex3f(-1.0f, 1.0f,
glVertex3f( 1.0f, 1.0f,
glVertex3f( 1.0f,-1.0f,
glVertex3f(-1.0f,-1.0f,
glEnd();
return TRUE;

0.0f);
0.0f);
0.0f);
0.0f);
//

// Set The Color To Blue One Time Only

// Start Drawing Quads
// Left And Up 1 Unit (Top Left)
// Right And Up 1 Unit (Top Right)
// Right And Down One Unit (Bottom Right)
// Left And Down One Unit (Bottom Left)
Done Drawing A Quad
// Keep Going

Finally change the code to toggle window / f ullscreen mode so that the title at the top of the window is proper.
?
1 if (keys[VK_F1])
// Is F1 Being Pressed?
2 {
3
keys[VK_F1]=FALSE;
// If So Make Key FALSE
4
KillGLWindow();
// Kill Our Current Window
fullscreen=!fullscreen;
// Toggle Fullscreen / Windowed Mode
5
// Recreate Our OpenGL Window ( Modified )
6
if (!CreateGLWindow("NeHe's Color Tutorial",640,480,16,fullscreen))
7
{
8
return 0;
// Quit If Window Was Not Created
9
}
10
11 }
In this tutorial I hav e tried to explain in as much detail, how to add f lat and smooth coloring to y our OpenGL poly gons. Play
around with the code, try changing the red, green and blue v alues to dif f erent numbers. See what colors y ou can come up with. If
y ou hav e comments or questions please email me. If y ou f eel I hav e incorrectly commented something or that the code could be
done better in some sections, please let me know. I want to make the best OpenGL tutorials I can. I'm interested in hearing y our
f eedback.
Jeff Molofee (NeHe)
* DOWNLOAD Visual C++ Code For This Lesson.
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*

DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD

ASM Code For This Lesson. ( Conv ersion by Foolman )

Borland C++ Builder 6 Code For This Lesson. ( Conv ersion by Christian Kindahl )
BeOS Code For This Lesson. ( Conv ersion by Rene Manqueros )
C# Code For This Lesson. ( Conv ersion by Joachim Rohde )
VB.Net CsGL Code For This Lesson. ( Conv ersion by X )
Code Warrior 5.3 Code For This Lesson. ( Conv ersion by Scott Lupton )
Cy gwin Code For This Lesson. ( Conv ersion by Stephan Ferraro )
D Language Code For This Lesson. ( Conv ersion by Familia Pineda Garcia )
Delphi Code For This Lesson. ( Conv ersion by Michal Tucek )
Dev C++ Code For This Lesson. ( Conv ersion by Dan )
Euphoria Code For This Lesson. ( Conv ersion by Ev an Marshall )
Game GLUT Code For This Lesson. ( Conv ersion by Milikas Anastasios )
GLUT Code For This Lesson. ( Conv ersion by Andy Restad )
Irix Code For This Lesson. ( Conv ersion by Lakmal Gunasekara )
Jav a Code For This Lesson. ( Conv ersion by Jef f Kirby )
Jav a/SWT Code For This Lesson. ( Conv ersion by Victor Gonzalez )
Jedi-SDL Code For This Lesson. ( Conv ersion by Dominique Louis )
JoGL Code For This Lesson. ( Conv ersion by Kev in J. Duling )
LCC Win32 Code For This Lesson. ( Conv ersion by Robert Wishlaw )

NeHe Productions: Adding Colour

3 of 3

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*

DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD
DOWNLOAD

Linux Code For This Lesson. ( Conv ersion by Richard Campbell )

Linux/GLX Code For This Lesson. ( Conv ersion by Mihael Vrbanec )
Linux/SDL Code For This Lesson. ( Conv ersion by Ti Leggett )
LWJGL Code For This Lesson. ( Conv ersion by Mark Bernard )
Mac OS Code For This Lesson. ( Conv ersion by Anthony Parker )
Mac OS X/Cocoa Code For This Lesson. ( Conv ersion by Bry an Blackburn )
MASM Code For This Lesson. ( Conv ersion by Nico (Scalp) )
Power Basic Code For This Lesson. ( Conv ersion by Angus Law )
Pelles C Code For This Lesson. ( Conv ersion by Pelle Orinius )
Perl Code For This Lesson. ( Conv ersion by Cora Hussey )
Py thon Code For This Lesson. ( Conv ersion by John Ferguson )
REALbasic Code For This Lesson. ( Conv ersion by Thomas J. Cunningham )
Ruby Code For This Lesson. ( Conv ersion by Manolo Padron Martinez )
Scheme Code For This Lesson. ( Conv ersion by Jon DuBois )
Solaris Code For This Lesson. ( Conv ersion by Lakmal Gunasekara )
Visual Basic Code For This Lesson. ( Conv ersion by Ross Dawson )
Visual Fortran Code For This Lesson. ( Conv ersion by Jean-Philippe Perois )
Visual Studio .NET Code For This Lesson. ( Conv ersion by Grant James )

< Lesson 02Lesson 04 >

1997-2014 Gamedev . All rights reserv ed.
NeHe and NeHe Productions are trademarks of GameDev.net, LLC
OpenGL is a registered trademark of Silicon Graphics Inc.