2d Graphics Programming – Week 2 Lab 1 Revision of OpenGL

Revision of C++ and some 2D graphics

Installing GLUT (on your own computers!)

These lab exercises require that the OpenGL and GLUT libraries be installed on your
computer before you begin. In the University, all labs have OpenGL libraries, but only
E106 and E108 have the GLUT libraries installed. If you want to work at home you will
have to download and install the GLUT libraries. The most recent version for Windows
can be downloaded from: http://www.xmission.com/~nate/glut.html - don’t download
the large source code file, just the smaller (117KB) “glut-3.7.6-bin.zip” file.
The files in the zip then need copied to various locations on your computer:
• glut32.dll should be copied into the C:\Windows\System folder
• glut32.lib gets copied into the Visual C++ lib folder (on my machine that is
C:\Program Files\Microsoft Visual Studio .NET 2003\Vc7\PlatformSDK\Lib,
but the location will be a little different if you have a different version of
Visual C++). Into a directory called GL**************
• glut32.h goes in the “gl” include folder (on my machine that is C:\Program
Files\Microsoft Visual Studio .NET 2003\Vc7\PlatformSDK\Include\gl , but
the location may be different if you have a different version of Visual C++)

1. Creating a window with GLUT

To test whether GLUT has been installed correctly, try out the following program
which will create a window using the GLUT library. Create a new empty console project,
add a file to it (e.g. glut_window.cpp) and insert the following code:
// glut_window.cpp
// A very basic OpenGL/GLUT application
// Doesn’t do anything other than create a window!
#include <GL/glut.h>

void display(void) {
glClear(GL_COLOR_BUFFER_BIT); // Clear all pixels
// drawing code goes in here!
glFlush(); // Redraw (single buffered)
}

int main(int argc, char **argv) {

glutInit(&argc, argv);
glutCreateWindow("Empty Window");
glutDisplayFunc(display); // Tell glut what function to call
// to re-draw the window
glutMainLoop(); // loop while waiting for messages
// by default, window will respond
// to resize, move and close events
return 0; // return 0 indicates program exited OK
}

Build and run your program. If all goes well a console window will appear (ignore this),
followed by another window with the title “Empty Window”. This second window is the
GLUT/OpenGL window – we currently don’t have any code to draw anything, but we can
move, resize, reshape and close down the window.

1|Page
 2d Graphics Programming – Week 2 Lab 1 Revision of OpenGL

2. Draw something!
Now we are going to modify the code to draw a simple shape (a polygon). In the main
function, change the window name from "Empty Window" to “Square?”. Then add the
following lines to the display function (immediately after the comment “drawing code
goes in here!”):
glBegin(GL_POLYGON);
glVertex2f (0.25, 0.25); // first corner
glVertex2f (0.75, 0.25); // second corner
glVertex2f (0.75, 0.75); // third corner
glVertex2f (0.25, 0.75); // fourth corner
glEnd();
Now when you build and run the code you should see something like this:

Try resizing the window, and see what happens to the white square.

The co-ordinates for the window range from (-1,-1) at the bottom left to (1,1) at the
top right.

2. Point Plotter
The glBegin() call tells OpenGL what kind of drawing primitives (points, lines, connected
lines, triangles, polygon, etc) we wish to draw. The program above draws a single polygon
(a shape with any number of sides). It is easy to change the program so that it plots
points at the corner positions instead of drawing the whole shape
1. Change the line glBegin(GL_POLYGON); to glBegin(GL_POINTS);
2. Build and run your program. You should see a window with four points plotted
near the corners of the window.
3. Change the point size. Immediately before the glBegin line, add the following
line:
glPointSize(5.0);
4. Build and run your program. The points should now be much larger.

2|Page
 2d Graphics Programming – Week 2 Lab 1 Revision of OpenGL

3. A Basic Function Plotter

By plotting individual points, it is possible to create plots of mathematical functions,
such as sine or tangent. For functions such as these, the height of the point (its y
value) is given by the result of f(x) - e.g. y = sin(x) to plot a sine curve.

A sine curve (plotted from -180 degress to +180 degrees), should look like this:

1. Change the display function to the following:

void display(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glPointSize(2);
glBegin(GL_POINTS);
for (float x=-1;x<=1; x+=0.001)
glVertex2f(x,sin(x));
glEnd();
glFlush();
}

As the sin() function is part of the <cmath> library, you will also have to add the
following lines to the top of your program:
#include <cmath>
using namespace std;

2. Build and test your program. Does your plot match the picture above?
As noted above, the picture shows the result of plotting sin over the range -180
degrees to +180 degrees – but this is not the range of x values we have used.
Additionally, the sin function takes its input in radians – not in degrees. (PI
radians = 180 degrees; 1 degree = PI/180 radians).
3. Fix your program to plot the sin curve as shown above – we need to plot the sin
of –PI to +PI. Replace the for loop with the following:
for (float x=-1;x<=1; x+=0.001)
glVertex2f( x, sin(x*3.14159) );
4. Now add some axes to indicate the lines x=0 and y=0.
After the line glEnd(); add the following lines:
3|Page
 2d Graphics Programming – Week 2 Lab 1 Revision of OpenGL

glBegin(GL_LINES);
// need some glVertex2f calls here to plot the lines!
glEnd();
5. Each line requires two vertices – one for each end. To plot both lines you will
need to add four glVertex2f calls between the new glBegin and glEnd calls.
Add the axes. If you get it right your program should look like this:

4. Experiment with OpenGL

To get a better idea of what the different commands do, try experimenting with your
project. Save a backup copy of the project, and try some of the following additional
exercises:
1. See what happens if you omit some of the OpenGL commands – such as glClear or
glFlush.
2. Change the colours!
Add the line glClearColor(0.0, 0.0, 0.0, 0.0); to the top of the display
function. Changing the first three values here will allow you to change the
background function.
Change the drawing colour by adding calls to glColor3f( r, g, b); inside
your display function – using numbers between 0.0 and 1.0 for each of r, g and b.
3. Write display functions for cosine or other mathematical functions.
4. Try drawing your own simple pictures using points, lines and polygons – for
example, try plotting a circle using points, or drawing a simple house shape using
lines.

4|Page
 2d Graphics Programming – Week 2 Lab 1 Revision of OpenGL

Random Numbers
A role-playing game needs to simulate the rolling of lots of dice.
Write a simple program in C or C++ that rolls dice and displays the totals.

The program must present 6 totals – each representing the result of rolling and adding
three dice. Accordingly, each total should be in the range 3-18. Numbers in the mid-
range should occur much more often than the biggest and smallest possible results.

Write the program so that the dice rolled are different every time you run the
program.

Bouncing Balls
If you have not already done so, use one of the versions of the OpenGL framework
application, and modify it so that there are several balls moving across the screen. Balls
should each move with different initial velocities, and should bounce off of the sides of
the screen
Optionally, you can try to add effects that mimic gravity or wind.
The version of the framework on blackboard in the C++ folder is simpler – and does not
use a ‘ball’ class.
The version included with lecture 1 is better – though more complex to follow initially.
In this version there is a ball class, and it should be possible to write more generic code
that would – for example – make it easier to increase the number of balls.

Demonstrate your work to the lab tutor

Lab work is assessed. Be sure to demonstrate your finished programs to the lab tutor.

If you are unable to do so this week, finish the programs for next week.

5|Page