Author: Romain Vergne (website)
Please cite my name and add a link to my web page if you use this course

Image synthesis and OpenGL: exercices 01

Setup

We will use Linux and the following libraries:

OpenGL: Open Graphics Library (online spec, pdf spec)
GLU: OpenGL Utility Library
GLEW: OpenGL Extension Wrangler Library
GLM: OpenGL Mathematics library
QT: the window manager

Installing sources. In a terminal, do:

Download/extract external libraries and sources

wget http://romain.vergne.free.fr/teaching/IS/data01/TP01.tgz
wget http://romain.vergne.free.fr/teaching/IS/data01/ext.tgz
tar xvzf TP01.tgz && tar xvzf ext.tgz

If glew is not installed on your machine, go to ext/glew-1.9.0 and compile (make)
If needed, edit the file main.pro to ensure that paths are correct and link to the glew and glm libs
To compile: qmake && make
To run: ./tp01
To edit: use either your prefered text editor or qtcreator

First OpenGL program: a simple animated screensaver

The goal of these exercices is to familiarize yourself with OpenGL windows and primitives. You should obtain something like this:

Exercice 1: Hello World

Open the source file viewer.h/.cpp and observe/understand the structure of the source files:

The viewer is a QGLWidget (from Qt) that conveniently produces an OpenGL context when created.

Check the documentation associated with QGLWidget
When are the functions initializeGL, paintGL and resizeGL called?

What are the role of the functions glClearColor (initialize) and glClear (display)? (check the OpenGL documentation)
Change the color of the background to blue

Exercice 2: OpenGL primitives (OpenGL version < 4)

Basic primitives (points, lines, triangles quads and polygons) in OpenGL can be drawn using the following algorithm:

glBegin(mode);
glColor3f(float,float,float); // set the current color
glVertex3f(float,float,float); // draw a vertex
glVertex3f(float,float,float); // draw another vertex
...
glEnd();

where mode is one of the available OpenGL scheme:
(image taken here)

By default, widget coordinates are in the range [-1,1] in the X and Y directions.

Use the GL_TRIANGLES mode, glVertex3f and glColor3f to obtain a result similar to:

What happens if we change the color on each vertex of a triangle?
Choose some colors at each vertex so that the interpolation is smooth everywhere
Try to obtain exactly the same result using the GL_TRIANGLE_STRIP mode
What are the advantages of TRIANGLE_STRIP compared to GL_TRIANGLES?

Exercice 3: generating random points

We now would like to distribute and draw some points in the viewer, with randomized positions, colors and sizes.
To that end, we first need to create these points and store them in an array.

The Point structure is defined in viewer.h.

In the function generateRandomPoints, generate some points and store them in the data structure _points (an array of Point).

each point added in this array should have random properties (color, position, direction and size) - you should use the random functions provided in viewer.h
a point direction defines the direction and speed in which the point is moving (vectors should be small enough - no more than 0.1 length)

Once, the points have been defined, use the GL_POINTS mode in paintGL to draw the points with their respective color and size at their given positions.

Note 1: the size of a point can be modified using the function glPointSize(float)
Note 2: glPointSize must be outside glBegin(...)/glEnd()

How do the points look like?
Add the following function in initializeGL:

glEnable(GL_POINT_SMOOTH);
What do you conclude?

Exercice 4: animating points

We would like the points to move in their respective direction, and making sure that they bounce off the walls of the window.
At each time step, the position of a point should be updated this way:

if point is outside a wall then
point.dir = reflected vector between point.dir and wall.normal
endif
point.pos = point.pos + point.dir

Complete the function updatePointPositions(std::vector<Point> &points) and add its call in the rendering function to animate points

Note 1: testing if a point is outside a wall can be done by comparing point and wall coordinates.
Example for the image above: if pos.y<=-1 then update direction with the normal (0,1)
Note 2: the reflected vector can be computed using the function glm::reflect(dir,normal)

Exercice 5: viewport

Try to resize the window. What do you observe?
Read the manual page of the function glViewport
Fill the function resize to resolve the problem

PREVIOUS: 01 - INRODUCTION

NEXT: 02 - TRANSFORMATIONS