Easy Programming

Processing schafft etwas, was gewöhnliche Programmiersprachen wie Java, C und C++ nicht können – es produziert schnell ansehnliche Resultate. Wer schon einmal versucht hat, mit OpenGL einen rotierenden Würfel zu programmieren, fand sich wahrscheinlich schnell in einer stundenlangen Fehlersuch-Orgie wieder. Fehlende Bibliotheken und falsch deklarierte Variablen machen dem Hobby-Programmierer das Leben schwer.

Processing will genau das ändern: Es richtet sich etwa an Künstler, die Ideen haben, aber keine Ahnung vom Programmieren. Und es richtet sich an Leute, die ihre Daten einfach optisch aufbereiten wollen, ohne auf einschläfernde Diagramme und eintönige Mehrfarbtorten zurückzugreifen. Das Projekt Code-Swarm [1] verwendet Processing beispielsweise, um die Entwicklung diverser Open-Source-Projekte über den Lauf der Zeit zu visualisieren. Die faszinierenden Ergebnisse erinnern an einen Bienenstock, den mal viele aufgeregte, mal eine handvoll fleißige Bienen zum Wachsen bringen.

Die in Java geschriebene Software macht es Ihnen einfach: Sie schreiben ein Programm, drücken auf Play und dann tut der Code – oder nicht. Im zweiten Fall gibt es vergleichsweise verständliche Rückmeldungen für die Fehlersuche. Wollen Sie das Endprodukt im Netz zeigen, spuckt die Software per Knopfdruck ein fertiges Java-Applet aus, das Sie einfach auf Ihren gemieteten Webspace respektive Webserver kopieren.

Zwar wird Processing, das um 2001 herum in den MIT-Labs entstand, gern mit Flash verglichen – allerdings handelt es sich im Gegensatz zu Adobes Produkt um Open-Source-Software. Anstelle des Flash-Plugins brauchen die Betrachter lediglich ein Java-Plugin für den Browser, das sich (meist) sehr zügig installieren lässt.

Installation

Um die 3D-Fähigkeiten der Software zu nutzen, brauchen Sie entweder einen installierten 3D-Treiber für die Grafikkarte, oder Sie verwenden die in die Java-Anwendung eingebaute Software-3D-Engine P3D. Letztere braucht etwas mehr Ressourcen als OpenGL – sie hilft aber, wenn unter Linux ein funktionierender 3D-Treiber für die Grafikkarte fehlt.

Die Software selbst finden Sie auf der Heft-DVD oder laden Sie von der Webseite des Projekts [2] herunter. Entpacken Sie das TGZ-Archiv in einen Ordner im Home-Verzeichnis. Öffnen Sie eine Konsole, wechseln Sie in das neu entstandene Unterverzeichnis und geben Sie ./processing ein, um die Anwendung zu starten.

Nach dem Start erscheint ein leeres Feld, in das Sie den Code eingeben (Abbildung 1). Probieren Sie es doch gleich mal aus: Tippen Sie das Programm aus Listing 1 in das Fenster und drücken Sie auf das Icon mit dem Dreieck oben links. Sie sehen dann die Figur aus Abbildung 2 (links).

Abbildung 1: Die paar Zeilen Code in Listing 1 genügen, um mit Processing eine einfache Figur zu zeichnen.

size(200, 200);
background(255);
stroke(0);
noFill();
smooth();
for(int i = 0; i < 200; i += 10) {
  ellipse(100, 100, i, i);
}

Nun sollte sich ein kleines Fenster öffnen, das eine Reihe konzentrisch angeordneter Kreise abbildet. Eine Erklärung der einzelnen Funktionen folgt gleich – Sie können diese aber auch selbst nachschlagen. Dazu klicken Sie in der Processing-GUI auf den Menüpunkt Help | Reference. Die Befehlsreferenz erklärt kurz und knapp, was die einzelnen Funktionen bewirken. Wer es anschaulicher mag, wählt unter dem Menüpunkt File | Examples eines der zahlreichen Beispielprogramme aus, die den Umgang mit Processing anschaulich demonstrieren, wobei im Code einige Anmerkungen stehen. Nicht zuletzt gibt es Processing-Bücher, empfehlenswert ist etwa der Wälzer von Ira Greenberg [3], der sich auch explizit an Künstler und Nicht-Programmierer richtet.

Nun aber zum Beispielprogramm von Listing 1. Das öffnet in den ersten beiden Zeilen zunächst eine 200 mal 200 Pixel große Arbeitsfläche mit einem weißen Hintergrund (background(255)). Geben Sie in der Klammer nur einen Wert an, wählen Sie zwischen 255 Grautönen von 0 (Schwarz) bis 255 (Weiß). Setzen Sie hingegen drei durch ein Komma getrennte Werte ein, stehen diese für den sRGB-Farbraum. Der Eintrag background(255,0,0) färbt den Hintergrund zum Beispiel knallrot. Nach demselben Schema setzen Sie einen schwarzen Pinsel ein (stroke(0)).

Die Funktion noFill() sorgt dafür, dass Processing die Figuren nicht ausfüllt – andernfalls würde der größte Kreis alle anderen überdecken. Für die glatten Kanten der Kreise sorgt ein Anti-Aliasing-Effekt, den Sie über smooth() aktivieren, das sich auf alle nachfolgenden Figuren auswirkt. Abschließend folgt eine for()-Schleife, die eine bestimmte Funktion so oft ausführt, bis eine in der Schleife definierte Bedingung eintritt (hier: wenn i den Wert 200 erreicht).

In der Schleife wird die Ganzzahl-Variable i zunächst auf Null gesetzt (int i =0) und dann in 10er-Schritten hochgezählt (i+=10). So lange i unter 200 (i < 200) bleibt, läuft die Schleife weiter – erreicht sie den Wert, endet sie. Jeder Durchgang führt dabei die Funktion ellipse() in Zeile 7 aus: Sie zeichnet einen Kreis, dessen Eckdaten in der Klammer stehen. Die Werte 100,100 platzieren den Mittelpunkt des Kreises in der Mitte der 200 x 200 Pixel großen Fläche. Die zwei Variablen i bestimmen jeweils den vertikalen und horizontalen Durchmesser des Kreises. Da i in 10er-Schritten wächst, malt Processing erst einen Kreis mit 10 Pixeln Durchmesser, dann einen mit 20 Pixeln, und so weiter.

Um den Kreis kreisen

Kleine Veränderungen entfachen beim Programmieren häufig große Wirkungen. Ändern Sie das zweite i in der Klammer hinter ellipse und ersetzen es durch 100, also:

ellipse(100, 100, i, 100)

dann transformieren Sie den Kreis in eine Ellipse (Abbildung 2). Während sich der horizontale Durchmesser dank des verbliebenen i ständig vergrößert, bleibt der vertikale konstant bei 100 Pixeln.

Abbildung 2: Ändern Sie nur einen kleinen Parameter, wirkt sich das deutlich auf die Figur aus.

Im nächsten Schritt bringen Sie den Zufall ins Spiel. Tauschen Sie die for()-Schleife aus Listing 1 gegen jene aus Listing 2 aus.

for(int i = 0; i < 200; i += 10) {
  float r = random(200);
  ellipse( 100, 100, r, 100);
}

Die neue Schleife erhält mit der Zufallsvariable r ein neues Element. Bei jedem Durchgang erzeugt die Zeile float r = random(200); eine Gleitkommazahl (float) zwischen 0 und 200 und legt sie in der Variablen r ab. Diese sich ständig ändernde Zahl verursacht in der gezeichneten Figur die unregelmäßigen horizontalen Abstände (Abbildung 3). Noch krummer wird es, wenn Sie die Schleife um eine weitere Zufallszahl bereichern (Listing 3) und auch den vertikalen Durchmesser dem Zufall überlassen (Abbildung 4). Die Figur sieht zwar schon etwas räumlich aus, dreidimensional ist sie aber noch nicht.

Abbildung 3: Über zufällig generierte Zahlen bringen Sie etwas Unruhe in strenge geometrische Figuren…

Abbildung 4: …setzen Sie zwei Zufallszahlen ein, erhält die Figur allmählich dreidimensionale Züge.

for(int i = 0; i < 200; i += 10) {
  float r = random(200);
  float s = random(200);
  ellipse( 100, 100, r, s);
}