Schriftzeichen verbinden #2 in Processing

Hinzugefügt am von Steffen Fiedler
Dieses Beispiel ist eine simple Textvisualisierung, basierend auf der vorherigen Version: Schriftzeichen verbinden #1. Auch hier werden alle Schriftzeichen eines bestimmten Typs miteinander verbunden, jedoch der eigentlich Text nicht dargestellt; wird sehen nur die resultierenden Kurven.

Um diese Funktionalität nicht nur auf eine Zeile anzuwenden, müssen wir uns nicht nur die aktuelle x, sondern ebenfalls die y-Position merken. Innerhalb jedes draw()-Blocks legen wir dafür zwei Variablen an: 
float x = 10;
float y = 10;
Die Werte 10 stehen dabei für die Startposition des imaginären Textes. Mittels einer for-Schleife laufen wir durch den gesamten Text und halten nach dem gewünschten Zeichen token Ausschau. Wir verändern Zeichen für Zeichen den Wert von x, indem wir die Breite des aktuellen Zeichens auf x addieren: 
x = x + charWidth;
Wird der Wert von x zu groß, setzen wir dies auf die Startposition zurück und verschieben die aktuelle Zeile um 20 Pixel nach unten: 
if (x + charWidth > width - margin) {
    x = margin;
    y = y + 20;
}

Der Sketch

String txt;
PFont font;
float margin = 10;

// Gesuchtes Zeichen
char token = 'a';

void setup () {
    size (590, 250);
    smooth ();
    
    // Laden des Textes aus einem Textdokument
    String[] fileContent = loadStrings ("my text file.txt");
    // Zusammenfügen der Zeilen (mit Umbruch)
    txt = join (fileContent, "\n");
    // Festlegen der Schrifteinstellungen
    font = createFont ("Arial", 10);
    textFont (font);
}


void draw () {
    background (76);
    
    // Variablen zum Ablegen des letzten
    // Vorkommens vom gesuchten Buchstaben
    float xPrevious = 0;
    float yPrevious = 0;
        
    // Variablen zum Ablegen der Position
    // vom aktuellen Buchstaben
    float x = 10;
    float y = 10;
    
    // Für jeden Buchstaben im Text...
    for (int i=0; i < txt.length (); i++) {
        
        // Buchstaben an Position 'i' im
        // Text auswählen
        char c = txt.charAt (i);
        
        // Ermittlung der Buchstabenbreite
        float charWidth = textWidth (c);
        
        // Sicherstellung das die Position 
        // des aktuellen Buchstabens nicht das
        // Sketchfenster verlassen würde
        if (x + charWidth > width - margin) {
            x = margin;
            y = y + 20;
        }
        
        // Wenn Buchstabe der Gesuchte ist...
        if (c == token) {
            // Zeichne einen Kreis an dessen Position
            fill (138, 170, 178);
            noStroke ();
            ellipse (x, y, 6, 6);
                   
            noFill ();
            stroke (239);
            // Verbinde aktuelles mit vorherigem
            // Vorkommen des gesuchten Buchstabens 
            curve (xPrevious, yPrevious - 40, xPrevious, yPrevious, x, y, x, y - 40);
            // Merke die aktuelle als vorherige Position
            // für nächstes Vorkommen
            xPrevious = x;
            yPrevious = y;
        }
        
        x = x + charWidth;
    }
}

void keyPressed () {
    // Wenn Taste gedrückt, ändere
    // den Wert des gesuchten Buchstabens
    token = key;
}