Generative Grafiken 2 - Woche 3

Aufgaben

Texte verwenden

Strings

Wie in CC1 : Text & Typographie gezeigt, sind Strings Zeichenketten, die Texte speichern können. Diese Texte können direkt ausgegeben werden, sei es mit Hilfe von Fonts auf der Zeichenfläche oder mit Hilfe von println() im Nachrichten-Bereich. Darüberhinaus kann man die Texte auch auswerten, etwa wie häufig ein bestimmtes Wort in einem Satz vorkommt, oder wieviele Buchstaben in einem Text enthalten sind.

String txt = "Hallo Welt"; float w = txt.length(); float h = 100; rect(mouseX, mouseY, w, h);

Die Methode txt.length() gibt die Länge des Strings zurück, d.h. die Anzahl der enthaltenen Zeichen. Diese kann – wie alle Variablen oder Werte – natürlich auch verwendet werden, um etwa die Weite eines Rechtecks festzulegen. Im obigen Beispiel wäre das Rechteck folglich 10 Pixel weit (da "Hallo Welt" aus zehn Zeichen besteht).

• Processing Reference: String
• Processing Reference: String.length()
• Processing Examples: Characters and Strings

Zeichen im String

Da Strings eigentlich nur Ketten von Zeichen sind, also aneinandergehängte Buchstaben, Punktuationen, etc, kann auf diese auch einzeln zugegriffen werden. Die Zeichen sind vom Datentyp char. Die einzelnen Zeichen sind durchnummeriert, und fangen – wie in einem Array – bei 0 an, und gehen bis length() - 1. Im String "Hallo Welt" ist also das Zeichen 'W' an der Position 6.

String txt = "Hallo Welt"; char c = txt.charAt(6); println(c);

Mit charAt() kann auf die einzelnen Zeichen zugegriffen werden. Das obige Beispiel gibt den Buchstaben W im Nachrichtenbereich aus. In Kombination mit length() und einer Schleife kann dann auf alle Zeichen zugegriffen werden:

String txt = "Oh, du schöne Welt!"; for (int i = 0; i < txt.length(); i++) { char c = txt.charAt(i); println(c); }

• Processing Reference: String.charAt()

Suchen

Um in einem Text nach einem anderen Text zu suchen, kann indexOf() verwendet werden. Damit kann die Position zum Beispiel eines Wort gefunden werden. Dies ist eine recht einfache und eingeschränkte Vorgehensweise; es gibt darüber hinaus noch viele weitere, komplexere Möglichkeiten, die dafür aber auch deutlich leistungsstärker sind.

String sentence = "Franz jagt im komplett verwahrlosten Taxi quer durch Bayern"; println(sentence.indexOf("Franz")); println(sentence.indexOf("jagt")); println(sentence.indexOf("Taxi"));

indexOf() gibt die erste Position des gesuchten Texts zurück, wenn dieser denn gefunden wurde. Im obigen Beispiel also für "jagt" die Positon 6, da das Wort im String sentence nunmal an dieser Stelle vorkommt.
Um herauszufinden, ob ein Wort überhaupt in einem Text vorkommt, kann man prüfen, ob der indexOf größer als 0 ist:

String sentence = "Franz jagt im komplett verwahrlosten Taxi quer durch Bayern"; if (sentence.indexOf("Taxi") > 0) { println("Taxi gefunden"); } if (sentence.indexOf("Berlin") > 0) { println("Berlin gefunden"); }

• Processing Reference: String.indexOf()

Texte einlesen

In Processing kann man recht einfach Texte aus Dateien einlesen. Mit Hilfe von loadStrings() wird eine Textdatei eingelesen und als String-Array zurück gegeben. Die Datei sollte dabei – wie Bilder, oder Schriften auch – im data-Ordner des Sketches liegen.

String[] rows = loadStrings("gedicht.txt");

Nun kann auf die einzelnen Zeilen mit einer Schleife zugegriffen werden:

String[] rows = loadStrings("gedicht.txt"); for (int i = 0; i < rows.length; i++) { String row = rows[i]; println(row); }

• Processing Reference: loadStrings()
• Processing Example: Load File 1 Lädt und stellt Positionen aus einer Textdatei dar

Weitere Informationen zu Textmanipulationen und Strings

• Programming from A to Z: String Gutes kleines Tutorial über weitere Stringmanipulationen
• Processing Reference: split() Trennt einen String in mehrere Teile auf
• Processing Reference: match() Bessere, aber komplexere Suchfunktion

Formen 3

Neben den grundlegenden Formen wie Linien, Rechtecke und Ellipsen haben wir bereits andere Formen (wie Dreiecke und Bögen) kennengelernt. Nun betrachten wir kurz (und für einige wiederholend) weitere Formen.

Kurve

curve(x0, y0, x1, y1, x2, y2, x3, y3);

Zeichnet eine Kurve.

• Processing Reference: curve()

Beziér-Kurve

bezier(x0, y0, x1, y1, x2, y2, x3, y3);

Zeichnet eine Bezierkurve. Diese Kurven werden durch zwei Anker- und zwei Kontrollpunkte definiert. Die ersten beiden Parameter spezifizieren den ersten (P₀) und die letzten beiden den zweiten Ankerpunkt (P₃); diese beiden Ankerpunkte sind Start- und Endpunkte der Kurve. Die mittleren Kontrollpunkte (P₁, P₂) setzen die Kontrollpunkte, die die Form der Kurve festlegen.

• Processing Reference: bezier()
• Processing Examples: Bezier

Freiformen

Um beliebige Formen zu erstellen, kann man die Eckpunkte der Form festlegen und diese von Processing verbinden lassen. Solch ein Eckpunkt heißt in der Computergrafik Vertex.

Nun können mit Vertices natürlich einfache Formen erstellt werden, etwa ein Rechteck:

// Rechteck beginShape(); vertex(25, 25); vertex(25, 75); vertex(75, 75); vertex(75, 25); vertex(25, 25); endShape();

Aber der Hauptzweck sind eben eher komplexere Freiformen:

// Polygon fill(255, 0, 0, 50); beginShape(); vertex(20, 70); vertex(40, 20); vertex(50, 40); vertex(80, 40); vertex(60, 70); vertex(40, 60); vertex(20, 70); endShape();

Alle vertex()-Punkte, die innerhalb beginShape() und endShape() stehen werden zu einer Form, und als solche gezeichnet. Dabei gibt es verschiedene Zeichenmethoden, die durch einen Parameter in beginShape() ausgewählt werden.

• Processing Reference: beginShape()
• Processing Reference: vertex()

texture()

Mit dieser Funktion können Bilder auf eine Freiform gelegt werden.

PImage img = loadImage("trees.png"); beginShape(); texture(a); vertex(20, 30, 0, 0); vertex(80, 5, 100, 0); vertex(95, 90, 100, 100); vertex(40, 95, 20, 30); endShape();

• Processing Reference: texture()