Using Camera

Let's look into an exciting part of 3D TSGL, the Camera. Yep, you heard that right. The 3D aspect has a camera that you can move and configure.

We will use the same cube we built in the previous tutorial (3D aspects) for this example. Moreover, we have added a reference wire-frame cube in which our main cube and the camera are. This was to show that the main cube is not moving rather it is the camera. Previously, we saw how to move the cube in 3D space. Now we are going to move the camera or your screen while the cube is still. You can look into Camera in the API to get more understanding.

Let us add the camera and a reference cube:

#include <tsgl.h>
using namespace tsgl;

int main() {
    Canvas c(0, 0, 500, 500, "Camera!", GRAY, nullptr, FRAME * 2);
    Camera *cam = c.getCamera();

    c.start();

    // main cube
    Cube cube(0, 0, 0, 50, 0, 0, 20, BLACK);
    c.add(&cube);

    // reference cube
    Cube refCube(0, 0, 0, 250, 0, 0, 20, RED);
    refCube.setIsFilled(false);
    refCube.setOutlineColor(RED);
    c.add(&refCube);

    cam->setPositionZ(150);  // move the camera into the reference cube

    c.wait();
}

Since we want to see the camera move, we want animation and so we will add a for loop:

#include <tsgl.h>
using namespace tsgl;

int main() {
    Canvas c(0, 0, 600, 400, "Camera!", GRAY);
    Camera *cam = c.getCamera();

    c.start();

    // main cube
    Cube cube(0, 0, 0, 50, 0, 0, 20, BLACK);
    c.add(&cube);

    // reference cube
    Cube refCube(0, 0, 0, 250, 0, 0, 20, RED);
    refCube.setIsFilled(false);
    refCube.setOutlineColor(RED);
    c.add(&refCube);

    cam->setPositionZ(150);  // move the camera into the reference cube

    for (unsigned d = 1; d <= 90; d++) {  // move camera to the right
        c.sleep();
        cam->moveRight(1);
    }
    for (unsigned d = 1; d <= 180; d++) {  // move camera to the left
        c.sleep();
        cam->moveLeft(1);
    }
    for (unsigned d = 1; d <= 90; d++) {  // return camera to the center(by moving right)
        c.sleep();
        cam->moveRight(1);
    }

    c.wait();
}

The above code creates the animation loop and moves the camera to left then right then to the center. You should see something like this:

Note: The cube is NOT moving, it is only the camera(your screen) moving left and right!

The Camera class has various functions such as moving, setting position, and changing the yaw and pitch.

Now let us change the yaw and pitch, meaning let's rotate the camera(our screen). To see and visualize the rotation easier, we have added a roll to the cube. Meaning you will see the front and top view of the cube. Additionally, We have changed the size of the canvas and added optional parameters to slow the animation.

#include <tsgl.h>
using namespace tsgl;

int main() {
    Canvas c(0, 0, 500, 500, "Camera!", GRAY, nullptr, FRAME * 2);
    Camera *cam = c.getCamera();

    c.start();

    // main cube
    Cube cube(0, 0, 0, 50, 0, 0, 20, BLACK);
    c.add(&cube);

    // reference cube
    Cube refCube(0, 0, 0, 250, 0, 0, 20, RED);
    refCube.setIsFilled(false);
    refCube.setOutlineColor(RED);
    c.add(&refCube);

    cam->setPositionZ(150);  // move the camera into the reference cube

    for (unsigned d = 1; d <= 30; d++) {  // move the camera to the left
	c.sleep();
	cam->changeYawBy(1);
    }
    for (unsigned d = 1; d <= 60; d++) {  // move the camera to the right
	c.sleep();
	cam->changeYawBy(-1);
    }
    for (unsigned d = 1; d <= 30; d++) { // return the camera back to the center
	c.sleep();
	cam->changeYawBy(1);
    }
    for (unsigned d = 1; d <= 30; d++) { // move the camera down
	c.sleep();
	cam->changePitchBy(1);
    }
    for (unsigned d = 1; d <= 60; d++) { // move the camera up
	c.sleep();
	cam->changePitchBy(-1);
    }
    for (unsigned d = 1; d <= 30; d++) { // return the camera to the center
	c.sleep();
	cam->changePitchBy(1);
    }
	
    c.wait();
}

Note: The cube is NOT moving, it is only the camera(your screen) rotating on its axis!

The result will look like this:

You can utilize the movement and rotation of the camera to show various perspectives of your visualizations besides moving the shapes.

Almost all the classes and functions in TSGL are inclusive of yaw, pitch, and roll giving you the opportunity of making 3D visualizations. Now that you are done with the tutorials, you can create your own visualizations. You can use the TSGL API and TSGL Wiki as a guide.