Satzlänge abbilden in Processing

Hinzugefügt am von Steffen Fiedler

Powered by Processing.js

Dies ist eine simple Textvisualisierung, welche die Länge der einzelnen Sätze durch entsprechend lange Rechtecke präsentiert. Zu Beginn teilen wir den gesamten Text txt mit split() an jedem Punkt und speichern das Resultat im Array sentences. Diese Variable ist global definiert und kann deswegen überall im Programm benutzt werden. Im setup() Block durchlaufen wir ebenfalls alle Sätze mit einer for-Schleife, um die Länge des Satzes mit den meisten Schriftzeichen in der Variable maxLength abzulegen. Wir benötigen diesen Wert für das spätere Einfärben der Balken.
Im draw() Teil nutzen wir die gleiche for-Schleife und legen jeden Satz einzeln im String sentence ab. Um alle Leerzeichen am Anfang und Ende des Satzes zu entfernen, rufen wir die trim() Funktion auf. 
String sentence = trim (sentences[i]);
Nach dem simplen Abbilden des Satzes mit text() ermitteln wir dessen länge. Ähnlich wie bei der Länge von Arrays greifen wir diese Eigenschaft mittels length ab; jedoch ist dies bei String eine Funktion und erfordert ein Klammerpaar: (). 
int sentenceLength = sentence.length ();
Zum Abschluss nutzen wir den Wert von sentenceLength und interpolieren ihn mittels map() um die Füllfarbe des Rechtecks abhängig von der Satzlänge zu bestimmen.

Der Sketch

// Array zum Speichern der einzelnen Sätze
String[] sentences;

// Variable zum Speichern der 
// maximalen Satzlänge
int maxLength = 0;

void setup () {
    size (550, 200);

    // Striche deaktivieren
    noStroke ();

    // Text zusammenfügen; aus Platz-
    // gründen mit += Dies könnte auch
    // ein kompletter String sein.
    String txt = "Sunny side up. Thats how fried eggs should be.";
    txt += "Yes. And we love to have eggs in the afternoon as well.";

    // Text am .-Zeichen trennen und einzelne
    // Teile im array 'sentences' ablegen
    sentences = split (txt, ".");
    
    // Laufe über alle Sätze
    for (int i=0; i < sentences.length; i++) {
        
        // Wenn Satz mind. 1 Zeichen hat
        if (sentences[i].length () > 0) {
            // Füge den . wieder an
            sentences[i] += ".";
            // Wenn Satz länger als 'maxLength'
            if (sentences[i].length () > maxLength) {
                // Setze 'maxLength' auf aktuelle Satzlänge
                maxLength = sentences[i].length ();
            }
        }
    }
}

void draw () {    
    // Hintergrund mit Grau füllen
    background (76);

    // Für jeden Satz im Text...
    for (int i=0; i < sentences.length; i++) {

        // Leerzeichen am Beginn und Ende 
        // des Satzes entfernen
        String sentence = trim (sentences[i]);

        // Wenn der Satz mind. 1 Zeichen besitzt
        if (sentence.length () > 0) {
            
            // Setze Textfüllfarbe
            fill (239);

            // Text darstellen
            text (sentence, 20, 30 + i * 18);

            // Satzlänge in der Variable 'sentenceLength' speichern
            int sentenceLength = sentence.length ();

            // Die Maus-x-Position auf einen Wert 
            // zwischen 1 und 3 interpolieren
            float mouse = map (mouseX, 0, width, 1, 3);
            
            // Füllfarbe anhand der Satzlänge definieren
            color c = color (map (sentenceLength, 1, maxLength, 0, 255), 170, 178);
            
            // Rechteck Füllfarbe anwenden
            fill (c);

            // Rechtecke (entsprechend der Satzlänge) zeichnen
            rect (20, 110 + i * 15, sentenceLength * mouse, 10);
        }
    }
}