Using Shapes

TSGL has a wide assortment of shapes. Rectangles, triangles, concave and convex polygons are just some of the shapes that you can draw. To draw a given shape, you can use the Background of a Canvas or you can use the Canvas itself.

The distinction between drawing to the Background or to the Canvas is that the Background is used for static drawing where the Canvas is used for dynamic drawings.

Let’s look at some examples.

Linux/Mac/WSL/Cygwin user: Create a new folder and name it "Tutorial3". Create a file inside of that folder and call it "shapes.cpp". Copy over the generic Makefile from the TSGL folder and change the "TARGET" line so that it now says "shapes" instead of "program".

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

Background (for static drawings)

This code draws shapes to the Background however, we go more in-depth using shapes on the Canvas since the Canvas provides the ability to add() and remove() shapes.

#include <tsgl.h>
using namespace tsgl;

int main() {
    Canvas c(0, 0, 800, 750, "Shapes!");

    Background *bgp = c.getBackground();

    c.start();
    bgp -> drawCircle(0, 0, 0, 100, 0, 0, 0, RED);
    bgp -> drawRectangle(250, 200, 0, 100, 200, 0, 0, 0, BLUE);
    bgp -> drawTriangle(-150, -100, 0, -300, -200, 0, -150, -300, 0, 0, 0, 0, GREEN);
    bgp -> drawLine(-300, 200, 0, -250, -50, 0, 0, 0, 0, PURPLE);
    c.wait();
}

The output of this code is the same as the code for drawing to the Canvas. Continue reading for the step-by-step tutorial.

Canvas (for dynamic drawings)

#include <tsgl.h>
using namespace tsgl;

int main() {
  Canvas c(0, 0, 500, 600, "Shapes!");
  c.start();
  Circle circle(0, 0, 0, 100, 0, 0, 0, RED);
  c.add( &circle );
  c.wait();
}

Compile and run it. A window should appear with a circle drawn in the center.

The Circle() constructor takes these parameters:

• x-coordinate for the center of the circle (0).
• y-coordinate for the center of the circle (0).
• z-coordinate for the depth of the circle in 3D space (0).
• The radius of the circle (100).
• The yaw of the circle in 3D space (0).
• The pitch of the circle in 3D space (0).
• The roll of the circle in 3D space (0).
• The color of the circle (RED). (Optional parameter: ColorFloat()).

See the Using 3D Aspects for using the 3D space elements.

The Circle() constructor lets you specify the optional color argument like so:

  Circle circle(0, 0, 0, 100, 0, 0, 0, BLUE);  //Color = BLUE

Rectangles are created in a similar fashion:

  Rectangle rec(250, 200, 0, 100, 200, 0, 0, 0, BLUE);

Rectangle() takes in these parameters:

• x-coordinate for the center of the rectangle (250).
• y-coordinate for the center of the rectangle (200).
• z-coordinate for the depth of the rectangle in 3D space (0).
• width of the rectangle (50).
• height of the rectangle (100).
• The yaw of the rectangle in 3D space (0).
• The pitch of the rectangle in 3D space (0).
• The roll of the rectangle in 3D space (0).
• The color of the rectangle (BLUE). (Optional parameter: ColorFloat()).

How about a triangle? Well:

  Triangle tri(-150, -100, 0, -300, -200, 0, -150, -300, 0, 0, 0, 0, GREEN);

Triangle() takes in these parameters:

• x-coordinate for the first point of the triangle (-150).
• y-coordinate for the first point of the triangle (-100).
• z-coordinate for the first point of the triangle in 3D space (0).
• x-coordinate for the second point of the triangle (-300).
• y-coordinate for the second point of the triangle (-200).
• z-coordinate for the second point of the triangle in 3D space (0).
• x-coordinate for the third point of the triangle (-150).
• y-coordinate for the third point of the triangle (-300).
• z-coordinate for the third point of the triangle in 3D space (0).
• The yaw of the triangle in 3D space (0).
• The pitch of the triangle in 3D space (0).
• The roll of the triangle in 3D space (0).
• The color of the triangle (GREEN). (Optional parameter: ColorFloat()).

In essence, whenever you draw a shape, the first few parameters are for the x and y-coordinates of the points of the shape and the last one is for the color.

After creating any shape, it must be added to a Canvas before it is visible. Like so:

  c.add( &shape );

add() takes a pointer to a Drawable as its parameter. Later, if you would like to remove an item from a Canvas, passing the pointer to remove() takes the Drawable off the Canvas.

Putting all of this code together:

#include <tsgl.h>
using namespace tsgl;

int main() {
    Canvas c(0, 0, 800, 750, "Shapes!");
    c.start();
    Circle circle(0, 0, 0, 100, 0, 0, 0, RED);
    Rectangle rec(250, 200, 0, 100, 200, 0, 0, 0, BLUE);
    Triangle tri(-150, -100, 0, -300, -200, 0, -150, -300, 0, 0, 0, 0, GREEN);
    c.add( &circle ); c.add( &rec ); c.add( &tri );
    c.remove( &rec );
    c.wait();
}

Compile and run it. A circle and triangle should appear since we removed the rectangle.

You can also draw regular lines:

Line l(-300, 200, 0, -250, -50, 0, 0, 0, 0, PURPLE);

Line() takes in these parameters:

• x-coordinate of the first point of the line (-300).
• y-coordinate of the first point of the line (200).
• z-coordinate for the first point of the line in 3D space (0).
• x-coordinate of the second point of the line (-250).
• y-coordinate of the second point of the line (-50).
• z-coordinate for the second point of the line in 3D space (0).
• The yaw of the line in 3D space (0).
• The pitch of the line in 3D space (0).
• The roll of the line in 3D space (0).
• The color of the line (PURPLE). (Optional parameter: ColorFloat()).

#include <tsgl.h>
using namespace tsgl;

int main() {
    Canvas c(0, 0, 800, 750, "Shapes!");
    c.start();
    Circle circle(0, 0, 0, 100, 0, 0, 0, RED);
    Rectangle rec(250, 200, 0, 100, 200, 0, 0, 0, BLUE);
    Triangle tri(-150, -100, 0, -300, -200, 0, -150, -300, 0, 0, 0, 0, GREEN);
    Line l(-300, 200, 0, -250, -50, 0, 0, 0, 0, PURPLE);
    c.add( &circle ); c.add( &rec ); c.add( &tri );
    c.add( &l );
    // c.remove( &rec );
    c.wait();
}

Compile and run it for the final result.

Check out the documentation in the TSGL API page to learn more about the variety of shapes for both the Background and Canvas.

That concludes this tutorial!

In the next tutorial, Using Text and Images, you get to learn about text!