Processing: Translate – Koordinatensystem verschieben

Hi,

in diesem Artikel möchte Ich dir die translate()-Funktion zeigen.

Wie du weißt, ist der Null-Punkt im Koordinatensystem von Processing immer in der oberen linken Ecke. Veranschaulichend dazu folgende Grafik:

Koordinatensystem
Koordinatensystem

Die Translate-Funktion nun ist dazu da, um diesen Nullpunkt zu verschieben. Stell dir vor du verschiebst den Nullpunkt an Position X = 20 und Y = 20. Wenn du nun ein Rechteck an Position 0, 0 zeichnen würdest mit einer Größe von 80×40, sieht es im fertigen Bild aus als wäre das Rechteck an 20, 20. Folgende Grafik soll dir zeigen, wie translate() arbeitet (Auch hier wieder eine Größe für das Rechteck von 80×40 an Position X=50 und Y=90):

Koordinatensystem
Koordinatensystem mit verschobenem Nullpunkt

Dasselbe Gebilde, nur dass Ich, bevor Ich den ganzen Kram dort draufgezeichnet hab, den Nullpunkt verschoben habe auf 20, 20. Hier bisschen schlecht zu sehen, da das komplette Raster mitverschoben wurde.

Sehen wir uns das nochmals an. Ein simples Rechteck an 0, 0. Einmal ganz normal und einmal mit verschobenem Nullpunkt genau in der Mitte des Fensters (width / 2, height / 2) – auf Bild klicken um es in Originalgröße anzusehen:

Ohne Nullpunkt-Verschiebung (translate())
Ohne Nullpunkt-Verschiebung (translate())
Mit Nullpunkt-Verschiebung (translate())
Mit Nullpunkt-Verschiebung (translate())

Du siehst, derselbe Code, nur dass beim zweiten Bild der NullPunkt verschoben wurde. Hier auch gleicht ersichtlich, wie translate funktioniert. Du übergibst als Parameter einfach nur die X- / Y-Koordinaten für den neuen Nullpunkt.
Spannend wird die translate() Funktion im Zusammenhang mit Rotationen, die ich im nächsten und in einigen weiteren Artikeln behandeln möchte.
Zum herumexperimentieren mit translate() hab‘ Ich dir auf OpenProcessing etwas schönes zusammengebastelt, einfach mal ausprobieren 😉 Lies‘ die Beschreibung unter dem Sketch um zu wissen was du anstellen kannst.

Ein wichtiger Hinweis sei noch zu beachten: Es ist möglich, translate zu verschachteln. Schreibe translate(50, 50), um den Nullpunkt nach X=50 und Y=50 zu verschieben. Wenn du danach erneut translate aufrufst, beispielsweise mit Wert 20, wird der Nullpunkt nicht erneut von 0, 0 verschoben sondern von 50, 50. Sobald draw() beendet ist und wieder an den Anfang springt, hast du wieder 0, 0. Alles andere wäre auch schwachsinnig, da sich der Nullpunkt ansonsten ja mit der Zeit ins unendliche verschiebt. Schau mal:

void draw() und translate()
void draw() und translate()

Klick das Bild an, damit du’s in Originalgröße anschauen kannst.

So, Ich denke die Translate-Funktion können wir damit abschließen, viel muss dazu auch nicht gesagt werden. Im nächsten Artikel wird es um Rotationen gehen, eine echt prickelnde Sache die dir Spaß machen wird =)

Bis dahin
Marius

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich stimme zu.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.