Sheet 02: Interpolation & Transformation

Exercise: Colored Triangles (10 points)

The provided code for this exercise already contains parts from the previous task: GLFW and GLEW initialization are encapsulated in classes inside the Utils folder. That folder also contains matrix and vector classes, which will be used in this and upcoming exercises.

You do not need to modify the code in Utils. For this assignment, it is sufficient to edit only the classes in the Hello_Triangles directory. Your shader source files are located in the res subfolder. The GLHelper files assist in compiling these shaders.

The example program main.cpp renders a simple white triangle (see the left image in Figure triangles). Extend the program so that it matches exactly the right image: Three equilateral triangles with color-interpolated corners (red, magenta, yellow, blue, cyan, green).

Use the vector and matrix classes in the Utils folder, as transformations will be essential for the following tasks.

Exercise: Transformations & Animations (10 points)

Extend your solution from the Colored Triangles task so that each of the three equilateral triangles rotates at 45 degrees per second — each around one of the primary axes:

The top triangle (red-magenta-yellow) rotates around the x-axis, centered at half its height.
The bottom right triangle (yellow-cyan-green) rotates around the y-axis, centered at half its width.
The bottom left triangle (magenta-blue-cyan) rotates around the z-axis, centered at its geometric centroid.

Continue to use an orthographic projection as in the previous exercise. You can refer to the example below for visual verification.

Additionally, the program must support the following user input:

Spacebar: Toggles animation on/off
R key: Resets the animation to its initial state

When the application starts, the animation must be paused in the reset state.

Top – initial state. Bottom – color-interpolated Triforce.
Press Spacebar to toggle the animation. Press R to reset the animation.

Text description and demo controls

Three equilateral triangles form a larger triangular arrangement with an empty inverted triangle in the center. The upper triangle interpolates red, magenta and yellow; the lower right interpolates yellow, cyan and green; the lower left interpolates magenta, blue and cyan.

Each triangle rotates at 45 degrees per second: the upper triangle about the x-axis at half its height, the lower right about the y-axis at half its width, and the lower left about the z-axis through its centroid. With orthographic projection, rotations about x or y make the projected triangle narrow to a line and widen again. Rotation about z turns it within the image plane. The initial state is paused.

Focus the demo with Tab. Space starts or pauses the animation; R returns it to the initial state. Tab moves on to the next page control.