Lernpfad:Einführung in Processing/9

Vorheriger Schritt

Nächster Schritt

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 hat. 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 klar zum machen 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.

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

Bei Animationen spielt vor allem 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

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 Zeichenflache, dass 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.

   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.
4. Programmiere einen Ball, der 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.

Zusatzaufgabe

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.