9: Animationen

Vorheriger Schritt

Nächster Schritt

Was du in diesem Schritt lernst

• Variablen benutzen, um Animationen zu erzeugen.
• Ausführungsreihenfolge von Befehlen.

Mit der Hilfe von Variablen lassen sich nun schon einfache Animationen programmieren.

Eine Animation kannst du dir wie ein Daumenkino vorstellen.

In jedem Bild (Frame) wird ein Bild erzeugt, dass kleine Änderungen zum vorherigen aufweist. Werden die Bilder schnell hintereinander gezeigt, entsteht der Eindruck einer Bewegung.

Arbeitsauftrag

Probiere folgendes Beispiel aus:

int x = 0;

void draw() {
  ellipse(x, 50, 20, 20);
  x = x + 1;
}

Kannst du erklären, was passiert?

Eigentlich soll die Animation so aussehen:

Klicken, um das Programm zu starten.

(Falls nichts zu sehen ist, auf die graue Fläche klicken und dann die Leertaste drücken, damit die Animation von vorne beginnt.)

Passe das Programm entsprechend an.

Wichtig für Animationen ist die Ausführungsreihenfolge. Denk daran, dass es einen Unterschied macht, ob eine Variable ganz zu Beginn (global), in setup() oder in draw() deklariert bzw. benutzt wird.

Um dir dies noch einmal klarzumachen kannst du im Programm oben die Deklaration und Initialisierung int x = 0; einmal in setup() und einmal in draw() verschieben.

Es gibt zwei typische Anwendungen für Variablen:

Variablen als zentrale Stelle, wo häufig verwendete Werte abgelegt werden können.

Zum Beispiel, wenn mehrere Kreise mit dem gleichen Durchmesser gezeichnet werden sollen, könnte der Durchmesser als Variable gespeichert werden und immer wieder verwendet:

int d = 20;
circle(12, 91, d);
circle(34, 65, d);
circle(80, 13, d);

Variablen als Speicher für Werte, die sich während der Programmausführung verändern. Die also "variabel" sind.

Etwa das x im Programm oben, das bei jedem Frame (Aufruf von draw()) um 1 erhöht wird.

Bei Animationen spielt primär die zweite Anwendungsart eine Rolle. Aber die Erste kann einem viel Arbeit sparen, wenn man sie richtig einsetzt.

Arbeitsauftrag

1. Erweitere das Programm oben so, dass die Geschwindigkeit des Kreises (bisher 1) durch eine Variable festgelegt wird und stelle diese auf 3 ein.
2. Erweitere das Programm oben um zwei weitere Formen, die die gleiche Größe haben wir der Kreis und sich mit der gleichen Geschwindigkeit bewegen. Verwende dazu eine neue Variable, die die Größe der Formen festlegt.
3. Variiere die Geschwindigkeit und Größe der Formen.

Aufgabe 1

int x = 0;
int speed = 3;

void draw() {
  background(200);
  ellipse(x, 50, 20, 20);
  x = x + speed;
}

Aufgabe 2

Die folgende Beispiellösung setzt die Formen in einer Linie übereinander (daher die Verschiebung der x-Koordinaten um (size/2). Dies ist aber nicht unbedingt nötig und dient nur der Ästhetik.

int x = 0;
int speed = 3;
int size = 20;

void draw() {
  background(200);
  ellipse(x, 50, size, size);
  rect(x-(size/2), 10, size, size);
  triangle(x, 70, x-(size/2), 70+size, x+(size/2), 70+size);
  x = x + speed;
}

Übungsaufgaben

Arbeitsauftrag

1. Animiere ein Quadrat in der Mitte der Zeichenfläche, das beginnend von der Kantenlänge 1 immer weiter wächst.
2. Animiere eine Form, die ihre Position zufällig auf der Zeichenfläche verändert.

   Du kannst mit random() eine zufällige Dezimalzahl (Datentyp float) erzeugen. Beachte, dass du dann auch die Variablen mit dem Typ float deklarieren musst.

   Tipp: Geht dir die Animation zu schnell, kannst du mit frameRate() die Geschwindigkeit ändern, in der draw() aufgerufen wird.

3. Ändere das Programm aus 2. so ab, dass sich auch die Farbe der Form zufällig ändert.

   Tipp: Denk an Aufgabe 4 aus dem letzten Schritt.

   Bonus: Ändere auch noch die Größe der Form zufällig.

4. Programmiere einen Ball, der vom Punkt (50, 0) (bzw. von der Mitte des oberen Randes, falls das Fenster größer ist als 100x100) in einer zufälligen Richtung über den Bildschirm fliegt.

   Hinweis: Du musst nun nicht nur die x, sondern auch die y Koordinate ändern. Außerdem musst du die Änderung auch als Variable speichern. Denk dabei an die Ausführungsreihenfolge und an welcher Stelle du die Variablen für die Richtung initialisieren musst.

Achte darauf, dass du den Variablen sinnvolle Bezeichnet gibst. Der Name x deutet an, dass es sich um die x-Koordinate handelt. size wäre sinnvoll für die Größe einer Form, usw.

Ob du die Namen auf Deutsch oder Englisch wählst, ist dir überlassen. In der Regel programmieren wir auf Englisch. Achte aber darauf, dass du keine Umlaute in den Namen verwendest!

Aufgabe 1

int size = 1;

void draw() {
  background(200);
  rectMode(CENTER);
  fill(123, 64, 12);
  noStroke();
  rect(50, 50, size, size);
  size = size + 1;
}

Aufgabe 2

float x = 50;
float y = 50;

void setup() {
  frameRate(2);  
}

void draw() {
  x = random(100);
  y = random(100);
  
  background(200);
  rectMode(CENTER);
  fill(64, 12, 212);
  noStroke();
  rect(x, y, 10, 10);
}

Aufgabe 3

float x = 50;
float y = 50;
int r = 0;
int g = 0;
int b = 0;

void setup() {
  frameRate(2);  
}

void draw() {
  x = random(100);
  y = random(100);
  r = int(random(256));
  g = int(random(256));
  b = int(random(256));
  
  background(200);
  rectMode(CENTER);
  fill(r, g, b);
  noStroke();
  rect(x, y, 10, 10);
}

Aufgabe 4

float x = 50;
float y = 0;
float xd = 1;
float yd = 1;

void setup() {
  size(400, 400);
  
  xd = random(1, 20);
  yd = random(1, 20);
}

void draw() {
  background(200);
  circle(x, y, 20);
  
  x = x + xd;
  y = y + yd;
}

Zusatzaufgabe

Animiere einen Ball, der im Kreis fliegt.

Klicken, um das Programm zu starten.

Du brauchst hier die Befehle sin() und cos(). Zeichnen dir die Situation am besten zunächst auf. Bei der Planung der Rechnungen hilft dir die Mathepedia.

Du benötigst dann noch eine Variable für den Winkel; entweder im Bogenmaß oder als Grad mit der Funktion radians().

Sprinteraufgabe

Eine wichtige Rechenoperation, die man beim Programmieren häufig verwendet, ist die Modulo-Operation. Modulo bezeichnet das Teilen mit Rest und berechnet den Rest, der übrig bleibt, wenn man zwei Zahlen dividiert.

Zum Beispiel:

• 75 : 9 = 8 Rest 3
• 23 : 5 = 4 Rest 2
• 21 : 2 = 10 Rest 1

In Java kann der Rest mit Hilfe des Modulo-Operators % (Prozentzeichen) ermittelt werden:

int rest = 75 % 9; // ergibt 3
rest = 23 % 5; // ergibt 2
rest = 21 % 2; // ergibt 1

Die Module-Operation können wir nun geschickt für Animationen ausnutzen. Probiere dazu dieses Programm aus und erkläre seine Funktionsweise:

int x = 0;

void setup() {
  size(100, 100);
}

void draw() {
  background(200);
  ellipse(x, 50, 20, 20);
  x = (x + 1) % 100;
}

1. Erweitere das Programm oben so, dass der Hintergrund schwarz wird und der Ball grün. Jedes Mal, man die Maustaste drückt, soll der Ball schneller fliegen.

   Bonus: Wenn du die Sprinteraufgabe im letzten Schritt bearbeitet hast, dann implementiere folgenden Zusatz: Mit einem Tastendruck auf dem Keyboard soll die Geschwindigkeit wieder auf den ursprünglichen Wert zurückgesetzt werden.