Schriftzeichen verbinden #1 in Processing

Hinzugefügt am von Steffen Fiedler
Dieses Beispiel läuft Zeichen für Zeichen durch einen gegebenen Text und verbindet alle Buchstaben eines bestimmten Typs.

Zu Beginn des draws werden zwei float Variablen x und lastEx festgelegt. x steht für die aktuelle Zeichenposition an welcher nacheinander die einzelnen Buchstaben positioniert werden. lastEx steht für die Position des letzten e's – welche wir mit einer Bezierkurve verbinden. 
float x = 0;
float lastEx = -1;
Im nächsten Schritt gehen wir mit einer for-Schleife durch alle Zeichen im Text und überprüfen, ob das aktuelle ein gesuchtes 'e' ist oder nicht. 
for (int i=0; i < myText.length (); i++) {
    if (c == searchChar) {
Ist dies der Fall, Zeichnen wir eine Bezierkurve zur letzten lastEx-Position (bzw. wenn nicht, merken wir uns die aktuelle als Start). Anderenfalls wird der Buchstabe im letzten Schritt einfach dargestellt und der Wert von x für die Position den nächsten Buchstabens um die Breite des Aktuellen erhöht.

Der Sketch

// String für den Text
String myText;
// PFont für die Schriftart
PFont font;
// Schriftgröße als Integer
int fontSize = 16;
// Breite des Randes
float margin = 14;
// Gesuchter Buchstabe
char searchChar = 'e';

void setup () {
    // Grundlegende Sketch-Einstellungen
    size (550, 200);
    smooth ();
    
    // Generiere die Schrift 'Arial';
    // muss dafür im System aktiv sein
    font = createFont ("Arial", fontSize);
    
    // Setze 'font' als Standardschrift
    // für alle Aufrufe von 'text()'
    textFont (font);
    
    // Befülle die Variable 'myText' mit Inhalt
    myText = "So perhaps a \"luck\" gene that somehow confers a quantum mechanical";
}

void draw () {
    // Hintergrund mit grau füllen
    background (76);
    
    // Positionierungsvariablen
    // initialisieren...
    float x = 0;
    float lastEx = -1;
    
    // Variable 'base' zur y-Positionierung
    float base = height / 2 - fontSize;
    
    // Für jeden einzelnen Buchstaben im Text...
    for (int i=0; i < myText.length (); i++) {
        
        // Wähle Zeichen an Position 'i' aus
        char c = myText.charAt (i);

        // Wenn Zeichen ein 'e' ist...
        if (c == searchChar) {
            
            // Wenn dies nicht das erste 'e' ist...
            if (lastEx > -1) {
                
                // Berechne die Entfernung zwischen
                // diesem und dem vorigen 'e'
                float space = x + margin - lastEx;
                space = space / 2;
                
                // Zeichne Kurve zwischen beiden 'e's
                stroke (138, 170, 178);
                strokeWeight (2);
                noFill ();
                bezier (
                    lastEx, 
                    base + 3, 
                    lastEx, 
                    base + 3 + space, 
                    x + margin, 
                    base + 3 + space, 
                    x + margin, 
                    base + 3
                );
            }
            // Merke die Position des akuellen
            // 'e's als 'lastEx'
            lastEx = margin + x;
        }
        
        // Füllfarbe abhängig vom Buchstaben
        if (c == searchChar) {
            fill (229, 90, 38);
        }else{
            fill (239);
        }
        noStroke ();
        // Buchstaben darstellen
        text (c, margin + x, base);
        
        // Den Zeichen-'cursor' nach 
        // rechts verschieben...
        x = x + textWidth (c);
    }
}

void keyReleased () {
    searchChar = key;
}