Phase 3 | Animationen durch Koordinatentransformationen

🪧 Worum geht es in dieser Phase?

Jetzt gehen wir den trickreicheren Weg bei Animationen: Und zwar transformieren wir das Koordinatensystem! Es gibt drei Transformationen, mit denen wir uns beschäftigen:

A. Skalierung (Vergrößerung/Verkleinerung)

B. Translation (Verschiebung)

C. Rotation (Drehung)

🤸 Aufwärmspiel: Amöbe

🤸 Amöbe

Evolution von der Amöbe über den Frosch und Affen hin zu Zeus!

Arbeit in Gruppen

Ihr werdet in drei Gruppen arbeiten und euch anschließend eure Ergebnisse vorstellen. Hier findet ihr ein Beispielprogramm, um euch das Koordinatensystem anzeigen zu lassen.

Zum Zeichnen des Koordiantensystems verwende den Befehl drawGrid(0).

👾 Link zum Programm

🌱 Gruppe A: Skalierung (Vergrößerung/Verkleinerung)

🌱 Aufgaben

👥👥 Verwende den Befehl `scale(2)'' mit verschiedenen Parametern.
👥👥 Schaffst du es, ein Objekt stetig größer (oder kleiner oder beides) werden zu lassen?
👥👥 Teste und vergleiche die Befehle scale(2, 1) mit scale(1, 2).

„Da die Skalierung vom Ursprung ausgeht, verschiebt sich das Objekt auch, wenn es nicht direkt auf dem Ursprung liegt.“ (Kipp)

Sobald draw() beendet ist, wird das Koordinatensystem wieder an seinen „normalen“ Platz gestellt mit (0,0) in der linken, oberen Ecke. D.h. das Bild sitzt also wieder bündig in seinem Rahmen, wenn draw() neu startet.

🌱 Gruppe B: Translation (Verschiebung)

🌱 Aufgaben

👥👥 Verwende den Befehl translate(50, 50) mit verschiedenen Parametern, in einem Beispielprogramm deiner Wahl.
👥👥 Verwende den Befehl translate(mouseX, mouseY), um ein Quadrat an die aktuelle Position des Mauszeigers zu zeichnen.

🌱 Gruppe C: Rotation (Drehung)

🌱 Aufgaben

👥👥 Verwende den Befehl rotate(radians(45)) mit verschiedenen Parametern.
👥👥 Schaffst du es, ein Objekt im Kreis drehen zu lassen. Tipp: Verwendet eine Variable, um den aktuellen Drehwinkel zu speichern.
👥👥 In der Besprechung werden wir über Grad- und Bogenmaß sprechen. Vielleicht findest du schon heraus, was es damit auf sich hat. Vergleiche etwa die Befehle rotate(radians(90)) und rotate(PI/2).

Übungsaufgaben

🌱 Aufgabe 1

👤 Fingerübung 1: https://michaelkipp.de/processing/transformationen.html#sec_10_1_1
👤 Fingerübungen 2: https://michaelkipp.de/processing/transformationen.html#sec_10_2_7
👤 Fingerübung 3: Knifflige Übungsaufgaben: https://michaelkipp.de/processing/transformationen.html#sec_10_2_8

🌱 Aufgabe 2 – Zwischenfinale

In dieser Aufgabe geht es um das unten abgebildete 👾 Rotorblatt-Programm. Bei einem Klick auf den Bildschirm pausiert die Animation.

👤 Erweitere das Rotorblattprogramm so, dass am leeren Ende des kleinsten Rotorblattes ein Kreis entsteht.
👤 Zeichne dann das fehlende Rotorblatt ein.
👤 Erweitere das Rotorblattprogramm um die fehlenden Rotorblätter. Zeichne zunächst den Kreis auf die andere Seite des größten Rotorblattes.
👤 Ergänze nach und nach die fehlenden Rotorblätter
👤 Sorge dafür, dass sich die kleinen Rotorblätter in unterschiedliche Richtungen drehen.

💁 Hilfe: Zeichne nacheinander kleine Kreise mit den Koordianten $(0 | 0)$ an die Rotorblattenden, um zu überprüfen, ob du das Koordinatensystem richtig verschoben hast. Die einzelnen Schritte, siehst du unten als Kurzvideo dargestellt, bei dem ein Kreis mit dem Befehl circle(0, 0, 10) gezeichnet wird.

💁 Hilfe: Verschiebbares Koordinatensystem

👀 zu Teil 1👀 zu Teil 2👀 zu Teil 3👀 zu Teil 4👀 zu Teil 5

Selbermachen!