Phase 2 | Animationen durch Objektbewegungen🔖

Sucht euch alle jeweils zwei Personen aus, aber sagt nicht, wen ihr gewählt habt. Stellt euch anschließend gehend so auf, dass ihr und die beiden von euch gewählten Personen ein gleichseitiges Dreieck bilden.

Im folgenden Codebeispiel siehst du, wie man mit Hilfe von Variablen einen Kreis von links nach rechts über den Bildschirm wandern lassen kann. Zum Beispielprogramm: 👾 Punktbewegung horizontal

1. 👤 Analysiere das Programm und ändere es so ab, dass sich ein Kreis (oder eine andere Figur) von oben nach unten über den Bildschirm bewegt.
2. 👤 Schreibe ein Programm, bei dem sich die Größe einer Figur verändert.
3. 👤 Schreibe ein Programm, bei dem sich der Kreis diagonal, von rechts nach links oder von unten nach oben über den Bildschirm bewegt.

🏃‍♀️‍➡️ Ergänze weitere bunte Objekte, die sich mit unterschiedlichen Richtungen und Geschwindigkeiten über den Bildschirm bewegen.

💬 Diskussionsfrage: Was passiert, wenn der Background-Befehle auskommentiert wird?

Im Programm aus Aufgabe 1 findet sich die Zeile position = position + 1. Eine solche Gleichung könnte man sich für eine Variable x auch in der Mathematik vorstellen: $x = x + 1$.

Nur: In dem Programmcode ist die Zeile korrekt, in der Mathematik würde die Zeile einen Widerspruch produzieren.

1. 👤 Erkläre, wieso.
2. 👤 Löse die folgende LearningApp zum Unterschied von Variablen in der Mathematik und Informatik.

Neben selbst definierten Variablen kann man auch auf eine Reihe von Systemvariablen zugreifen. Diese werden auf p5.js pink angezeigt.

Systemvariable(n)	Typ	Beschreibung
mouseX, mouseY	int	aktuelle Position des Mauszeigers
pmouseX, pmouseY	int	Position des Mauszeigers im vorherigen Frame
width, height	int	Pixelgröße des Grafikfensters: Breite bzw. Höhe
frameRate	float	Anzahl der Frames pro Sekunde, also wie oft draw() aufgerufen wird
frameCount	int	Anzahl der bisherigen Aufrufe von draw() seit Programmstart
keyPressed	boolean	Wahrheitswert, ob eine Taste gedrückt ist
key	char	zuletzt gedrückte Taste
keyCode	int	zuletzt gedrückte Taste als Zahlencode (z. B. für Cursertasten)
mousePressed	boolean	Wahrheitswert, ob ein Mausbutton gedrückt ist
mouseButton	int	die aktuell gedrückte Maustaste
displayHeight, displayWidth	int	Maße des gesamten Bildschirms in Pixeln

Mit den Systemvariablen lassen sich interaktive Animationen erstellen.

1. 👤 Erstelle ein Programm, bei dem fortlaufend an der Mausposition ein Kreis gezeichnet wird.
2. 👤 Erstelle ein Programm, bei dem ein Kreis zusätzlich an einer fiktiven vertikalen Achse in der Bildmitte gespiegelt wird:

3. 👤 Erstelle ein Programm, bei dem die beiden Kreise aus Schritt 2 zusätlich an einer horizontalen Achse in der Bildmitte gespiegelt werden:

🏃‍♀️‍➡️ Erstelle weitere Animationen deiner Wahl, bei denen du Systemvariablen verwendest.

🏃‍♀️‍➡️ Verwende die Funktionen function keyPressed() und function mousePressed(), um dein Programm interaktiv zu gestalten.