Quelltext der Seite Lernpfad:Einführung in Processing/9

{{NNameAnzeigen}}{{NNavigation}}

{{Tldr:Start|Was du in diesem Schritt lernst|Icon=Icon Chalk board.png}}
* Variablen benutzen, um Animationen zu erzeugen.
* ''Ausführungsreihenfolge'' von Befehlen.
{{Tldr:End}}

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

Eine Animation kannst du dir wie ein Daumenkino vorstellen.

<center>
[[File:Flip Book - Messi Example.webm]]
</center>

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.

{{Aufgabe:Start|Icon=Processing_2021_logo.svg}}
Probiere folgendes Beispiel aus:
<syntaxhighlight lang="java" line="1">
int x = 0;

void draw() {
  ellipse(x, 50, 20, 20);
  x = x + 1;
}
</syntaxhighlight>

Kannst du erklären, was passiert?

Eigentlich soll die Animation so aussehen:
{{P5js|https://editor.p5js.org/Ngb/full/zKqaYk1A7|height=100}}
(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.
{{Aufgabe:End}}
{{Hinweis|
Wichtig für Animationen ist die ''Ausführungsreihenfolge''. Denk daran, dass es einen Unterschied macht, ob eine Variable ganz zu Beginn (global), in <code>setup()</code> oder in <code>draw()</code> ''deklariert'' bzw. benutzt wird.

Um dir dies noch einmal klarzumachen kannst du im Programm oben die Deklaration und Initialisierung <code>int x {{=}} 0;</code> einmal in <code>setup()</code> und einmal in <code>draw()</code> verschieben.}}
{{Info:Start}}
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:
: <syntaxhighlight lang="java">
int d = 20;
circle(12, 91, d);
circle(34, 65, d);
circle(80, 13, d);
</syntaxhighlight>
; Variablen als Speicher für Werte, die sich während der Programmausführung verändern. Die also "''variabel''" sind. 
: Etwa das <code>x</code> im Programm oben, das bei jedem Frame (Aufruf von <code>draw()</code>) um <code>1</code> erhöht wird.
{{Info:End}}

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

{{Aufgabe:Start|Icon=Processing_2021_logo.svg}}
# Erweitere das Programm oben so, dass die Geschwindigkeit des Kreises (bisher <code>1</code>) durch eine Variable festgelegt wird und stelle diese auf <code>3</code> ein.
# 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.
# Variiere die Geschwindigkeit und Größe der Formen.
{{Aufgabe:End}}
{{Lösung:Start|Aufgabe 1}}
<syntaxhighlight lang="java" line="1">
int x = 0;
int speed = 3;

void draw() {
  background(200);
  ellipse(x, 50, 20, 20);
  x = x + speed;
}
</syntaxhighlight>
{{Lösung:End}}
{{Lösung:Start|Aufgabe 2}}
Die folgende Beispiellösung setzt die Formen in einer Linie übereinander (daher die Verschiebung der x-Koordinaten um <code>(size/2)</code>. Dies ist aber nicht unbedingt nötig und dient nur der Ästhetik. 
<syntaxhighlight lang="java" line="1">
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;
}
</syntaxhighlight>
{{Lösung:End}}

== Übungsaufgaben ==
{{Aufgabe:Start|Icon=Processing_2021_logo.svg}}
# Animiere ein Quadrat in der Mitte der Zeichenfläche, das beginnend von der Kantenlänge 1 immer weiter wächst.
# Animiere eine Form, die ihre Position zufällig auf der Zeichenfläche verändert.
#: Du kannst mit {{Processing Ref|random()}} eine zufällige ''Dezimalzahl''  (Datentyp <code>float</code>) erzeugen. Beachte, dass du dann auch die Variablen mit dem Typ <code>float</code> deklarieren musst.
#: '''Tipp''': Geht dir die Animation zu schnell, kannst du mit {{Processing Ref|frameRate()}} die Geschwindigkeit ändern, in der <code>draw()</code> aufgerufen wird.
# Ändere das Programm aus 2. so ab, dass sich auch die Farbe der Form zufällig ändert.
#: '''Tipp''': Denk an Aufgabe 4 aus dem {{Pfad|8|letzten Schritt|Anker=#Übungsaufgaben}}.
#: '''Bonus''': Ändere auch noch die Größe der Form zufällig.
# Programmiere einen Ball, der vom Punkt <code>(50, 0)</code> (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 <code>x</code>, sondern auch die <code>y</code> 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.
{{Aufgabe:End}}
{{Hinweis|
Achte darauf, dass du den Variablen sinnvolle Bezeichner gibst. Der Name <code>x</code> deutet an, dass es sich um die x-Koordinate handelt. <code>size</code> 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!
}}
{{Lösung:Start|Aufgabe 1}}
<syntaxhighlight lang="java" line="1">
int size = 1;

void draw() {
  background(200);
  rectMode(CENTER);
  fill(123, 64, 12);
  noStroke();
  rect(50, 50, size, size);
  size = size + 1;
}
</syntaxhighlight>
{{Lösung:End}}
{{Lösung:Start|Aufgabe 2}}
<syntaxhighlight lang="java" line="1">
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);
}
</syntaxhighlight>
{{Lösung:End}}
{{Lösung:Start|Aufgabe 3}}
<syntaxhighlight lang="java" line="1">
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);
}
</syntaxhighlight>
{{Lösung:End}}
{{Lösung:Start|Aufgabe 4}}
<syntaxhighlight lang="java" line="1">
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;
}
</syntaxhighlight>
{{Lösung:End}}

{{Zusatzaufgabe:Start|Icon=Processing_2021_logo.svg}}
Animiere einen Ball, der im Kreis fliegt.

{{P5js|https://editor.p5js.org/Ngb/full/CZ31NSZHE|height=100}}

Du brauchst hier die Befehle {{Processing Ref|sin()}} und {{Processing Ref|cos()}}. Zeichnen dir die Situation am besten zunächst auf. Bei der Planung der Rechnungen hilft dir [https://mathepedia.de/Kreis.html die Mathepedia].

Du benötigst dann noch eine Variable für den Winkel; entweder im [https://mathepedia.de/Winkelmasze.html Bogenmaß oder als Grad] mit der Funktion {{Processing Ref|radians()}}.
{{Zusatzaufgabe:End}}

{{Zusatzaufgabe:Start|Sprinteraufgabe|Icon=Processing_2021_logo.svg}}
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 <code>%</code> (Prozentzeichen) ermittelt werden:
<syntaxhighlight lang="java">
int rest = 75 % 9; // ergibt 3
rest = 23 % 5; // ergibt 2
rest = 21 % 2; // ergibt 1
</syntaxhighlight>

Die Module-Operation können wir nun geschickt für Animationen ausnutzen. Probiere dazu dieses Programm aus und erkläre seine Funktionsweise:
<syntaxhighlight lang="java" line="1">
int x = 0;

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

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

# 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.
{{Zusatzaufgabe:End}}