Text & Typographie – Woche 12

Aufgaben

String

Ein String ist ein Datentyp, der Texte speichern kann. Ein String wird auch als Zeichenkette bezeichnet, weil ein Text aus mehreren einzelnen hintereinander liegenden Zeichen besteht. Einzelne Zeichen stehen in einfachen Anführungszeichen ('a' oder 'B'), ein String steht immer in doppelten ("abc" oder "Berlin"). Siehe hierzu auch den char-Datentyp.

Wir sind Strings bereits häufiger begegnet: Etwa um Bilder zu laden (z.B. loadImage("btk-logo.jpg")) oder als Möglichkeit, mit Hilfe von println("Hallo") einen Text im Nachrichten-Bereich auszugeben.

• Processing Reference: String
• Processing Reference: char

Strings verketten

Wenn man zwei oder mehrere Strings zusammenfügen will, kann man sie konkatenieren (lat. concatenare = verketten). Dazu verwendet man in Processing den Operator +
Als Resultat erhält man einen neuen String:

String text1 = "Graphic"; String text2 = "Coding"; String gesamtText = text1 + text2; // Die zwei Strings werden konkateniert. println(gesamtText); // Gibt »GraphicCoding« im Nachrichtenbereich aus.

Genauso kann man auch mehr als zwei Strings verketten:

String text1 = "Hallo"; String text2 = "Welt"; String gesamtText = text1 + " " + text2; println(gesamtText); // Gibt »Hallo Welt« (mit Leerzeichen) im Nachrichtenbereich aus.

Außerdem kann man auch Strings mit einzelnen Zeichen (char) und sogar mit anderen Datentypen verketten.
Andere Datentypen werden dabei in den entsprechenden Text umgewandelt: Etwa die Zahl 123 in den Text "123".

String text1 = "Das Alphabet lautet: "; char c1 = 'a'; char c2 = 'b'; char c3 = 'c'; String gesamtText = text1 + c1 + c2 + c3; println(gesamtText); // Gibt »Das Alphabet lautet: abc« aus. int summe = 1 + 2; String text2 = "eins plus zwei ist " + summe; println(text2); // Gibt »eins plus zwei ist 3« aus.

• Processing Reference: +

Vektor- und Bitmap-schriften

Bitmap-Schrift

Eine Bitmap-Schrift (auch Pixelschrift genannt) ist eine Repräsentation einer Schrift in einer bestimmten Größe. Die Form jedes Zeichens ist wie in einer Bilddatei als Rastergrafik erfasst, d.h. eine Schrift beinhaltet pro Buchstaben ein eigenes "Bild". Diese Schriften heißen Bitmap-Schriften, weil pro Pixel ein Bit gespeichert wurde, das entweder 1 für schwarz oder 0 für weiß ist.

Vektorschrift

Eine Vektorschrift beschreibt eine Schrift mit Hilfe von geometrischen Funktionen. Jedes Zeichen wird durch Linien und Kurven bestimmt, und kann so in jeder beliebigen Größe dargestellt werden. Da Vektorschriften die Buchstaben beschreiben, statt sie als Pixel zu speichern, ist die Qualität im Gegensatz zu einer Bitmap-Schrift meist besser.

Schrift in Processing

Processing verwendet ein eigenes pixelbasiertes Format: Das VLW-Format, welches Bilder pro Zeichen verwendet, anstatt diese mit Hilfe von Vektordaten zu zeichnen. Dies resultiert daher, dass es schwierig ist, Vektorfonts so im Web zu verwenden, dass alle Nutzer die Schrift lesen können sollen, auch ohne die verwendete Schrift installiert zu haben. Die Processing-Lösung umgeht das Problem.

Schrift in Processing verwenden

In diesem Abschnitt wird gezeigt, wie man in Processing Schriften lädt und verwendet.

PFont

Schriften müssen in Variablen vom Datentype PFont gespeichert werden – ähnlich wie Bilder in PImage.

• Processing Reference: PFont

loadFont()

loadFont(fontName);

Mit dieser Anweisung werden Schriften aus einer Datei in eine PFont-Variable geladen. Die Schriften müssen im data-Ordner unterhalb des Programmordners liegen. Siehe auch loadImage().

PFont font; void setup() { size(400, 400); font = loadFont("Helvetica-24.vlw"); }

Wie auch beim Laden von Bildern sollten Schriften nur einmal geladen werden, können aber beliebig häufig verwendet werden.

• Processing Reference: loadFont

textFont()

textFont(font);
textFont(font, size);

Hiermit wird die aktuelle Schrift festgelegt. Alle folgenden Text-Anweisungen verwenden diese Schrift. Um eine gute Qualität der Ausgabe zu erreichen, sollte die verwendete Größe der Schrift der der Pixelschrift entsprechen.

• Processing Reference: textFont()

text()

text(text, x, y);
text(text, x, y, width, height);

Zeichnet Text (String oder char) auf den Zeichenbereich an die Position x, y. Dabei wird die per textFont() aktuell gesetzte Schrift verwendet.

PFont myFont; void setup() { size(100, 100); background(0); myFont = loadFont("ArialNarrow-12.vlw"); textFont(myFont, 12); } void draw() { text("btk", 10, 10); }

Im zweiten Beispiel wurde der Text automatisch umgebrochen, da Weite und Höhe des Textbereichs angegeben wurden:

void draw() { text("Franz jagt im komplett verwahrlosten Taxi quer durch Bayern", 10, 10, 90, 90); }

• Processing Reference: text()
• Processing Examples: Words

Textfarbe und -ausrichtung

fill()

Die Farbe eines Textes wird mit fill() gesetzt. Dabei wird fill() so verwendet, wie wir es schon kennen gelernt haben; so wird beispielsweise folgendermaßen ein roter Text gezeichnet:

fill(255, 0, 0); text("Dies ist rot", 10, 10); textAlign()

Hiermit wird die Ausrichtung eines Textes bestimmt. Die Parameter LEFT, CENTER und RIGHT setzen die Anzeigerichtung der Buchstaben in Relation zu den x- und y-Werten der text() Funktion.

• Processing Reference: textAlign()

Schrift ins Processing-Format umwandeln

Um eine Bitmap-Schrift zu erzeugen, die in Processing verwendet werden kann, wähle im Menü unter "Tools" > "Create Font..." aus. Mit Hilfe dieses kleinen Tools kann man nun auf dem Computer installierte (Vektor-)Schriften in das Processing-Format konvertieren.

Zunächst wählt man eine Schrift aus den angzeigten aus. Dann wählt man den Schnitt und die Größe und kann diese Schrift umwandeln lassen. Als Dateiname kann ein beliebiger Name gewählt werden (wichtig ist nur, dass die Endung .vlw lautet). Die erzeugte Processing-Schrift liegt im data-Ordner unterhalb des aktuellen Sketches, und kann dann mit loadFont geladen werden.

PFont myFont = loadFont("Garamond-Italic-48.vlw");