Powered by Hyperbook
fiebig.schule
Powered by Hyperbook

Phase 4 | 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:

  1. Translation (Verschiebung)
  2. Rotation (Drehung)
  3. Skalierung (Vergrößerung/Verkleinerung)

Dazu werdet ihr 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(255); 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 1: 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 2: 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).

🌱 Gruppe 3: 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.

:::

Ü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übung 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

  4. 👤 Erweitere das Rotorblattprogramm um die fehlenden Rotorblätter: https://editor.p5js.org/f.fiebig/sketches/Df1DSV3Mt

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; }

:::

Phase 4 | Animationen durch Koordinatentransformationen
CC BY-NC 4.0 by fiebig.schule