# Animasjon

Nå skal vi se hvorfor `AnimationWindow` har fått sitt navn, ved å tegne enkle animasjoner.

En animasjon er en rekke bilder som er vist kort etter hverandre, hvor ved å bevege ting vist på bildene litt om gangen gjør at de ser ut som de beveger seg:

Vi har fram til nå bare tegnet enkelte bilder som ikke beveger eller endrer seg, og fordi animasjonen krever at vi tegner flere bilder trenger vi å bruke et par andre funksjoner i stede for `wait_for_close()` funksjonen som vi har brukt så langt:

    #include "AnimationWindow.h"

    int main() {
        TDT4102::AnimationWindow window;

        while(!window.should_close()) {
            window.draw_circle({100, 100}, 50, TDT4012::Color::dark_green);
            window.next_frame();
        }

        return 0;
    }

Det er to nye funksjoner som brukes i dette eksempelet:

- `bool AnimationWindow::should_close()`: Returnerer `false` fram til brukeren lukker vinduet, og deretter `true`. `while`-løkken sørger for at programmet fortsetter fram til den er avsluttet.
- `void AnimationWindow::next_frame()`: Funksjonen gjør flere operasjoner:
  1. Bildet du har tegnet blir vist på skjermen
  2. Bildet blir tømt slik at du kan tegne neste bildet i animasjonen
  3. Venter litt slik at vinduet ikke tegner flere enn 60 bilder per sekund

Siden det nå er mulig å tegne flere bilder på rad kan vi prøve å lage en enkel animasjon, for eksempel en firkant som beveger mot høyre siden av skjermen. Vi gjør dette ved å øke x-koordinatet hver gang vi tegner et nytt bilde:

    #include "AnimationWindow.h"

    int main() {
        TDT4102::AnimationWindow window;

        int xPosition = 0;
        while(!window.should_close()) {
            xPosition = xPosition + 2;
            TDT4102::Point position {xPosition, 100};
            window.draw_rectangle(position, 100, 100);

            window.next_frame();
        }

        return 0;
    }

Merk at hele bildet må tegnes på nytt etter hver gang `next_frame()` funksjonen blir kalt. Det er ikke mulig å beholde en del av bildet og tegne bare det som endrer seg.

Når du kjører eksempelet over forsvinner firkanten etterhvert. Vi kan løse dette ved å legge til en if setning:

    #include "AnimationWindow.h"

    int main() {
        TDT4102::AnimationWindow window;

        int xPosition = 0;
        while(!window.should_close()) {
            xPosition = xPosition + 2;
            if(xPosition > 200) {
                xPosition = 0;
            }
            TDT4102::Point position {xPosition, 100};
            window.draw_rectangle(position, 100, 100);

            window.next_frame();
        }

        return 0;
    }

Og for moro skyld kan vi sørge for at den bare flytter seg når mellomrom på tastaturen holdes ned (du finner mer informasjon om dette på input siden):

    #include "AnimationWindow.h"

    int main() {
        TDT4102::AnimationWindow window;

        int xPosition = 0;
        while(!window.should_close()) {
            if(window.is_key_down(KeyboardKey::SPACE)) {
                xPosition = xPosition + 2;
            }
            if(xPosition > 200) {
                xPosition = 0;
            }
            TDT4102::Point position {xPosition, 100};
            window.draw_rectangle(position, 100, 100);

            window.next_frame();
        }

        return 0;
    }