# Tegning

## Generelt om tegning

### Vinduets koordinatsystem

Alle former som kan tegnes i vinduet krever at du spesifiserer en posisjon. Koordinater er målet relativ til øverst venstre hjørnet i vinduet, hvor x-koordinater øker mot høyre og y-koordinater øker nedover.

Du kan også bruke følgende program for å visualisere hvilket koordinat musepekeren er på:

    #include "AnimationWindow.h"

    int main() {
        TDT4102::AnimationWindow window;

        while(!window.should_close()) {
            TDT4102::Point mouseCoordinates = window.get_mouse_coordinates();
            std::string coordinateText = std::to_string(mouseCoordinates.x) + ", " + std::to_string(mouseCoordinates.y);
            window.draw_text(mouseCoordinates, coordinateText);

            window.next_frame();
        }

        return 0;
    }

### Rekkefølge av tegneoperasjoner

Du kan tenke på vinduet som et slags maleri. Det betyr at når du tegner over noe du har tegnet tidligere blir det «malt over».

For eksempel, dette er resultatet når rektangelen tegnes først og sirklen sist:

Og dette er resultatet dersom rektangelen tegnes sist:

## Basisformer

Om du ønsker å teste de kodeeksemplene som er vist, kan du bruke følgende eksempelet hvor du erstatter linjen som er markert:

    #include "AnimationWindow.h"

    int main() {
        TDT4102::AnimationWindow window;

        // Erstatt denne linjen med eksemplet som du ønsker å prøve

        window.wait_for_close();
    }

### Sirkler

For å tegne sirkler kan du bruke `draw_circle()` funksjonen. Denne krever et punkt hvor midtpunktet skal tegnes, og en radius som definerer hvor stor den skal være:

        TDT4102::Point circleOrigin {150, 150};
        int radius = 100;
        window.draw_circle(circleOrigin, radius);

        window.draw_circle({150, 150}, 100);

Det er mulig å endre på sirklens farge:

        TDT4102::Point circleOrigin {150, 150};
        int radius = 100;
        TDT4102::Color fillColor = TDT4102::Color::dark_orange;
        window.draw_circle(circleOrigin, radius, fillColor);

Og en kantlinje med en gitt farge:

        TDT4102::Point circleOrigin {150, 150};
        int radius = 100;
        TDT4102::Color fillColor = TDT4102::Color::dark_orange;
        TDT4102::Color borderColor = TDT4102::Color::black;
        window.draw_circle(circleOrigin, radius, fillColor, borderColor);

### Trekanter

Trekanter tegnes mellom tre punkt og `draw_triangle()` funksjonen:

        TDT4102::Point vertex0 {150, 50};
        TDT4102::Point vertex1 {50, 200};
        TDT4102::Point vertex2 {250, 200};
        window.draw_triangle(vertex0, vertex1, vertex2);

Og som før kan fargen endres:

        TDT4102::Point vertex0 {150, 50};
        TDT4102::Point vertex1 {50, 200};
        TDT4102::Point vertex2 {250, 200};
        TDT4102::Color fillColor = TDT4102::Color::indigo;
        window.draw_triangle(vertex0, vertex1, vertex2, fillColor);

### Rektangel

Rektangel tegnes fra et punkt som tilsvarer øverst venstre hjørnet samt høyde og bredde. Den tegnes med `draw_rectangle()` funksjonen:

        TDT4102::Point topLeftCorner {50, 50};
        int width = 150;
        int height = 100;
        window.draw_rectangle(topLeftCorner, width, height);

Som alle andre former kan fargen endres:

        TDT4102::Point topLeftCorner {50, 50};
        int width = 150;
        int height = 100;
        TDT4102::Color fillColor = TDT4102::Color::light_sea_green;
        window.draw_rectangle(topLeftCorner, width, height, fillColor);

Og kantfargen kan også endres som i sirkler:

        TDT4102::Point topLeftCorner {50, 50};
        int width = 150;
        int height = 100;
        TDT4102::Color fillColor = TDT4102::Color::light_sea_green;
        TDT4102::Color edgeColor = TDT4102::Color::lime;
        window.draw_rectangle(topLeftCorner, width, height, fillColor, edgeColor);

### Quad

En quad er et rektangel hvor hvert hjørne kan flyttes uavhengig av hverandre. Den tegnes med `draw_quad()` funksjonen:

        TDT4102::Point vertex0 {180, 80};
        TDT4102::Point vertex1 {50, 120};
        TDT4102::Point vertex2 {120, 250};
        TDT4102::Point vertex3 {250, 180};
        window.draw_quad(vertex0, vertex1, vertex2, vertex3);

Fargen kan justeres:

        TDT4102::Point vertex0 {180, 80};
        TDT4102::Point vertex1 {50, 120};
        TDT4102::Point vertex2 {120, 250};
        TDT4102::Point vertex3 {250, 180};
        TDT4102::Color fillColor = TDT4102::Color::violet;
        window.draw_quad(vertex0, vertex1, vertex2, vertex3, fillColor);

### Linjer

Du kan tegne linjer ved å bruke `draw_line()` funksjonen. Linjer tegnes mellom to punkt:

        TDT4102::Point lineStart {50, 50};
        TDT4102::Point lineEnd {280, 290};
        window.draw_line(lineStart, lineEnd);

I tillegg kan linjens farge endres:

        TDT4102::Point lineStart {50, 50};
        TDT4102::Point lineEnd {280, 290};
        TDT4102::Color lineColor = TDT4102::Color::firebrick;
        window.draw_line(lineStart, lineEnd, lineColor);

### Arc

En bue er en sirkel som tegnes delvis, mellom et start og sluttvinkel relativ til sirklens midtpunkt:

Merk at sluttvinkelen må være større enn startvinkelen, og alle vinklene må være mellom 0 og 360 grader.

Høyden og bredden spesifiserer sirklens størrelse, og gjør det mulig å strekke sirklen:

Med disse parameterene til sammen kan du tegne en bue ved å bruke `draw_arc()` funksjonen:

        TDT4102::Point centerPoint {100, 50};
        int width = 200;
        int height = 370;
        int startDegree = 270;
        int endDegree = 360;
        window.draw_arc(centerPoint, width, height, startDegree, endDegree);

Lik som linjer er det mulig å endre fargen:

        TDT4102::Point centerPoint {100, 50};
        int width = 200;
        int height = 370;
        int startDegree = 270;
        int endDegree = 360;
        TDT4102::Color lineColor = TDT4102::Color::lime;
        window.draw_arc(centerPoint, width, height, startDegree, endDegree, lineColor);

## Avanserte former

### Tekst

For å tegne tekst i vinduet brukes `draw_text()` funksjonen. Denne tar inn et sted på skjermen, og en tekst streng som skal vises som parametere:

        TDT4102::Point location {100, 100};
        std::string message = "Greetings from outer space!";
        window.draw_text(location, message);

Du kan endre fargen på teksten:

        TDT4102::Point location {100, 100};
        std::string message = "Greetings from outer space!";
        TDT4102::Color textColor = TDT4102::Color::deep_skyblue;
        window.draw_text(location, message, textColor);

Og størrelsen:

        TDT4102::Point location {100, 100};
        std::string message = "Greetings from outer space!";
        TDT4102::Color textColor = TDT4102::Color::deep_skyblue;
        int fontSize = 120;
        window.draw_text(location, message, textColor, fontSize);

Om du ønsker skrifttypen kan du bruke en Font verdi som siste parameter:

        TDT4102::Point location {100, 100};
        std::string message = "Greetings from outer space!";
        Color textColor = TDT4102::Color::deep_skyblue;
        int fontSize = 120;
        TDT4102::Font fontFace = TDT4102::Font::times_bold;
        window.draw_text(location, message, textColor, fontSize, fontFace);

Her er et oversikt over de forskjellige skrifttyper som er tilgjengelig og hvordan de ser ut:

Font | Eksempel Tekst
`Font::arial` | Beskrivende tekst
`Font::arial_bold` | Beskrivende tekst
`Font::arial_italic` | Beskrivende tekst
`Font::arial_bold_italic` | Beskrivende tekst
`Font::courier` | Beskrivende tekst
`Font::courier_bold` | Beskrivende tekst
`Font::courier_italic` | Beskrivende tekst
`Font::courier_bold_italic` | Beskrivende tekst
`Font::times` | Beskrivende tekst
`Font::times_bold` | Beskrivende tekst
`Font::times_italic` | Beskrivende tekst
`Font::times_bold_italic` | Beskrivende tekst