Using Background

BEFORE PROCEEDING, PLEASE SEE THE Building Programs PAGE FOR MORE INFORMATION ON HOW TO COMPILE AND RUN A PROGRAM WITH TSGL CODE!!!

So, you've downloaded and installed TSGL. Congrats! Now what? Well, there's a lot you can do with TSGL. For now, let's start by making a simple Hello World program using the Background with a Canvas!

The Background is used for creating static visualizations.

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

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

Now, we'll be writing in C++, so let's place our #include and using directives:

#include <tsgl.h>
using namespace tsgl;

tsgl.h contains #include directives for all of the necessary header files needed in order to use the TSGL library. This includes vital class header files such as those for the Background, Canvas, and the Timer class. TSGL also has its own namespace which must be used when using the TSGL library.

Moving forward, let's add some code that will create and initialize a Background and a Canvas. A Canvas is essentially a screen that draws and displays whatever it is that you want to draw and display. There's a special kind of Canvas, the CartesianCanvas, that we will look at later on.

For now, let's focus on the Background:

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

    Background *bgp = c.getBackground();

    c.start();
    // code goes here
    c.wait();
}

This is essentially the skeleton code for any TSGL program. Let's break it down. In the main method, a Canvas object is created positioned at (0, 0) (on your monitor) with a width of 600 and a height of 400. It has a title, Hello World! and a color WHITE.

The *bgp is a pointer to the Background. We will use it to call functions from the Background class.

The c.start() and c.wait() statements tell the Canvas to start drawing and then wait to close once it has completed drawing.

In between the c.start() and c.wait() statements is where the magic happens. We will place a new statement which will draw a line to the Canvas:

The starting point for the drawings is the center of the Canvas (300, 200).

#include <tsgl.h>
using namespace tsgl;

int main() {
    Canvas c(0, 0, 600, 400, "Hello World!", GRAY);
    Background *bgp = c.getBackground();

    c.start();

    //'H'
    bgp -> drawLine(-200, 50, 0, -200, -50, 0, 0, 0, 0, BLACK);
    bgp -> drawLine(-200, 0, 0, -150, 0, 0, 0, 0, 0, BLACK);
    bgp -> drawLine(-150, 50, 0, -150, -50, 0, 0, 0, 0, BLACK);

    //'E'
    bgp -> drawLine(-125, 50, 0, -125, -50, 0, 0, 0, 0, BLACK);
    bgp -> drawLine(-125, 50, 0, -75, 50, 0, 0, 0, 0, BLACK);
    bgp -> drawLine(-125, 0, 0, -75, 0, 0, 0, 0, 0, BLACK);
    bgp -> drawLine(-125, -50, 0, -75, -50, 0, 0, 0, 0, BLACK);

    //'L'
    bgp -> drawLine(-50, 50, 0, -50, -50, 0, 0, 0, 0, BLACK);
    bgp -> drawLine(-50, -50, 0, 0, -50, 0, 0, 0, 0, BLACK);

    //'L'
    bgp -> drawLine(25, 50, 0, 25, -50, 0, 0, 0, 0, BLACK);
    bgp -> drawLine(25, -50, 0, 75, -50, 0, 0, 0, 0, BLACK);

    //'O' - two ellipses on top of each other
    bgp -> drawEllipse(125, 0, 0, 25, 50, 0, 0, 0, GRAY, true);
    bgp -> drawEllipse(125, 0, 0, 23, 48, 0, 0, 0, c.getBackgroundColor());

    c.wait();
}

To draw the O, we drew two ellipses on top of each other, the smaller one taking the color of the background. This way the ellipse looks unfilled.

We will examine the Line and Ellipse classes in the Using Shapes tutorial. For now, just know that Line() creates a Line, Ellipse() creates a filled ellipse, and bgp -> draws any Drawable object to the Background.

Our code is now complete! Compile the code using make, and then once it has compiled correctly, run it using ./hello.cpp. A window should pop up with "Hello" written on it. To close the window, press the ESC key or click the 'x' in one of the corners. It should look like this:

Please note that the c.start() and c.wait() methods MUST be used at least once when working with the Canvas class. Bad things will happen if you do not have these methods and decide to draw something on a Canvas.

You've just made your first TSGL project, congratulations!

Next up, in Using Canvas, we take a look at how to draw shapes onto a Canvas.