Differences

This shows you the differences between two versions of the page.

de:p5:basics:lesson9 [2009/03/20 12:33]
steffen added images 		de:p5:basics:lesson9 [2009/03/30 01:02] (current)
steffen
Line 1: Line 1:
-===== Positionierung II =====+====== Positionierung 2 ======
Bisher haben wir in Processing lediglich die Möglichkeit kennengelernt, einfache geometrisch Grundformen in der Sketch anhand der aufgerufenen Methoden zu positionieren. Auch bei Bildern und Texten funktionierte das nur nach diesem Prinzip: Bisher haben wir in Processing lediglich die Möglichkeit kennengelernt, einfache geometrisch Grundformen in der Sketch anhand der aufgerufenen Methoden zu positionieren. Auch bei Bildern und Texten funktionierte das nur nach diesem Prinzip:
<code> <code>
Line 9: Line 9:
text("Creative Coding", x, y); text("Creative Coding", x, y);
</code> </code>
-{{ :b09_00.png}}+{{:b09_00.png}}\\
Die Möglichkeiten bei der Positionierung visueller Elemente sind jedoch schnell erschöpft. So gibt es bisher z.B. keine Funktion mehrere, gezeichnete Elemente gleichzeitig zu verschieben, zu drehen oder gar zu skalieren. In der folgenden Lesson dreht sich deshalb alles um die Funktionen //translate()//, //rotate()// und //scale()//. Diese Funktionen werden unter dem Begriff "Transformation" zusammengefasst. Eine Transformation eines graphischen Elements beschreibt demzufolge seine Verschiebung, Drehung und Skalierung im Raum. Die Möglichkeiten bei der Positionierung visueller Elemente sind jedoch schnell erschöpft. So gibt es bisher z.B. keine Funktion mehrere, gezeichnete Elemente gleichzeitig zu verschieben, zu drehen oder gar zu skalieren. In der folgenden Lesson dreht sich deshalb alles um die Funktionen //translate()//, //rotate()// und //scale()//. Diese Funktionen werden unter dem Begriff "Transformation" zusammengefasst. Eine Transformation eines graphischen Elements beschreibt demzufolge seine Verschiebung, Drehung und Skalierung im Raum.
-==== Verschieben ==== +===== Verschieben ===== 
-{{ :b09_01_translate.png}}+{{:b09_01_translate.png}}\\
Der wichtigste Bestandteil einer Transformation ist das Versetzen des Ursprungs von dem aus das Element gezeichnet wird. Das kann über den Befehl translate erreicht werden: Der wichtigste Bestandteil einer Transformation ist das Versetzen des Ursprungs von dem aus das Element gezeichnet wird. Das kann über den Befehl translate erreicht werden:
-  * **translate()** verschiebt das gesamte Koordinatensystem der Zeichenfläche um die Parameterangaben von //x// und //y//. [[http://www.processing.org/reference/translate_.html|siehe Referenz]] +  * **translate()** verschiebt das gesamte Koordinatensystem der Zeichenfläche um die Parameterangaben von //x// und //y//. [[http://www.processing.org/reference/translate_.html|siehe Referenz]]<code>
-<code>+
float x = 41; float x = 41;
float y = 95; float y = 95;
Line 23: Line 22:
//translate()// verschiebt dabei nicht nur den Ursprung des nachfolgenden Objekts, sondern den Ursprung **aller** Objekte, die nachfolgend gezeichnet werden. Diese Funktionsweise ist u.a. einer der Vorteile von //translate()//, da gezielt Gruppen von graphischen Elementen verschoben werden können. Nach dem Aufruf von //translate()// verschiebt sich also das gesamte zu Grunde liegende Koordinatensystem. Durch die Parameter von //translate()// wird die zukünftige //x//- und //y//-Position des Koordinatenursprungs angegeben. //translate()// verschiebt dabei nicht nur den Ursprung des nachfolgenden Objekts, sondern den Ursprung **aller** Objekte, die nachfolgend gezeichnet werden. Diese Funktionsweise ist u.a. einer der Vorteile von //translate()//, da gezielt Gruppen von graphischen Elementen verschoben werden können. Nach dem Aufruf von //translate()// verschiebt sich also das gesamte zu Grunde liegende Koordinatensystem. Durch die Parameter von //translate()// wird die zukünftige //x//- und //y//-Position des Koordinatenursprungs angegeben.
-==== Rotieren ==== +===== Rotieren ===== 
-{{ :b09_02_rotate.png}}+{{:b09_02_rotate.png}}\\
Über //rotate()// können alle gezeichneten Element gedreht werden. Dabei werden Elemente nicht um den Punkt gedreht an dem sie gezeichnet werden, sondern um den **Ursprung** von dem aus sie gezeichnet werden. Das heisst, dass der einfache Aufruf von //rotate()// das gesamte Koordinatensystem der Sketch rotiert. Der einzige Parameter von //rotate()// gibt den Grad der Drehung im [[http://de.wikipedia.org/wiki/Bogenmass|Bogenmaß]] an, wobei 2 PI einer vollen Drehung entsprechen. Um zwischen Bogenmaß und Gradmaß umzurechnen stellt Processing die Funktionen //radians()// und //degrees()// zu Verfügung. Über //rotate()// können alle gezeichneten Element gedreht werden. Dabei werden Elemente nicht um den Punkt gedreht an dem sie gezeichnet werden, sondern um den **Ursprung** von dem aus sie gezeichnet werden. Das heisst, dass der einfache Aufruf von //rotate()// das gesamte Koordinatensystem der Sketch rotiert. Der einzige Parameter von //rotate()// gibt den Grad der Drehung im [[http://de.wikipedia.org/wiki/Bogenmass|Bogenmaß]] an, wobei 2 PI einer vollen Drehung entsprechen. Um zwischen Bogenmaß und Gradmaß umzurechnen stellt Processing die Funktionen //radians()// und //degrees()// zu Verfügung.
-  * **rotate()** dreht das gesamte Koordinatensystem um seinen Ursprung (x:0, y:0) nach dem im Bogenmaß gegebenen Winkel. Eine Drehung von 360 Grad entsprechen dabei 2 PI (6.2831855...). Processing bietet neben dem Ausdruck //PI// weiterhin  //HALF_PI// und //TWO_PI//. [[http://www.processing.org/reference/rotate_.html|siehe Referenz]] +  * **rotate()** dreht das gesamte Koordinatensystem um seinen Ursprung (x:0, y:0) nach dem im Bogenmaß gegebenen Winkel. Eine Drehung von 360 Grad entsprechen dabei 2 PI (6.2831855...). Processing bietet neben dem Ausdruck //PI// weiterhin  //HALF_PI// und //TWO_PI//. [[http://www.processing.org/reference/rotate_.html|siehe Referenz]]<code> 
-<code> +rotate (1.349);
-rotate (winkel);+
</code> </code>
-  * **radians()** gibt das Bogenmaß für einen Winkel in Grad zurück. [[http://www.processing.org/reference/radians_.html|siehe Referenz]] +  * **radians()** gibt das Bogenmaß für einen Winkel in Grad zurück. [[http://www.processing.org/reference/radians_.html|siehe Referenz]]<code>
-<code>+
// 'rad' = Radiant für 45 Grad // 'rad' = Radiant für 45 Grad
float rad = radians (45); float rad = radians (45);
</code> </code>
-  * **degrees()** stellt das Gegenteil von //radians()// dar – wandelt eine Winkelangabe vom Bogenmaß in Grad. [[http://www.processing.org/reference/degrees_.html|siehe Referenz]] +  * **degrees()** stellt das Gegenteil von //radians()// dar – wandelt eine Winkelangabe vom Bogenmaß in Grad. [[http://www.processing.org/reference/degrees_.html|siehe Referenz]]<code>
-<code>+
// 'deg' = Grad für PIviertel // 'deg' = Grad für PIviertel
float deg = degrees (PI / 4); float deg = degrees (PI / 4);
Line 83: Line 79:
</code> </code>
-=== Rotieren um den relativen Mittelpunkt ===+==== Rotieren um den relativen Mittelpunkt ====
Dadurch dass alle Elemente um den Koordinatenursprung gedreht werden, muss man vor dem Rotieren mittels //translate()// den Koordinatenursprung auf den gewünschten Mittelpunkt verschieben, um ein Objekt um die eigene Achse zu drehen. Dadurch dass alle Elemente um den Koordinatenursprung gedreht werden, muss man vor dem Rotieren mittels //translate()// den Koordinatenursprung auf den gewünschten Mittelpunkt verschieben, um ein Objekt um die eigene Achse zu drehen.
Line 174: Line 170:
</code> </code>
-=== Winkelberechnung zwischen zwei Punkten ===+==== Winkelberechnung zwischen zwei Punkten ====
Um den Winkel zwischen zwei Punkten zu berechnen, stellt Processing die Funktion zur Verfügung: Um den Winkel zwischen zwei Punkten zu berechnen, stellt Processing die Funktion zur Verfügung:
  * **atan2()** [[http://www.processing.org/reference/atan2_.html|siehe Referenz]]   * **atan2()** [[http://www.processing.org/reference/atan2_.html|siehe Referenz]]
Line 215: Line 211:
} }
</code> </code>
-==== Skalieren ====+===== Skalieren ===== 
 +{{:b09_03_scale.png}}\\
Genau wie //translate()// und //rotate()// wirkt sich //scale()// auf das gesamte Koordinatensystem aus. Genau wie //translate()// und //rotate()// wirkt sich //scale()// auf das gesamte Koordinatensystem aus.
-  * **scale()** [[http://www.processing.org/reference/scale_.html|siehe Referenz]] +  * **scale()** [[http://www.processing.org/reference/scale_.html|siehe Referenz]]<code>scale (3.7);</code>
-<code>scale (3.7);</code>+
Wie der Name vermuten lässt, wird dabei das Koordinatensystem skaliert, also vergrößert oder verkleinert. Wie der Name vermuten lässt, wird dabei das Koordinatensystem skaliert, also vergrößert oder verkleinert.
===== Lösen der Zeichenfläche ===== ===== Lösen der Zeichenfläche =====
Da sich alle Funktionen für die Transformation immer auf das gesamte Koordinatensystem auswirken, gibt es in Processing die Möglichkeit mehrere Korrdinatensysteme von einander abzugrenzen, und so einzelne Transformation unabhängig voneinander anzuwenden. Die beiden Funktionen die dazu nötig heissen: Da sich alle Funktionen für die Transformation immer auf das gesamte Koordinatensystem auswirken, gibt es in Processing die Möglichkeit mehrere Korrdinatensysteme von einander abzugrenzen, und so einzelne Transformation unabhängig voneinander anzuwenden. Die beiden Funktionen die dazu nötig heissen:
-  * **pushMatrix()** erzeugt eine neue Ebene in der Zeichfläche. Diese übernimmt alle aktuellen Eigenschaften (wie Position und Rotation) vom Hintergrund. [[http://www.processing.org/reference/pushMatrix_.html|siehe Referenz]] +  * **pushMatrix()** erzeugt eine neue Ebene in der Zeichfläche. Diese übernimmt alle aktuellen Eigenschaften (wie Position und Rotation) vom Hintergrund. [[http://www.processing.org/reference/pushMatrix_.html|siehe Referenz]]<code>
-<code>+
// erzeugt eine neue Ebene // erzeugt eine neue Ebene
pushMatrix(); pushMatrix();
Line 233: Line 228:
rect (0, 0, 40, 40); rect (0, 0, 40, 40);
</code> </code>
-  * **popMatrix()** verbindet die mit //pushMatrix()// generierte Ebene (bzw. deren Inhalt) mit dem Hintergrund. Nach dem Aufruf von //popMatrix()// gelten die gleichen Bedingungen für Position und Rotation der Zeichenfläche wie vor dem Aufruf von //pushMatrix()//. [[http://www.processing.org/reference/popMatrix_.html|siehe Referenz]] +  * **popMatrix()** verbindet die mit //pushMatrix()// generierte Ebene (bzw. deren Inhalt) mit dem Hintergrund. Nach dem Aufruf von //popMatrix()// gelten die gleichen Bedingungen für Position und Rotation der Zeichenfläche wie vor dem Aufruf von //pushMatrix()//. [[http://www.processing.org/reference/popMatrix_.html|siehe Referenz]]<code>
-<code>+
// zeichnet ein Quadrat an x:0, y:0 // zeichnet ein Quadrat an x:0, y:0
rect (0, 0, 40, 40); rect (0, 0, 40, 40);