Using 3D Aspects

Now that you are done with 2D, let us look into 3D!

Linux/Mac/WSL/Cygwin users: Start off by creating a folder and name it "Tutorial11". Create a file inside of Tutorial11 and name it "cube.cpp". Then, navigate to the cloned TSGL folder and into the genericMakefile folder. Copy the Makefile into Tutorial11 and change the "TARGET" line so that "program" is now "cube".

All platforms: Follow the steps in the Building Programs page on how to compile and run the program (this is a single-file program).

• Green - x-axis
• Red - y-axis
• Blue - z-axis

Think of the canvas as the screen of the phone image showed above. To clear things up, the z-coordinate is the depth into/out of the screen.

3D comes into play with the three useful concepts: yaw, pitch, and roll. To make it easier to understand, we will look at an example. TSGL provides various 3D classes for us to use.

Let us draw a Cube on a Canvas!

#include <tsgl.h>
using namespace tsgl;

int main() {
    Canvas c(0, 0, 600, 400, "Hello World!", GRAY);

    c.start();

    Cube cb(0, 0, 0, 150, 0, 0, 0, BLACK);
    c.add(&cb);

    c.wait();
}

The Cube() constructor takes these parameters:

• The x-coordinate of the center of the Cube (0).
• The y-coordinate of the center of the Cube (0).
• The z-coordinate of the center of the Cube (0).
• The side length of the Cube (150)
• The Cube's yaw, in degrees. (0)
• The Cube's pitch, in degrees. (0)
• The Cube's roll, in degrees. (0)
• Color (Black)

Compile using make and run using ./cube. You should see a square in the middle of the screen:

Since we have 0's for the z-coordinate, yaw, pitch and roll, we only see a square. If you change the z-coordinate to 50:

Cube cb(0, 0, 50, 150, 45, 45, BLACK); 

You will see that the square gets bigger. This is because the depth increased and the square is closer to you.

Yaw, Pitch, and Roll

Now let's mess with the yaw, pitch and roll!

• The yaw is the rotation on the z-axis in a counterclockwise direction
• The pitch is the rotation on the y-axis in clockwise direction
• The roll is the rotation on the x-axis in counterclockwise direction

Update your cube.cpp to look like this:

Cube cb(0, 0, 0, 150, 25, 0, 0, BLACK);

Since we gave the yaw a value of 25 degrees, it should look like this:

Now let's change the pitch:

Cube cb(0, 0, 0, 150, 0, 25, 0, BLACK);

You should get an image like this:

Finally, let's change the roll of the cube:

Cube cb(0, 0, 0, 150, 0, 0, 25, BLACK);

You should get an image like this:

You now have been shown how to use Yaw, Pitch, and Roll when creating any Drawable object!

That concludes this tutorial!

The next tutorial is Using 3D Shapes!