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.

Ü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.