Mit Processing gelingen Künstlern ohne Progammierkenntnisse und Programmierern ohne Kunststudium ausdrucksvolle Grafiken. Zur schnöden Datenvisualisierung eignet sich das Framework aber auch.

Selbst aufwändige Computergrafiken scheitern heute kaum noch an der Rechenleistung. Es sind die Grafikbibliotheken und die mit ihnen verbundenen Einstiegshürden, die so manches Computergrafikprojekt im Keim ersticken. Verbreitete Bibliotheken wie Java2D, Cairo oder OpenGL verlangen dem Entwickler einiges ab. Neben dem Händchen für Gestaltung ist ein gerüttelt Maß an Einarbeitung nötig, bis die eigenen Kunstwerke auf dem Bildschirm Gestalt annehmen.

Processing macht’s leicht

Diese Hürde schien Ben Fry, Doug Benett und Casey Reas zu hoch. Grafikausgabe auf dem Computerschirm sollte nach ihrer Meinung so intuitiv funktionieren wie das Zeichnen mit dem Bleistift. Mit dieser Zielsetzung entwickelten sie das Processing-Framework [1]. Mit ihm sind zwei- oder dreidimensionale und sogar animierte Grafiken schnell entworfen.

Processing besteht aus einer schlanken Entwicklungsumgebung, der Sprache selbst und einer Laufzeitumgebung. Die Sprache lehnt sich an die Java-Syntax an, vereinfacht diese aber und stattet sie mit zusätzlichen, auf grafische Operationen zugeschnittenen Kommandos aus. Processing gehört damit zur zusehends populärer werdenden Familie der domänenspezifischen, also speziell auf einen eng umgrenzten Einsatzzweck zugeschnittenen Sprachen.

Die Nähe zu Java kommt nicht von ungefähr: Sowohl die Entwicklungs- als auch die Laufzeitumgebung sind in Java geschrieben, die Skizzen übersetzt Processing erst einmal in normale Java-Quellen und kompiliert sie dann zu Java-Programmen oder Applets. Diese laufen wie bei Java üblich auf allen Betriebssystemen und fast allen Browsern. Neben der sehr performanten Basissprache kann Processing bei Bedarf auf die ganze Armada bestehender Java-Bibliotheken zugreifen. Doch der besondere Reiz besteht darin, dass der Entwickler sich im Normalfall nicht um die darunterliegende Technik kümmern muss.

Java plötzlich künstlerisch wertvoll

Weil Processing die Einarbeitung in komplexe Techniken erspart, haben Grafikdesigner und Künstler das Framework längst für sich entdeckt. Die eingebaute Exportfunktion erzeugt mit einem Mausklick fertige Java-Applets für den Upload ins Netz. Neben technischen Diskussionen wie bei anderen Programmiersprachen gibt es deshalb Internetseiten, auf denen Anwender ihre Arbeiten vorstellen und über gestalterische Aspekte diskutieren [2]. Der Open-Source-Gedanke ist in der Processing-Community stark vertreten. Neben den fertigen Bildern oder Filmen gehört es auch zum guten Ton, die Quelltexte mit zu veröffentlichen.

Mit Processing lassen sich unterschiedlichste Typen von Visualisierungen umsetzen, beispielsweise ein interaktives Java-Applet zur Verteilung der Postleitzahlen in Deutschland [4]. Abbildung 1 zeigt ein Beispiel für die Verlinkung von Webseiten. Auch die Verteilung von Wörtern (Abbildung 2) im Alphabet kann Processing grafisch darstellen [5]. Viele weitere Anwendungen finden sich außer auf der Webpräsenz des Processing-Projekts selbst [2] auf Visual Complexity [6] oder in Ben Frys Vortrag auf der Wiesbadener See-Conference [7].

Abbildung 1: Processing kann auch Abstraktes anschaulich visualisieren, beispielsweise die Verlinkung von Websites als Graph – hier das Linux-Magazin.

Abbildung 2: Diese 3D-Visualisierungen zeigt die Verteilung englischer Wörter mit vier Buchstaben im Alphabet [5].

Zunehmend kommt Processing bei Installationen oder Medienkunst zum Einsatz. Abstrakte Sandgebilde wie in Abbildung 3 von Jared Tarbell [8] (Mitgründer der Kunsthandwerk-Börse Etsy) sind ebenso möglich wie die organischen Animationen der Medienkünstlerin Lia [9] oder die beeindruckenden Vogelschwärme [10] von Robert Hodgin, die für einen Spielfilm entstanden. Processing-Grafiken und -Animationen finden sich in den kuriosesten Umgebungen und sind auf den ausgefallensten Plattformen zu bewundern. Sogar der gute alte Commodore 64 von 1983 kann beispielsweise mit 980 Kilohertz Takt und 64 KByte Speicher hübsche, mit Processing berechnete Animationen abspielen [3].

Abbildung 3: Die Schönheit von Mathematik: Dieses Sandgebilde von Jared Tarbell entstand mit Processing, auf der Webseite [8] lassen sich über ein Java-Applet beliebig viele Variationen davon erzeugen.

Erste Anlaufstelle für Processing ist [1]. Hier steht die Umgebung für Linux verpackt bereit. Das Tar-Archiv enthält Beispiele, eine Dokumentation und ein Java-Runtime. Das Binary »processing« startet die Entwicklungsumgebung. Je nach Alter der eingesetzten Linux-Distribution ist dazu ein C++-Kompatibilitäts-Paket (Compat-libstdc++) nötig. Die Software zeigt bei deren Fehlen eine Warnung an.

Abbildung 4: Processing-Skizzen haben eine einheitliche Verzeichnisstruktur, die auch alle benötigten Dateien enthält. Nach einem Export sind dort die erzeugten Applets oder Standalone-Java-Anwendungen zu finden.

Ran an den Code

Die Entwicklungsumgebung enthält das komplette Handwerkszeug zum Umsetzen grafischer Ideen. Ein Projekt heißt bei Processing Skizze. Alle zu einer Skizze gehörenden Daten liegen in einem Verzeichnis. Dies dürfen neben den Processing-Quellen auch eingebundene Bilder, Fonts, 3D-Modelle oder zusätzliche Bibliotheken sein. Die Skizzenverzeichnisse liegen normalerweise unter »~/processing«. Diese Einstellung lässt sich jedoch verändern, wofür Processing eine grafische Oberfläche bereitstellt. Manche Einstellungen kann der Benutzer allerdings nur mit einem Texteditor in der Datei »~/.processing/preferences.txt« anpassen. Unter Linux muss er etwa den Pfad zur Java-Umgebung eintragen, den der Befehl »which java« ermittelt (Abbildung 5).

Alle Skizzen-Unterverzeichnisse haben eine einheitliche Struktur (Abbildung 4). Die eigentlichen Processing-Quellen tragen die Datei-Endung ».pde«, eingebundene externe Ressourcen liegen im Verzeichnis »data«. Die Exportfunktion erzeugt im Verzeichnis »applet« ein Java-Applet, das ein Webserver direkt ausliefern kann. Alternativ erzeugt Processing auch eine normale Java-Anwendung inklusive eines plattformspezifischen Starters. Sie liegen für Linux nach dem Kompilieren im Unterverzeichnis »application.linux«.

Einen lebendigen Eindruck des Umfangs von Processing vermitteln die Beispiele, die im Menü der IDE unter »File | Examples« auftauchen. Sie zeigen viele Aspekte der Sprache bis hin zu 3D-Animationen und können als Inspiration für eigene Skizzen dienen. Mit dem Startknopf in der Werkzeugleiste kompiliert der Bediener die Skizze und bekommt sie dann in einem separaten Fenster angezeigt.

Abbildung 5: Die Java-VM muss der Anwender unter Linux per Hand in die Datei »~/.processing/preferences.txt« eintragen.

“Hello World”

Listing 1 zeigt ein einfaches Beispiel für den Einstieg. Es erzeugt die Uhr aus Abbildung 6. Der Quelltext offenbart die Ähnlichkeit zu Java. Oft gebrauchte Grafik- und Mathematikfunktionen sind allerdings ohne langes Hangeln durch Klassenstrukturen zu erreichen. Auch um Hardware-bezogene Probleme wie Double-Buffering muss sich der Benutzer beim Zeichnen nicht kümmern, dies erledigt Processing automatisch.

Abbildung 6: Ein animiertes Uhr-Applet, das zudem einfache interaktive Features enthält, entsteht in Processing mit etwa 60 Zeilen Code.

Das Beispiel in Listing 1 verwendet den Continuous-Modus, der das Bild regelmäßig neu zeichnet, um auf Benutzereingaben zu reagieren oder um die Grafik zu animieren. In diesem Modus enthält der Quellcode die Methoden »setup()« und »draw()«. Die Initialisierungen stehen in der Methode »setup()«.

Wichtig ist hier vor allem der »size«-Aufruf. Er legt nicht nur die Größe fest, sondern auch den Ausgabemodus. Neben gewöhnlichen 2D-Zeichnungen auf Basis von Java2D gibt es einen geschwindigkeitsoptimierten Modus ohne Antialiasing (P2D) und einen 3D-Modus mit und ohne OpenGL-Beschleunigung (OPENGL und P3D). Je nach Ausgabemodus variieren die möglichen Zeichenbefehle. Nach der Initialisierung ruft Processing in regelmäßigen Abständen die »draw()«-Methode auf. Diese enthält die Befehle zum Zeichnen der einzelnen Frames. Sie legt auch fest, wie Processing mit Benutzereingaben umgehen soll.

01 PFont ef;
02 float radius;
03 
04 // Wird einmal beim Start aufgerufen
05 void setup() {
06 
07   size(400,400, JAVA2D); // Anwendungsgroesse und Rendermodus
08 
09   frameRate(3); // Bildwiederholfrequenz
10   cursor(CROSS); // Kreuz als Mauscursor
11   smooth(); // Antialiasing
12   textAlign(CENTER); // Texte zentriert
13   noStroke();// keine Linie um Flaechen
14 
15   radius=150;
16   ef = loadFont("URWPalladioL-BoldItal-48.vlw");
17   textFont(ef,17); // Font waehlen
18 
19 }
20 
21 // Wird entsprechend Framerate aufgerufen
22 void draw() {
23 
24   background(200);
25 
26   pushMatrix(); // Translationsmatrix speichern,
27      // wird durch popMatrix wieder aktuell
28 
29   translate(width/2.0, height/2.0); // Verschieben des Koordinatenursprungs ins Zentrum
30 
31   // Kreise fuer weiche 3D Kante
32   int dr;
33   for (dr=50;dr>=20;dr-=3) {
34     fill(120+3*dr);
35     ellipse(0,0,2*(radius+dr),2*(radius+dr));
36   }
37   fill(250);
38   ellipse(0,0,2*(radius+dr),2*(radius+dr));
39 
40   // Schleife ueber die Winkel
41   for ( int i = 0; i < 60; i++ ) {
42 
43     float alpha = i / 60.0*TWO_PI;
44     float posx = sin(alpha)*radius;
45     float posy = -cos(alpha)*radius;
46 
47     if ( i == second()  ) {
48       // Die aktuelle Sekunde
49       fill(255,20,20); // Rot
50       text(i, posx,posy);
51     }
52     else if (i%5==0) {
53       // Jede 5. Sekunde
54       fill(60); // Dunkelgrau
55       text(i, posx,posy);
56     }
57 
58     if ( i == minute() ) {
59       pushMatrix(); // Transformation speichern
60       rotate(alpha); // Alles wird mit alpha rotiert
61       fill( 90); // Fuellfarbe setzen
62       quad(0,-5, -10,-30, 0,-130, 10,-30); // Polygon
63       popMatrix(); // Transformation zuruecksetzen
64     }
65 
66     int  h = hour(); // Gibt Stunden von 0-23,
67     h = h >= 12 ? h %12 : h; // Stunden auf 0-11
68     int me = h*5 + (int) (minute()/12.0);
69     if ( i == me ) {
70       pushMatrix();
71       rotate(alpha);
72       fill( 120); // Fuellfarbe setzen
73       quad(0,-5, -10,-30, 0,-80, 10,-30);
74       popMatrix();
75     }
76   }
77 
78   // Kleiner Kreis ueber Ziffernblaettern
79   fill(90);
80   ellipse(0,0,20,20);
81 
82   popMatrix(); // Koordinatensystem wieder nach links oben
83 
84   // Bei gedrueckter Maus Datum anzeigen
85   if ( mousePressed) {
86     fill(255,20,20); // Rot
87     text("Datum " + day() + "." + month() + "." + year(),mouseX, mouseY-10);
88   }
89 
90 }

Malen nach Zahlen

Die Uhr enthält neben Grafikprimitiven wie Kreisen, Rechtecken und Linien auch Schrift. Damit die Grafik auf allen Plattformen gleich ausfällt, bettet die Skizze die Schriften als Bitmap ein. In der Entwicklungsumgebung gibt es dafür die Funktion »Tools | Create Font«, die auf dem Rechner vorhandene Schriften im »data«-Verzeichnis für den Export sammelt. Die »loadFont()«-Funktion lädt sie dann zur Laufzeit.

Die »draw()«-Funktion in Zeile 22 zeichnet die Uhr, die »setup()«-Funktion in Zeile 5 definiert eine Framerate von 3 Hz. »translate()« in Zeile 29 verschiebt das Zentrum des Koordinantensystems von der Defaultposition links oben in den Mittelpunkt der Skizze. Der Rand des Ziffernblatts entsteht aus mehreren Ellipsen in verschiedenen Grautönen.

Eine von 0 bis 60 durchlaufende Schleife malt die Zahlen und die Zeiger darauf. Dabei liegen die Zeigerspitzen zunächst immer an derselben Stelle, für ihre Bewegung sorgt das vorher ausgeführte »rotate()«. Damit sich dies nicht mit anderen Transformationen überschneidet, speichert »pushMatrix()« die bisher angewandten Transformationen zwischen, »popMatrix()« stellt sie wieder her.

Viele Processing-Anwendungen reagieren auf Benutzereingaben, die der Entwickler in Variablen wie »mousePressed«, »mouseX« und »mouseY« abfragt. Das Beispiel enthält bloß ein einfaches interaktives Feature: Es zeigt bei einem Mausklick auf die Uhr das Datum an.

Der Anfang ist gemacht

Das einfache Beispiel reißt den Funktionsumfang von Processing bloß an. Der Sprachkern kennt noch viele weitere Zeichenbefehle. Processing unterstützt außerdem die Definition eigener Klassen und den Verweis auf externe Bibliotheken oder Grafikressourcen. Es liest auch externe Grafiken oder Daten für die Visualisierung aus Datenbanken oder Webservices ein.

Mit der Referenzdokumentation und den mitgelieferten Beispielen fällt die Einarbeitung jedoch leicht. Egal ob für die Visualisierung von Daten, für grafische Spielereien oder generative Computerkunst: Processing bietet für viele eine flache Lernkurve und eine gute Performance. Die aktive Benutzergemeinde hilft nicht nur bei technischen Problemen weiter, oft lassen sich eigene Ideen auf Basis schon bestehender Quelltexte von anderen leichter umsetzten. Obwohl Processing erst seit Ende November den Versionsstempel 1.0 trägt, ist es schon seit geraumer Zeit im Einsatz.

Deshalb gibt es neben vielen Beispielen in der Entwicklungsumgebung und im Internet bereits eine gute Handvoll Bücher: Daniel Shiffmans “Learning Processing” enthält eine Schritt-für-Schritt-Einführung, die Beispiele sind auf der Webseite [11] veröffentlicht. Ben Frys Buch “Visualizing Data” geht über Processing hinaus. Es erläutert außer der Visualisierung mit Processing auch, wie sich externe Daten beispielsweise aus einer Datenbank oder XML-Dateien einlesen lassen. Auch das Einbinden von Processing in Swing-Oberflächen erläutert der Autor.

Dank der bequemen Exportfunktion lassen sich Processing-Programme leicht als Applet oder Standalone-Programm verteilen. Wer ohne Java-Plugin auskommen möchte, sollte sich John Resigs Javascript-Port von Processing ansehen [12]. Dieser benötigt allerdings das »Canvas«-Element des noch nicht veröffentlichten HTML-5-Standards. John Resig empfiehlt daher den Einsatz der SVN-Version von Firefox, was die Massentauglichkeit im Moment noch einschränkt. (pkr/dko)