Text & Typographie – Woche 12
Aufgaben
L1: Der kleine ABC-Schütze
Erstelle eine Schrift mit Hilfe des Create Font-Tools, und nutze diese, um einen statischen Text auf den Zeichenbereich zu schreiben.
L2: Zeichenreigen
Setze den jeweils aktuell gedrückten Buchstaben an zufällige Positionen in verschiedenen Farben.
L3: "Filmvorspann"
Lass' Text von der Mitte aus größer werden, bis sie verschwindet.
Projekt 2: Kommunikation
Erstelle einen Sketch zum Thema "Kommunikation". Überlege eine Idee, wie du mit deinem Programm dies vermitteln kannst.
Dokumentation
Schreibt als Kommentar am Anfang in euren Code:
- Vollständige Namen aller Gruppenmitglieder
- Projektbeschreibung: Was ist die Idee/der Hintergrund? Was macht das Programm?
- Schickt drei Screenshots mit (als JPEG, max. 250x250 Pixel groß)
- Eventuelle Schwierigkeiten, bzw. Unvollständigkeiten in der Umsetzung
Style
Achtet darauf, dass ihr den Code formattiert, sinnvolle, aussagekräftige Variablennamen verwendet und – vor allem – gut kommentiert. (Siehe auch den Style Guide)
Abgabe
Die Projekte müssen im Intranet der BTK eingereicht werden. Archiviert euren Sketch (Processing Menü > Tools > Archive Sketch) und ladet diese Zip-Datei bei der entsprechenden Aufgabe hoch.
Letzter Abgabetermin ist Donnerstag, 19.07.07 um 23:59 Uhr.
Am Freitag, 20.07. werden die Projekte dann in der letzten Stunde präsentiert.
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.
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:
Genauso kann man auch mehr als zwei Strings verketten:
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".
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.
Links eine Vektorschrift, rechts eine Bitmapschrift
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.
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().
Wie auch beim Laden von Bildern sollten Schriften nur einmal geladen werden, können aber beliebig häufig verwendet werden.
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.
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.
Im zweiten Beispiel wurde der Text automatisch umgebrochen, da Weite und Höhe des Textbereichs angegeben wurden:
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:
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.
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. Die erzeugte Processing-Schrift liegt im data-Ordner unterhalb des aktuellen Sketches. Als Dateiname kann ein beliebieger Name gewählt werden (wichtig ist nur, dass die Endung .vlw lautet).