• Parametric Design
• 2D
• Transformations

Transformations

Verschieben

Wenn man sehr komplexe Layouts erstellt, kann es irgendwann durchaus kompliziert werden, die ganze Offsets und Winkel zu berechnen. Um dieses Problem ein wenig zu umgehen, gibt es in p5js so genannte Transformationen. Mit diesen Transformationen manipuliert man das gesamte Koordinatensystem. Dieses Konzept ist am Anfang ein wenig verwirrend, gibt uns aber großartige Möglichkeiten schnell und einfach Designs zu erstellen. Fangen wir mit der translate(x, y) Funktion an. Mit dem translate() Kommando, können wir den Nullpunkt/Ursprung (0,0) unseres Koordinatensystems verschieben.

point(0, 0); // position 0, 0
translate(100, 100);
point(0, 0); // position 100, 100

Mehrere Transformationen

Transformationen werden von oben nach unten abgearbeitet und werden aufeinander addiert. Die Transformation geht also nicht vom ursprünglichen Zustand aus, sondern von der letzten Transformation:

point(0, 0); // position 0, 0
translate(100, 100);
point(0, 0); // position 100, 100
translate(100, 100);
point(0, 0); // position 200, 200

Um einen besseren Überblick zu behalten, können wir den aktuellen Zustand der Transformationen speichern push() um dann später zu diesem Zustand wieder zurückzukehren pop():

point(0, 0); // position 0, 0
push();
translate(100, 100);
point(0, 0); // position 100, 100
translate(100, 100);
point(0, 0); // position 200, 200
pop();
point(0, 0); // position 0, 0

push/pop stellen nicht nur Transformationen wieder auf den letzten Zustand zurück, sondern auch die Zeichenstile (wie z.B. Farben). push/pop können auch mehrfach hintereinander/verschachtelt werden.

Neben dem Verschieben des Ursprungs durch translate(), können wir unsere Zeichenfläche auch skalieren: scale(zoomFactor) oder das Ganze drehen: rotate(rad).

Gerade bei scale und rotate darauf achten, dass alles immer um den Mittelpunkt (0/0) herumdreht.

Beispiel: Polar-Koordinaten

Dies ist z.B. nützlich, wenn man mit dem Polar-Koordinatensystem arbeitet und man dort nicht dauernd alle Positionen einzeln berechnen will:

/lectures/2d/transformations/polartranslate/sketch.jsView on GitHub

Drehen

rotate(Math.PI / 180 * 45); // take angleMode into acount

Skalieren

scale(2); // 200%

Inspiration: Muster

/lectures/2d/transformations/fractals/sketch.jsView on GitHub

Zurück zum Anfang