Powered by Hyperbook
fiebig.schule
Powered by Hyperbook

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

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

function setup() { createCanvas(400, 400) } function draw() { background(200) drawGrid(0) } // Zeichnet das Koordinatensystem als Grid function drawGrid(greyscale) { stroke(greyscale) for (var x = 0; x < width; x += 10) { line(x, 0, x, height) } for (var y = 0; y < height; y += 10) { line(0, y, width, y) } }

👾 Link zum Programm

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

  1. 👥👥 Verwende den Befehl `scale(2)'' mit verschiedenen Parametern.
  2. 👥👥 Schaffst du es, ein Objekt stetig größer (oder kleiner oder beides) werden zu lassen?
  3. 👥👥 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)

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

🌱 Gruppe C: Rotation (Drehung)

  1. 👥👥 Verwende den Befehl rotate(radians(45)) mit verschiedenen Parametern.
  2. 👥👥 Schaffst du es, ein Objekt im Kreis drehen zu lassen. Tipp: Verwendet eine Variable, um den aktuellen Drehwinkel zu speichern.
  3. 👥👥 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

Für die folgenden Übungsaufgaben könnt ihr dieses GeoGebra-Applet zur Hilfe nehmen:

  1. 👤 Fingerübung 1: https://michaelkipp.de/processing/transformationen.html#sec_10_1_1

  2. 👤 Fingerübungen 2: https://michaelkipp.de/processing/transformationen.html#sec_10_2_7

  3. 👤 Fingerübung 3: Knifflige Übungsaufgaben: https://michaelkipp.de/processing/transformationen.html#sec_10_2_8

In dieser Aufgabe geht es um das unten abgebildete Rotorblatt-Programm: https://editor.p5js.org/f.fiebig/sketches/Df1DSV3Mt

  1. 👤 Erweitere das Rotorblattprogramm so, dass am leeren Ende des großen Rotorblattes ein Kreis entsteht.
  2. 👤 Erweitere das Rotorblattprogramm um die fehlenden Rotorblätter.

💁 Hilfe: Zeichne nacheinander kleine Kreise mit den Koordianten ( 0 ∣ 0 ) (0 | 0) an die Rotorblattenden, um zu überprüfen, ob du das Koordinatensystem richtig verschoben hast.

var a = 0; // Drehwinkel für das große Rotorblatt var a2 = 0; // Drehwinkel für das mittlere Rotorblatt var a3 = 0; // Drehwinkel für das kleine Rotorblatt function setup() { createCanvas(windowWidth, windowHeight); background(100); strokeWeight(8); stroke(255); } function draw() { background(0); translate(width/2, height/2); rotate(a); line(-100, 0, 100, 0); translate(100, 0); rotate(a2); line(-30, 0, 30, 0); translate(30, 0); rotate(a3); line(-10,0,10,0); rotate(-a3); translate(-60); rotate(a3); line(-10, 0, 10, 0); a = a + 0.03; a2 = a2 + 0.04; a3 = a3 + 0.05; }

Extras: Der Matrix-Stapel

  • Matrix speichern/wiederherstellen mit pushMatrix() und popMatrix(); mit Übungsaufgaben dazu, siehe hier.
Phase 3 | Animationen durch Koordinatentransformationen
CC BY-NC 4.0 by fiebig.schule | Impressum