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:

[caption id="attachment_2134" align="aligncenter" width="300" caption="Koordinatensystem"][/caption]

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 80x40, 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 80x40 an Position X=50 und Y=90):

[caption id="attachment_2135" align="aligncenter" width="300" caption="Koordinatensystem mit verschobenem Nullpunkt"][/caption]

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:

[caption id="attachment_2142" align="alignleft" width="300" caption="Ohne Nullpunkt-Verschiebung (translate())"][/caption]

[caption id="attachment_2137" align="alignleft" width="300" caption="Mit Nullpunkt-Verschiebung (translate())"][/caption]

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:

[caption id="attachment_2146" align="aligncenter" width="150" caption="void draw() und translate()"][/caption]

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