Differences

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

de:p5:basics:lesson7 [2009/03/20 11:41]
steffen added images 		de:p5:basics:lesson7 [2009/03/30 00:57] (current)
steffen
Line 1: Line 1:
-===== Typographie =====+====== Typographie ======
=== Schriften in Processing === === Schriften in Processing ===
Innerhalb von Processing wird das Schriftformat vlw verwendet. Anders als bei Vektorschriften liegt dabei jedes Zeichen seperat als gerastertes Bild vor. Diese Bildinformationen beschränken sich pro Pixel auf die Angabe von schwarz (1) oder weiß (0) – wird das Pixel gefüllt oder nicht. Eine solche Schrift nennt man deshalb Bitmap-Font ([[http://de.wikipedia.org/wiki/Bit|Bit]]), da nur zwei Möglichkeiten existieren. Innerhalb von Processing wird das Schriftformat vlw verwendet. Anders als bei Vektorschriften liegt dabei jedes Zeichen seperat als gerastertes Bild vor. Diese Bildinformationen beschränken sich pro Pixel auf die Angabe von schwarz (1) oder weiß (0) – wird das Pixel gefüllt oder nicht. Eine solche Schrift nennt man deshalb Bitmap-Font ([[http://de.wikipedia.org/wiki/Bit|Bit]]), da nur zwei Möglichkeiten existieren.
Grund für diese umständliche und qualitativ ungünstige Lösung ist die Funktion des Webexports. Da die Verfügbarkeit der Schriften im Betriebssystem von Betrachtern im Internet keine Vorraussetzung darstellen soll. Grund für diese umständliche und qualitativ ungünstige Lösung ist die Funktion des Webexports. Da die Verfügbarkeit der Schriften im Betriebssystem von Betrachtern im Internet keine Vorraussetzung darstellen soll.
- +===== Laden von Schriften ===== 
-==== Laden von Schriften ==== +Das laden von Schriften verhält sich ähnlich wie das Laden von Bildern, das bereits in der [[de:p5:basics:lesson6|Lesson 6]] eingeführt wurde. Mussten wir bei Bildern, diese vorher manuell in den //data-Ordner// unserer Sketch kopieren (alternativ auch über das Menü "Sketch->Add File...") gibt es bei Schriften noch einen zusätzlichen Schritt vor dem Kopieren: das Erstellen der Bitmap-Font aus der auf dem Rechner installierten Schrift. Diese Aufgabe übernimmt komplett das Tool "Create Font" (im Menü "Tools->Create Font..."). Einmal geöffnet, wählt man die Schrift, die man verwenden möchte aus, woraufhin sie automatisch in den //data-Ordner// kopiert wird. Damit kann sie verwendet werden.
-Das laden von Schriften verhält sich ähnlich wie das Laden von Bildern, das bereits in der Lesson 6 eingeführt wurde. Mussten wir bei Bildern, diese vorher manuell in den //data-Ordner// unserer Sketch kopieren (alternativ auch über das Menü "Sketch->Add File...") gibt es bei Schriften noch einen zusätzlichen Schritt vor dem Kopieren: das Erstellen der Bitmap-Font aus der auf dem Rechner installierten Schrift. Diese Aufgabe übernimmt komplett das Tool "Create Font" (im Menü "Tools->Create Font..."). Einmal geöffnet, wählt man die Schrift, die man verwenden möchte aus, woraufhin sie automatisch in den //data-Ordner// kopiert wird. Damit kann sie verwendet werden.+
Wie Bilder werden auch Schriften in einem eigenen Datentypen gespeichert: Wie Bilder werden auch Schriften in einem eigenen Datentypen gespeichert:
Line 17: Line 16:
</code> </code>
-==== Abbilden im Sketch ====+===== Abbilden im Sketch =====
Nach dem Erfolgreichen Laden der Font kann diese endlich verwendet werden. Dazu muss Processing zu erst mitgeteilt werden welche Font verwendet werden soll. Das ist insbesondere deswegen nötig, da natürlich auch mehrere Schrift geladen und verwendet werden können. Nach dem Erfolgreichen Laden der Font kann diese endlich verwendet werden. Dazu muss Processing zu erst mitgeteilt werden welche Font verwendet werden soll. Das ist insbesondere deswegen nötig, da natürlich auch mehrere Schrift geladen und verwendet werden können.
In Processing wird die zu verwendende Schrift über den Befehl //textFont(font, size);// definiert. Diese Einstellung gilt dann bis zum erneuten Aufruf von //textFont();//. Beim festlegen der Schriftgröße sollte darauf geachtet werden, dass die Font vorher in einer besimmten Größe gerastert (in Bitmap-Schrift umgewandelt) wurde, was dazu führen kann, dass die Pixel der Schrift sichtbar werden, wenn die Darstellungsgröße die Rastergröße übersteigt. Allgemein gilt, das Schriften die kleiner gerastert wurden schneller dargestellt werden. Deshalb: Vorsicht bei Rasterungen von zu grossen Schriftgrößen (größer 70)! In Processing wird die zu verwendende Schrift über den Befehl //textFont(font, size);// definiert. Diese Einstellung gilt dann bis zum erneuten Aufruf von //textFont();//. Beim festlegen der Schriftgröße sollte darauf geachtet werden, dass die Font vorher in einer besimmten Größe gerastert (in Bitmap-Schrift umgewandelt) wurde, was dazu führen kann, dass die Pixel der Schrift sichtbar werden, wenn die Darstellungsgröße die Rastergröße übersteigt. Allgemein gilt, das Schriften die kleiner gerastert wurden schneller dargestellt werden. Deshalb: Vorsicht bei Rasterungen von zu grossen Schriftgrößen (größer 70)!
Line 75: Line 74:
</code> </code>
-==== Schriftgröße ====+===== Schriftgröße =====
Die Schriftgröße lässt sich auf zwei Wegen definieren: Die Schriftgröße lässt sich auf zwei Wegen definieren:
  * **textFont(font, size)** setzt sowohl die zukünftig zu verwendende Schrift, sowie gleichzeitig die Schriftgröße. [[http://processing.org/reference/textFont_.html|siehe Referenz]]   * **textFont(font, size)** setzt sowohl die zukünftig zu verwendende Schrift, sowie gleichzeitig die Schriftgröße. [[http://processing.org/reference/textFont_.html|siehe Referenz]]
Line 112: Line 111:
</code> </code>
-==== Zeilenhöhe ====+===== Zeilenhöhe =====
Für die Darstellung von mehrzeiligem Text ist die Anpassung des Zeilenabstands unabdingbar um eine gute Lesbarkeit zu gewährleisten (oder auch nicht ;) ). Die Zeilenhöhe lässt sich über die Funktion //textLeading()// einstellen. Für die Darstellung von mehrzeiligem Text ist die Anpassung des Zeilenabstands unabdingbar um eine gute Lesbarkeit zu gewährleisten (oder auch nicht ;) ). Die Zeilenhöhe lässt sich über die Funktion //textLeading()// einstellen.
<code java> <code java>
Line 145: Line 144:
</code> </code>
-==== Einfärben ====+===== Einfärben =====
Das Einfärben von Schrift funktioniert in Processing auf die selbe Art und Weise wie das auch bei den Grundformen wie //rect()// oder //ellipse()// der Fall ist. Das heisst, ein Aufruf von //fill(r, g, b);// ändert die Füllfarbe für alle folgenden gezeichneten Texte (und Formen!). Auch die Verwendung von Transparenzen über //fill(r, g, b, a);// ist möglich. Das Einfärben von Schrift funktioniert in Processing auf die selbe Art und Weise wie das auch bei den Grundformen wie //rect()// oder //ellipse()// der Fall ist. Das heisst, ein Aufruf von //fill(r, g, b);// ändert die Füllfarbe für alle folgenden gezeichneten Texte (und Formen!). Auch die Verwendung von Transparenzen über //fill(r, g, b, a);// ist möglich.
Die Strichfarbe hingegen lässt sich bei Schriften nicht definieren, was mit dem Umstand zu tun hat, dass Texte in Processing generell Pixelbilder sind. Die Strichfarbe hingegen lässt sich bei Schriften nicht definieren, was mit dem Umstand zu tun hat, dass Texte in Processing generell Pixelbilder sind.
Line 175: Line 174:
</code> </code>
-==== Ausrichtung ====+===== Ausrichtung =====
Texte können auf beiden Achsen, Horizontale und Vertikale, unter der Verwendung von //textAlign()// ausgerichtet werden. Die Vertikale (//y//-Achse) ist dabei nur ein optionaler Wert – die //x//-Achse muss jedoch immer angegeben werden. Texte können auf beiden Achsen, Horizontale und Vertikale, unter der Verwendung von //textAlign()// ausgerichtet werden. Die Vertikale (//y//-Achse) ist dabei nur ein optionaler Wert – die //x//-Achse muss jedoch immer angegeben werden.
-  * **textAlign()** setzt die Ausrichtung alle danach folgenden mit //text()// dargestellte Texte. Diese Funktion kann mit einem oder zwei Parametern aufgerufen werden. Der erste definiert die //x//-Achse (Horizontale), optional kann mit dem Zweiten die y-Achse (Vertikale) angegeben werden. Als ersten Wert können folgende Angaben genutzt werden: LEFT, CENTER, RIGHT. Als Standard wird von Processing LEFT verwendet. Für die y-Achse finden folgende Werte Verwendung: TOP, CENTER, BOTTOM. [[http://processing.org/reference/textAlign_.html|siehe Referenz]] +  * **textAlign()** setzt die Ausrichtung alle danach folgenden mit //text()// dargestellte Texte. Diese Funktion kann mit einem oder zwei Parametern aufgerufen werden. Der erste definiert die //x//-Achse (Horizontale), optional kann mit dem Zweiten die y-Achse (Vertikale) angegeben werden. Als ersten Wert können folgende Angaben genutzt werden: LEFT, CENTER, RIGHT. Als Standard wird von Processing LEFT verwendet. Für die y-Achse finden folgende Werte Verwendung: TOP, CENTER, BOTTOM. [[http://processing.org/reference/textAlign_.html|siehe Referenz]]<code>
-<code>+
// Ausrichtung rects // Ausrichtung rects
textAlign (RIGHT); textAlign (RIGHT);
Line 189: Line 187:
=== Bsp.: Text horizontal ausrichten === === Bsp.: Text horizontal ausrichten ===
Im unteren Beispiel legt die Variable ''xpos'' die //x//-Position beider Textschnippsel fest. Text 1 ("creative") wird links ausgerichtet – wie in Processing standardisiert. Der zweite Text ("coding") wird an selbiger Position platziert, aber mittels //textAlign (RIGHT);// rechts ausgerichtet. Text 2 endet deshalb an der Startposition von Text 1. Im unteren Beispiel legt die Variable ''xpos'' die //x//-Position beider Textschnippsel fest. Text 1 ("creative") wird links ausgerichtet – wie in Processing standardisiert. Der zweite Text ("coding") wird an selbiger Position platziert, aber mittels //textAlign (RIGHT);// rechts ausgerichtet. Text 2 endet deshalb an der Startposition von Text 1.
 +
{{:b07_05_text_align1.png}} {{:b07_05_text_align1.png}}
\\ \\
Line 221: Line 220:
</code> </code>
-==== Textbreite ====+===== Textbreite =====
Um Texte in Proportionen zur Zeichenfläche platzieren zu können, benötigen wir Informationen zur Breite. Processing gibt uns Antwort auf diese Frage mit dem Aufruf von //textWidth()//. Trotz der durch Pixel limitierten Darstellung auf dem Bildschirm erhalten wir eine Fließkommazahl (Datentyp //float//) der uns bei der Positionierung von Textschnippseln dient. Um Texte in Proportionen zur Zeichenfläche platzieren zu können, benötigen wir Informationen zur Breite. Processing gibt uns Antwort auf diese Frage mit dem Aufruf von //textWidth()//. Trotz der durch Pixel limitierten Darstellung auf dem Bildschirm erhalten wir eine Fließkommazahl (Datentyp //float//) der uns bei der Positionierung von Textschnippseln dient.
Bei der Berechnung dieses Wertes spielen die aktuellen Einstellungen wie //textFont()// (aktuelle Schriftart) und //textSize()// (Größe der Schrift) eine Rolle. Bei zwischenzeitlicher änderungen dieser Optionen, muss die Textbreite neu berechnet werden. Bei der Berechnung dieses Wertes spielen die aktuellen Einstellungen wie //textFont()// (aktuelle Schriftart) und //textSize()// (Größe der Schrift) eine Rolle. Bei zwischenzeitlicher änderungen dieser Optionen, muss die Textbreite neu berechnet werden.
-  * **textWidth()** gibt die Breite eines Textes für die aktuell mit //textFont()// gesetzte Schrift zurück – in Abhänigkeit von //textSize()//. Als einzigen Parameter wird der Text übergeben. [[http://processing.org/reference/textWidth_.html|siehe Referenz]] +  * **textWidth()** gibt die Breite eines Textes für die aktuell mit //textFont()// gesetzte Schrift zurück – in Abhänigkeit von //textSize()//. Als einzigen Parameter wird der Text übergeben. [[http://processing.org/reference/textWidth_.html|siehe Referenz]]<code>
-<code>+
float breite = textWidth("Wie breit bin ich?"); float breite = textWidth("Wie breit bin ich?");
</code> </code>