Wenn du hier ein Program mit ProcessingJS erstellst, wird der Output auf eine Canvas geschrieben, die wie mathematisches Papier beschaffen ist. Um eine Form zu zeichnen, werden ihre Koordinaten darauf angegeben.
Hier ist beispielsweise ein einfaches Rechteck, das mit dem Code rect(20, 20, 40, 40) gezeichnet wird. Das Koordinatensystem (ein eleganteres Wort, um dieses "mathematische Papier" zu beschreiben) wird in grau gezeigt. Um unsere Bilder kleiner zu halten, hat das untenstehende Koordinatensystem 200 x 200 Pixel (im Gegensatz zu den regulären 400 x 400 Pixel).
Wenn du das Rechteck 60 Einheiten nach rechts und 80 Einheiten nach unten schieben möchtest, kannst du die Koordinaten einfach ändern, indem du den Wert zu den Ausgangspunkten x und y hinzufügst: rect(20 + 60, 20 + 80, 40, 40) Nun wird das Rechteck woanders auftauchen. (Um einen dramatischen Effekt zu erhalten, haben wir den Pfeil hinzugefügt.)
Es gibt aber einen interessanteren Weg, dies umzusetzen: bewege stattdessen das mathematische Papier. Wenn du das mathematische Papier 60 Einheiten nach rechts und 80 nach unten bewegst, erhältst du genau das gleiche sichtbare Ergebnis. Diese Bewegung des Koordinatensystems heißt Verschiebung.
Das wichtige an dem voherigen Diagramm ist, dass das Rechteck selbst überhaupt nicht bewegt wurde. Seine obere linke Ecke befindet sich immer noch bei (20,20). Wenn du Verschiebungen verwendest, ändern die gezeichneten Objekte niemals die Position, sondern nur das Koordinatensystem.
Das folgende Programm zeichnet erst das ursprüngliche Rechteck, zeichnet es dann an dem neuen Ort in Rot, indem es seine Koordinaten verändert, und zeichnet es dann an dem neuen Ort in Blau, indem es das Raster verschiebt (durch translate()). Die Füllfarben sind transparent, so dass sich das Rot und das Blau überlagern und praktisch am gleichen Ort ein violettes Quadrat bilden. Nur die Methode für die Bewegung hat sich geändert. Spiele mit den untenstehenden Zahlen und sieh selbst:
Schauen wir uns den Verschiebungscode mal genauer an. pushMatrix() ist eine eingebaute Funktion, die die aktuelle Position des Koordinatensystems speichert. Die Funktion translate(60, 80) bewegt das Koordinatensystem 60 Einheiten nach rechts und 80 nach unten. Die Funktion rect(20, 20, 40, 40) zeichnet das Rechteck an demselben Ort, an dem es sich ursprünglich befand. Beachte, dass sich nicht die gezeichneten Objekte bewegen, sondern das Raster. Am Ende stellt popMatrix() das Koordinatensystem wieder auf den Zustand vor der Verschiebung her.
Warum werden pushMatrix() und popMatrix() verwendet? Du hättest translate(-60, -80) verwenden können, um das Raster auf seine Ursprungsposition zurückzuschieben. Wenn du jedoch anspruchsvollere Operationen mit dem Koordinatensystem durchführst, ist es einfacher, zum Speichern und Wiederherstellen des Status pushMatrix() und popMatrix() zu verwenden, anstatt alle Operationen wieder rückgängig zu machen. Weiter hinten in diesem Abschnitt wirst du herausfinden, warum diese Funktionen so merkwürdige Namen zu haben scheinen.

Was ist der Vorteil?

Du könntest nun denken, dass es viel aufwändiger ist, das Koordinatensystem zu verschieben, als einfach nur die Koordinaten zu ändern. Für ein einfaches Beispiel wie das Rechteck hast du Recht. Aber nehmen wir mal ein Beispiel, bei dem translate() das Leben leichter machen kann.
Hier ist ein Programm, das eine Häuserzeile malt. Es verwendet eine Schleife, der eine Funktion namens drawHouse() aufruft, die den Ort x und y der linken oberen Ecke des Hauses als Parameter verwendet. Achte darauf, wie viele Parameter bei der Funktion drawHouse nötig sind, um das Haus bei den angegebenen Parametern zu zeichnen:
Und wenn wir die Funktion translate() verwenden, anstatt neue Koordinaten zu berechnen? In diesem Fall zeichnet der Code das Haus jedes Mal am gleichen Ort, mit der linken obere Ecke bei (0, 0), und lässt die Funktion translation die Arbeit erledigen.
Dies bedeutet nicht, dass es immer besser ist, translate() zu verwenden, anstatt neue Koordinaten zu berechnen. Wie alles, was wir dir beibringen, ist es ein weiteres Werkzeug in deiner Werkzeugkiste, und du kannst selbst herausfinden, wann es sinnvoll ist, dass neue Werkzeug translate() zu verwenden.

Dieser Artikel ist eine Bearbeitung von 2D Transformations von J. David Eisenberg und wird unter einer Creative Commons Attribution-NonCommercial-ShareAlike-Lizenz verwendet.
Lade