Wenn wir anfangen komplexere Arrangements aufzusetzen, kann es irgendwann sehr kompliziert
werden, die ganzen Positionen im Auge zu behalten. Stellen wir uns zum beispiel hier vor,
wir haben hier so ein kleines Muster und wollen dieses Muster jetzt mehrere Male
wiederholen. Dann müssen wir sozusagen für alle einzelnen Elemente immer wieder ausrechnen, ok,
jetzt müssen wir hier 20 dazu addieren und 20 nach rechts zu schieben und müssen so für alle
einzelnen Elemente das neuberechnen. Hier gibt es einen schönen Satz an Funktionen die uns helfen
solche Prozesse zu vereinfachen, indem wir nämlich einfach den Nullpunkt unseres Koordinatensystems
verschieben. Also wenn wir uns vorstellen wir haben jetzt hier dieses kleine Muster
aus vier Objekten und wollen dies jetzt mehrere Male hintereinander zeichnen, aber wollen nicht
für jedes Objekt genau ausrechnen wie viele Pixel dies jetzt genau verschoben werden muss,
dann machen wir erstmal eine Schleife außen rum und zeichnen das jetzt einfach mal 10 mal.
Jetzt sollen sozusagen unsere kreise und rechtecke gezeichnet werden und um sozusagen
jetzt unseren Nullpunkt zu verschieben, gibt es die sogenannte "translate" Funktion. Hier
kann man jetzt bis zu drei Koordinaten eingeben. Wir können sozusagen auf der x, y und z-Achse,
also auf der Tiefe, den Ursprung unseres Koordinatensystems verschieben. In unserem
Fall wollen wir das ganze jetzt um 40 pixel nach rechts verschieben und auf der y-Achse
lassen wir das ganze so. Wenn ich das jetzt abspeicher. Sehen wir sozusagen,
dass mit jedem Intervall der Ursprung unseres Koordinatensystems um 40 nach links verschoben
wird. Ganz wichtig ist, wenn ihr sozusagen mehrfach translate hintereinander benutzt,
verschiebt ihr nicht sozusagen vom Ursprung das Ganze, sondern vom letzten Zustand. Ganz
wichtig wenn wir sozusagen zurück auf den Ursprung gehen wollen, also das ganze zurücksetzen wollen,
gibt es auch eine Funktion. Dafür müssen wir sozusagen den aktuellen Zustand unseres
Koordinatensystems speichern. Dafür gibt es die sogenannte "push"-Funktion damit wird sozusagen
der aktuelle Zustand gespeichert und wenn ich dann am Ende, wenn ich fertig bin, das ganze wieder auf
den Ursprung zurücksetzen will, gibt es die "pop" Funktion. Damit geht man sozusagen zu dem zurück,
was man zuletzt unter "push" gespeichert hat. Ihr könnt auch mehrfach push und mehrfach pop machen,
um sozusagen verschiedene Zustände nacheinander zu speichern. Wenn ich das jetzt ausführen würde,
haben wir nur noch ein Objekt, beziehungsweise bleiben immer noch zehn, aber die liegen halt
direkt aufeinander, weil: wir gehen nach jedem translate wieder auf Null zurück.
Was wir jetzt machen müssten, ist zum Beispiel hier das Ganze mit unserem X zu multiplizieren,
also das sozusagen beim ersten Mal wird das Ganze um 0 verschoben dann um 40,
80 und so weiter. Und bekommen dann jetzt hier sozusagen die Reihe und können das natürlich auch
auf der y-Achse zum Beispiel machen wir uns jetzt hier noch eine zweite Schleife für den y-Wert.
Und jetzt auch noch den y-Wert manipulieren.
Das Ganze abspeichern. Können wir uns sozusagen ein ganzes Grid hier aufbauen. Und das Schöne ist,
dass wir sozusagen nur einmal hier sozusagen den Ursprung also den Nullpunkt definieren müssen und
dann können wir einfach immer wieder dieselben Muster zeichnen, ohne dass wir genau berechnen
müssen an welcher Stelle jetzt tatsächlich welches Objekt auftauchen muss. Für welche Shape das
besonders interessantes ist, ist zum Beispiel auch das "triangle", das Dreieck. Beim Triangle müssen
wir ja sozusagen drei Punkte definieren und das jetzt sozusagen quer und kreuz über unseren canvas
zu machen ist gar nicht so einfach. Deswegen finde ich am einfachsten wenn man zum beispiel das dann
auf 0/0 setzt den zweiten Punkt setzen wir auf 15 und den dritten Punkt auf minus 15. Wenn ich das
jetzt abspeicher habe ich sozusagen das Dreieck muss mir keine Gedanken machen wo jetzt genau
diese Punkte sind und wenn ich zum Beispiel jetzt ersetzen wir hier das letzte Rechteck
durch unser Dreieck. wenn ich jetzt zum beispiel hier das Dreieck an die richtige Position
innerhalb des Musters schieben will, kann ich ganz einfach hier ein weiteres "translate" benutzen
und das ganze jetzt in die linke Ecke schieben, also 10/10. Gucken wir. Das passt
und habe sozusagen jetzt zwei "translate" hintereinander
genutzt und durch das "pop" wird das ganze trotzdem wieder auf den
letzten Zustand zurückgesetzt den ich über "push" gespeichert haben