Translate, Rotate und Scale

Wenn Sie Ihr Emoji oder Selfie anspruchsvoller gestalten wollen, indem Sie zum Beispiel bestimmte Formen rotiert zeichnen, helfen Ihnen Matrizen weiter. Matrizen? - Das klingt verdächtig nach Mathematik. Intern kommt hier sehr viel Mathematik zum tragen, aber p5js bietet Ihnen eine Handvoll einfache Befehle an und regelt alles Weitere im Hintergrund.

Verschieben

Der Befehl translate(...) sorgt dafür, dass alle nachfolgenden Befehle verschoben ausgeführt werden:

circle(0, 0, 40); // center is in the top left corner

translate(200, 100);
circle(0, 0, 60); // this circle will be drawn somewhere else.

circle(0, 50, 10) // you can still use x and y coordinates on top of a transform!

Drehen

Wenn Sie den Befehl rotate(...) aufrufen, wird alles was nach dem Befehl kommt gedreht gezeichnet. Nun könnte man später das Ganze natürlich von Hand zurück drehen, aber dafür gibt es in P5.js etwas einfacheres:

Die Matrix

Damit Sie nur einen bestimmten Teil manipulieren, müssen Sie zuerst eine neue lokale Matrix erzeugen. In p5js gibt es dafür den Befehl push(). Im Anschluss an die Zeichenbefehle können Sie mit dem Befehl pop() die lokale Matrix wieder entfernen. So wirken sich die Transformationen nur zwischen push und pop aus.¹

In p5js ist der Nullpunkt des Canvas, also der Punkt an dem sich alles orientiert beim zeichnen, links oben. Das ist normalerweis auch der Mittelpunkt, um den wir drehen. Wenn Sie nun ein Objekt nicht um diesen Punkt rotieren wollen, sondern um einen anderen Punkt, müssen sie diesen Nullpunkt mit translate erst verschieben. Wenn wir das nachfolgende Rechteck zum Beispiel um seinen Mittelpunkt rotieren wollen, würde das so aussehen:

push();
translate(150, 150);
rotate(0.2);
rect(-50, -50, 100, 100);
pop();

Wie Eingangs erwähnt, wirken sich diese Befehle immer auf alle nachfolgenden Befehle aus, so dass wir (wie beim Kreis-Beispiel weiter oben) auch hier die x- und y-Koordinaten vom Rechteck an dieses translate anpassen müssen.

Sprich: Wenn Sie vorher ein Rechteck an der Position let x = 100; und let y = 100; gezeichnet haben und nun aber der Nullpunkt z.B. auf translate(150, 150); verschoben wurde, muss das Rechteck jetzt statt dessen auf -50 und -50 gezeichnet werden, damit es Rechteck nachher noch an der selben Stelle ist. - Negazive Zahlen sind hier gar kein Problem.

Im Video erklären wir das Thema auch an Live-Beispielen:

Abgabe

Stellen sie sicher, dass Sie den “vorher”-Zustand in Git committed hatten.

Probieren Sie push(), pop(), translate(...), rotate(...) und scale(...) selbst an Ihrem Emoji aus. Möglicherweise brauchen Sie damit einiges der vorherigen Rechnerei aus der Variablen-Übung nicht mehr. Der Code sollte dadurch wieder etwas übersichtlicher werden.

Bitte committen Sie ihr Ergebnis und pushen Sie es auf Gitlab.

Abgabe via Gitlab bis Mittwoch 09.11.2022, 18:00 Uhr

Weiterführendes (optional)

Computerphile erklärt die mathematischen Interna der Matrizen (englisch, 15 minuten)