Netzradar

Website-Visualisierung mit Processing programmieren

Praxis & Tipps | Praxis

Grafische Darstellungen enthüllen verborgene Zusammenhänge zwischen komplexen Daten – programmiert man sie selbst, kann man die Visualisierung beliebig dem eigenen Informationsbedürfnis und Geschmack anpassen. Mit der kompakten Programmierumgebung Processing bleibt der Aufwand überschaubar.

Aufmacher

Die Webseite des Heise-Newstickers (www.heise.de) hebt eine Top-Meldung groß heraus und führt darunter alle Nachrichten streng nach Erscheinungszeitpunkt auf, sodass die jüngste stets oben steht. Dieses Prinzip ist leicht zu verstehen und übersichtlich, verbirgt jedoch eine Menge Detailinformationen, etwa wie lang der Text der Meldung ist, auf welchem der zahlreichen News-Kanäle (Channel) wie heise Security, Open oder Netze sie ebenfalls läuft und vor allem, ob es sich um ein ganz neues Thema handelt oder um eines, das die Redaktion von heise online schon länger begleitet. In diesem Fall enthält die Nachricht gewöhnlich diverse Links zu älteren Meldungen oder gar eine Linkliste am Ende. All dies bekommt man normalerweise aber erst zu sehen, wenn man die Meldung im Browser geöffnet hat.

Wer sich für solche Zusammenhänge zwischen Nachrichten interessiert, kann den Newsticker jetzt mit Hilfe einer alternativen Visualisierung inspizieren, die wir als Beispiel für eine grafische Umsetzung Marke Eigenbau mit der einfachen und kostenlosen Programmierumgebung Processing [1] umgesetzt haben. Die Meldungen von der Tickerseite erscheinen auf einer Art Radarschirm als kleine Kreise. Deren Füllfarbe kodiert den Newsticker-Channel, der Durchmesser ist proportional zur Textlänge und Verbindungslinien zeigen Links zwischen einzelnen Nachrichten an. Fährt man den Mauszeiger über eine Meldung, erscheint deren Titel, ein Rechtsklick öffnet sie im Browser.

Das fertige, ausführbare Java-Programm für Windows, Mac OS X und Linux sowie der Quellcode stehen frei zur Verfügung (alle Downloads siehe Soft-Link). Wenn Sie unser Newsradar nur benutzen wollen, laden Sie sich das Archiv herunter, packen es aus, wechseln in den Ordner application.xx, wobei xx für Ihr Betriebssystem steht, und starten dort Newsradar.exe beziehungsweise Newsradar.app für Mac OS X oder die endungslose Datei Newsradar für Linux. Wer einen Blick in den Code werfen oder mit einzelnen Parametern experimentieren will, installiert sich die kompakte Processing-Programmierumgebung und kopiert einfach den Ordner Newsradar komplett in den Ordner namens Processing, den man auf Windows-Rechnern gewöhnlich unter „Dokumente“ oder „Eigene Dateien“ findet.

Unser Code kann als Inspiration für eigene Programmierprojekte dienen, Sie dürfen ihn aber auch gerne Ihren Vorstellungen anpassen, umbauen, oder Stücke daraus weiterverwenden. Denn viele der Überlegungen und Design-Entscheidungen beim Bau des News-radars lassen sich auf andere Visualisierungen von Daten aus dem Netz oder von Webseiten übertragen.

Würde man die Nachrichten zufällig auf dem Schirm platzieren, zögen sich die Links kreuz und quer über die Bildfläche und würden die Zusammenhänge eher verschleiern als enthüllen. Abhilfe schafft ein pfiffiger Layout-Algorithmus.

Für die Visualisierung von Netzwerkgraphen greifen viele Programmierer gerne zu einem sogenannten force directed layout, wörtlich: einer kraftgelenkten Anordnung. Die Idee dahinter: Man weist seinen Objekten eine Masse zu, definiert zwischen ihnen eine abstoßende Kraft, wie sie beispielsweise unter Elektronen herrscht, und beschreibt Verbindungen ausgewählter Objekte als Spiralfedern mit bestimmter Federkonstante (Härte) und Ruhelänge. Alles zusammen wirft man in eine einfache Physiksimulation. Dank der Abstoßung verteilen sich die Objekte möglichst gleichmäßig im Raum, wobei die Federn dafür sorgen, dass zusammen bleibt, was verbunden ist.

Solche kraftgesteuerten Graphen bringen oft ein ansprechendes Layout hervor, selbst wenn man die Ausgangspositionen der Objekte zufällig wählt. Und sie sehen gut aus, gerade weil sie an die physikalische Welt erinnern und sich ähnlich einem realen Gebilde aus Bällen und Sprungfedern verhalten. Allerdings haben sie ein paar Nachteile: Eine perfekte Anordnung liefern sie nur bei recht einfachen Strukturen oder durch Zufall – je mehr Verbindungen im Spiel sind, umso wahrscheinlicher zeigen sich kreuzende Linien oder hartnäckig ineinander verklemmte Objekte. Außerdem kommen große Graphen selten ganz zur Ruhe – mit etwas Pech schaukeln sie nach einer minimalen Störung chaotisch auf, wenn man nicht genügend Dämpfung und Reibung einbaut. Zudem braucht der Algorithmus eine Menge Rechenpower. Und seine Implementierung erfordert viel Hirnschmalz.

Gegen das letzte Problem gibt es zum Glück etwas aus dem Netz: Jeffrey Traer Bernstein stellt speziell für Processing eine Bibliothek namens traer.physics zur Verfügung, dank derer man mit wenigen Codezeilen Objekte (Particle genannt) erzeugen und mit Federn sowie Anziehungs- oder Abstoßungskräften koppeln kann. Eine grafische Darstellung liefert er allerdings nicht mit. Das ist nicht schlimm, da man gerade bei Processing schon mit wenig Aufwand hübsche grafische Effekte zaubern kann.

Das Newsradar bildet alle Nachrichten als Partikel eines Traer-Partikelsystems ab. Diese weisen alle eine identische Masse auf und stoßen sich untereinander mit geringer Kraft ab, damit sich möglichst keine zwei Nachrichten am gleichen Ort aufhalten – eine Kollisionserkennung bietet die verwendete Bibliothek nicht. Elastische Sprungfedern ziehen verlinkte Nachrichten zusammen.

Die Meldungen erscheinen auf einem runden Anzeigefeld, wobei aktuelle Nachrichten innen und ältere zum Rand hin angeordnet werden. Realisiert wird dies über ein fixiertes und unsichtbares Partikel namens center im Zentrum des Radarschirms, das als Ankerpunkt der Darstellung dient. Zwischen diesem und jedem Nachrichtenpartikel dient eine sehr harte Feder als Abstandhalter (spacer). Ihre Ruhelänge ergibt sich aus dem Alter der Nachricht in Minuten. Die Skala, nach der sich die Länge des Abstandhalters berechnet, ist logarithmisch, was für eine brauchbare zeitliche Auflösung für die jüngere Vergangenheit sorgt, gleichzeitig aber verhindert, dass die über zwölf Jahre alten Nachrichten aus der Anfangszeit des Newstickers jenseits des Fensterrandes verschwinden.

Illustration
Harte Federn dienen als Abstandhalter, die Nachrichten mit zunehmendem Alter weiter vom Zentrum des Newsradars wegrücken. Hier sind sie rot hervorgehoben, im fertigen Programm sieht man sie nicht.

Zwar überwacht das Newsradar nur die Meldungen des Tickers in der „klassischen“ Ansicht ohne Topmeldung unter www.heise.de/newsticker/classic – die sind in der Regel keine 24 Stunden alt. Allerdings legt der unscheinbare Parameter DEPTH im Programm fest, bis zu welcher Rekursionsstufe das Programm Links auf andere Meldungen berücksichtigen soll: Bei 0 werden sie ignoriert, bei 1 erscheinen auch alle unmittelbar verlinkten Nachrichten auf dem Schirm, bei 2 auch jene, auf welche die verlinkten selbst verlinken und so weiter. Da gerade Meldungen zu heißen Themen wie Vorratsdatenspeicherung oder Windows 7 umfangreiche Linklisten enthalten, führt eine Rekursionstiefe von mehr als 2 schnell zu einer unübersichtlichen Darstellung. Die fertig ausführbaren Programmversionen von der Webseite arbeiten daher mit DEPTH=1.

Wer den Quellcode des Newsradars in Processing öffnet, hat freien Zugriff auf alle Parameter und Konstanten des Programms und kann beispielsweise die Rekursionstiefe verändern oder die URL der Quellseite gegen jene der 7-Tage-Übersicht tauschen. Hierfür braucht man keine Programmierkenntnisse – für den tieferen Einstieg in den Code ist allerdings etwas Erfahrung mit Java oder Processing von Vorteil.

Nach Start des Code-Editors klickt man auf den Menüeintrag File/Sketchbook/Newsradar. Es öffnen sich vier einzelne Programmdateien mit je einem Karteireiter. Newsradar enthält das Hauptprogramm, News definiert die gleichnamige Klasse, unter drawHelpers findet man Hilfsfunktionen für die grafische Darstellung und unter processSource solche, die beim Aufbereiten der Webseiten nützlich sind. Eine neue Datei erzeugt man per Klick auf den Pfeil rechts in der Reiterleiste. Die Aufteilung in solche Teildateien eines Programms dient nur der Übersicht, intern schreibt Processing deren Inhalt einfach hintereinander, bevor der Compiler aktiv wird. Das bedeutet, dass man auf global definierte Variablen aus dem Hauptprogramm ohne Umstände auch von anderen Codeblättern aus zugreifen kann.

Eine Klasse funktioniert wie eine Schablone, nach der ein Programm beliebig viele Objekte mit individuell unterschiedlichen Werten, aber von identischem Typ erzeugen kann. Die Klasse News fasst in ihren Variablen alle Informationen über eine Tickermeldung zusammen, die im weiteren Programmverlauf wichtig sind. Dazu zählt beispielsweise die eindeutige laufende Nummer (id) der Nachricht, die sich am Ende der URL findet, ihr Titel, das Alter und der Ticker-Channel, auf dem sie läuft. Statt eine Positionsangabe zu speichern, verweist News direkt auf ein Particle namens pos, dessen x- und y-Koordinate sich bei Bedarf abfragen lassen.

Ihre Links verwalten News-Objekte in einer sogenannten HashMap. In der Processing-Dokumentation sucht man diese Klasse vergeblich, denn es handelt sich um eine Leihgabe aus dem Java-Standardpaket java.util. Aus dem Java-API kann man sich hemmungslos bedienen, muss allerdings darauf achten, im Rahmen von Java 1.4 zu bleiben, da Processing auf diese ältere Version aufgebaut ist. Die Zeile import java.util.*; ganz am Anfang des Hauptprogramms sorgt dafür, dass man die HashMap und anderes Nützliche aus dem Paket verwenden kann.

Das Newsradar verwaltet die Nachrichten von heise online in Form von Objekten der Klasse News. Wo eine Meldung grafisch dargestellt wird, ermittelt ein Partikelsystem, das physikalische Phänomene wie Federwirkung, Masse und Abstoßung simuliert.

Eine HashMap speichert Objekte (values) beliebigen Typs. Auf die greift man gezielt über einen eindeutigen Schlüssel (key) zu, der ebenfalls von beliebigem Typ sein kann. Die einzelne News verwendet die laufende Nummer einer Nachricht, auf die sie verlinkt, als Schlüssel, und die Spiralfeder aus dem Partikelsystem, die den Link darstellt, als Wert.

Den meisten Code der Klasse nimmt der Konstruktor ein, die Funktion, die neue News-Objekte initialisiert. Zwar ist es geradezu lächerlich einfach, den Quellcode einer Webseite ins eigene Processing-Programm zu bekommen: loadStrings(String url) liefert ein Array aus Strings zurück, die jeweils eine Zeile der HTML-Beschreibung erhalten. Allerdings muss der Konstruktor anschließend die relevanten Informationen mühsam einzeln herausklauben. Ein Beispiel:

if (lines[i].indexOf("<meta name=\"fulltitle\"") != -1){
title = getContent(lines[i]);
}

Die erste Zeile prüft, ob die i-te Zeile das Meta-Tag „fulltitle“ enthält, indem sie nach dem Index dessen ersten Auftauchens in der Zeile fragt – kommt es gar nicht vor, ist das Ergebnis –1. Falls doch, wird die Hilfsfunktion getContent() bemüht, die von einer HTML-Zeile wie

<meta name="fulltitle" content="Schlagzeile" /> 

nur die Schlagzeile übrig lässt.

Viele der Hilfsfunktionen sind der Quelle auf den Leib geschneidert und nutzen Eigenheiten von heise online, etwa das dort verwendete Datumsformat. Will man das Newsradar für andere Webseiten einsetzen, fallen umfangreiche Änderungen an. Auch eventuelle Umbauten auf heise online werden das Programm wahrscheinlich erst mal außer Gefecht setzen – das ist der Preis für die hemdsärmelige Ausbeutung des Webseiten-Schemas. Reguläre Ausdrücke oder ausgewachsene HTML-Parser sind flexible Alternativen, verursachen aber auch mehr Programmieraufwand.

Nachdem der Quelltext der Webseite grob vorsortiert und in einen String namens longtxt gepackt wurde, erledigt die Funktion refineText() die Feinarbeit. Sie geht die verbliebene Zeichenkette Buchstabe für Buchstabe durch, schreibt den reinen Nachrichtentext in die Variable txt und sucht nebenbei nach HTML-Tags. Diese werden herausgeschnitten und weggeworfen, falls es sich dabei nicht um Links zu weiteren Newsticker-Meldungen handelt. Falls doch, wird der Link in linksTo gespeichert, allerdings vorerst mit dem Wert null – die Feder gibt es noch nicht. Anschließend prüft die Funktion, ob die maximale Rekursionstiefe fürs Verfolgen von Links ausgeschöpft ist und ob die verlinkte Nachricht bereits im Newsradar vorhanden ist. Falls beides nicht zutrifft, initialisiert der Konstruktor selbst das benötigte News-Objekt für die verlinkte Nachricht.

Das Hauptprogramm unter dem Karteireiter Newsradar fasst zunächst alle erdenklichen Stellschrauben der Visualisierung in Parameter: etwa die Elastizität der Link-Federn STRENGTH, die Zahl der Minuten, die bis zur nächsten Prüfung der Quellseite vergehen soll, REFRESH, oder die Stärke der Grundabstoßung REPULSE. Sie sind im Code ausführlich kommentiert. Einige Parameter hängen auch direkt von anderen ab: So errechnen sich der Maßstab SCALE für die logarithmischen Werte und die Ruhelänge der Linkfedern LINKRL direkt aus der Fenstergröße SIZE.

Die Konstante TICK legt fest, ob das Partikelsystem in Echtzeit (bei einem Wert von 1.0) oder in Zeitlupe (etwa bei 0.5) laufen soll. Sind viele Nachrichten und damit viele Kräfte im Spiel, drückt der Rechenaufwand auch auf schnellen Computern die Zahl der berechneten Momentaufnahmen des Partikelsystems erheblich. Durch diese gröbere zeitliche Rasterung entwickeln manche Objekte enorme Fluchttendenzen, sodass der Graph förmlich zu explodieren scheint und sich Nachrichten auf Nimmerwiedersehen hinter die Fenstergrenzen verabschieden wollen. Eine angemessene Zeitlupenschaltung verhindert dies. Da mit umso mehr Nachrichten zu rechnen ist, je höher man die Rekursionstiefe für Links DEPTH wählt, errechnet sich der Verzögerungsfaktor umgekehrt proportional daraus: Bei DEPTH=0 ergibt sich 0.5, bei DEPTH=1 0.33 und so fort.

An die Deklaration solcher Konstanten und globalen Variablen schließen sich die beiden Funktionen an, die ein Processing-Programm zum Laufen bringen: setup() wird nach dem Start genau einmal ausgeführt, draw() hingegen immer wieder, bis der Nutzer das Programm beendet.

Bei Programmstart legt setup() wiederum eine HashMap an, die diesmal auf den Namen newsmap hört. Wieder dienen die laufenden Nummern der Meldungen als Schlüssel, während als Werte hier die zugehörigen News-Objekte gespeichert werden.

Befindet sich eine Tickermeldung unter dem Mauszeiger, erscheint deren Titel, ein Rechtsklick öffnet die Nachricht im Browser.

Anschließend erzeugt das Programm ein ParticleSystem namens physics. Dieses ist ein Mitbringsel der Bernsteinschen Bibliothek und funktioniert wie ein Simulator, in den man über Funktionen wie makeParticle() und makeSpring() Objekte und Verbinder hineinmontiert. Ein erstes Particle bildet das center und wird per makeFixed() als unverrückbar definiert.

Im Zuge von setup() wird der Minutenstand der Systemuhr in die Variable minuteNextRefresh geschrieben, weshalb beim ersten Durchlauf von draw() die Funktionen checkWebsite() und checkLinks() in Aktion treten. Beide wurden der Übersicht halber auf den Karteireiter processSource ausgelagert.

Die erste grast die Webseite von heise online nach Links zu Newsticker-Meldungen ab. Dabei bedient sie sich Hilfsfunktionen wie isolateURLfromMainPage() oder getIdFromURL(), die genau das machen, was ihr Name vermuten lässt und deren Details man in Quellcode und den Kommentaren dazu findet. Hat beides die URL einer Tickermeldung und ihre laufende Nummer hervorgebracht, prüft das Programm, ob newsmap die Nummer bereits als Schlüssel enthält. Falls nicht, wird ein neues News-Objekt angelegt und einsortiert. Falls doch, wird das Alter der vorhandenen Nachricht neu berechnet.

Erst wenn alle Nachrichten vorhanden sind und ihr Alter auf dem neuesten Stand ist, prüft checkLinks(), welche Verbindungen gezeichnet werden können. Dazu geht sie die Liste aller vorhandenen News durch, lässt sich von jeder die HashMap mit den Links geben und sucht dort nach Verweisen auf Meldungen, die zwar im System vorhanden sind, aber zu denen noch kein Link existiert. Das ist der Fall, wenn in newsmap unter der betreffenden laufenden Nummer id ein Eintrag vorhanden ist, bei linksTo unter der gleichen Nummer aber ein false zurückkommt. Dann wird ins Partikelsystem eine frische Feder eingezogen und in linksTo eingetragen.

Der virtuelle Federantrieb findet nicht immer ein perfektes Layout – in solchen Fällen sorgt die Maus für Ordnung und entwirrt Teilgraphen, die sich ineinander verklammert haben wie die Sträuße innig vermengten Feldsalats.

Dieses zweistufige Verfahren hat den Vorteil, dass es in begründeten Ausnahmefällen auch Links ergänzt, die eigentlich die vorgesehene Rekursionstiefe DEPTH überschreiten. Ein Beispiel: Auf der Tickerseite im Web erscheint Meldung A, die auf die älteren Meldungen B und C verweist. Die Rekursionstiefe ist 1, also sollten Links in B und C nicht verfolgt werden. Falls die beiden aber untereinander verlinkt sind, erscheint diese Verbindung trotzdem im Newsradar. Das Verfahren bewährt sich auch in dem Fall, dass frisch hinzugekommene Nachrichten auf bereits vorhandene verlinken.

Da Processing ursprünglich als Programmierwerkzeug für Grafiker und Künstler gedacht war, sind Bildschirmausgaben kein Hexenwerk. Die Funktion drawGraph() (unter dem Karteireiter drawHelpers zu finden) konsultiert direkt das Partikelsystem, lässt sich von ihm alle Federn in die Hand drücken und zeichnet sie als Linien, sofern nicht einer der Endpunkte das Partikel center ist – schließlich sollen die Abstandhalter unsichtbar bleiben. Die Funktion drawNews hingegen gehört News, da sie Informationen der Klasse auswertet wie Farbe und Größe, in der der Kreis erscheinen soll.

Durch Spielen an den Parametern im Code kann man experimentell die Grenzen der Visualisierung per Partikelsystem und virtuelle Federn erforschen: Ändert man beispielsweise die Quelle auf die 7-Tage-News-Übersicht und wählt eine Rekursionstiefe von 2, dauert nicht nur der Programmstart quälend lange. Selbst ein 2,3-GHz-Dual-Core-Rechner mit 4 Gigabyte RAM schafft bei einem derart umfangreichen Partikelsystem kaum mehr als einen Frame pro Sekunde. Darüber hinaus wächst die Gefahr, dass sich das Gebilde bei Störungen aufschaukelt, wenn man die Dämpfung der Federn und die Reibung des Partikelsystems zu sehr herunterschraubt und dazu das Ganze in Echtzeit laufen lässt. Eine Höchstgeschwindigkeit für jedes Partikel in x- und in y-Richtung legt der Parameter EMERGENCY_BRAKE fest: Ein Wert zwischen 200 und 100 bremst die normalen Bewegungen der Nachrichten nicht allzu sehr, hält drohendes Chaos aber einigermaßen im Zaum. Bei 0 ist die Notbremse ausgeschaltet.

Rekursionstiefen von mehr als 3 bei der Standardquellseite und mehr als 1 beim 7-Tages-Ticker als Quelle produzieren grafische Darstellungen, die an Sternenhaufen erinnern – sie sehen vielleicht hübsch aus, die Masse an News und Links versteckt die Struktur aber eher, als dass sie sie visualisiert. Von praktischem Nutzen ist das Radar, wenn höchstens hundert Nachrichten zu sehen sind. Dennoch braucht der ständige Ausgleich des Partikelsystems einiges an Rechenkraft – als Beschäftigungstherapie für den zweiten Kern auf unterforderten Bürorechnern kann man das Newsradar im Hintergrund laufen lassen, auf Ein-Kern-Maschinen geht nebenbei oft nicht mehr viel.

Da die Federn selbst keine Masse besitzen und daher nicht abstoßend wirken, landen in der Praxis öfter Nachrichten zufällig auf fremden Links. Außerdem erscheinen Konvolute stark vermaschter Meldungsgruppen manchmal ineinander verheddert, was der zufälligen Positionierung bei Programmstart geschuldet ist. Aus eigener Kraft kommen sie oft nicht frei – hexen können die kraftbasierten Algorithmen eben auch nicht. Hier hilft nur beherztes Eingreifen des Nutzers. Hält man die Maustaste gedrückt, kann man Meldungen beliebig verschieben. Ein Druck auf die Taste x schüttelt den gesamten Graphen etwas durch.

Mit kleinen Änderungen am Code kann man das Newsradar nach Belieben den eigenen Vorstellungen anpassen. So ließen sich über die Formen der einzelnen Nachrichten auf dem Radarschirm weitere Merkmale visuell umsetzen, etwa die Zahl der Forumskommentare: Kontrovers aufgenommene Meldungen könnten etwa eckig statt rund erscheinen. Damit die Form immer auf dem aktuellen Stand bleibt, ist es dann allerdings nötig, den Wert regelmäßig neu abzufragen. Wer die zahlreichen Parameter des Partikelsystems bei laufendem Programm verändern will, kann unserem Programm Schieberegler hinzufügen. Processing selbst bringt keine fertigen GUI-Elemente mit, aber auf der Projektseite findet man vorgefertigtes Material, etwa die Bibliothek controlP5 von Andreas Schlegel.

Das Partikelsystem versucht während der gesamten Laufzeit, das Layout des Newsradars zu optimieren – selbst wenn gerade keine neuen Nachrichten hereingekommen sind. Ist Ihnen die CPU-Zeit dafür zu kostbar, können Sie beispielsweise die Funktion doEmergencyBraking() dergestalt umbauen, dass alle Partikel bis zum nächsten REFRESH mittels makeFixed() festgenagelt werden, sobald keines davon eine Geschwindigkeit von mehr als 1.0 in x- oder y-Richtung aufweist.

Egal, ob Sie das Newsradar auf Ihren Blog ummünzen, ob Sie das force directed layout durch einen selbst ausgeknobelten Algorithmus ersetzen oder ganz neue Wege der Visualisierung beschreiten – wir freuen uns über jedes Processing-Programm, das uns zugeht. Wir haben auf heise online eine eigene Projektseite für „Kreatives Programmieren mit Processing“ eingerichtet (siehe Soft-Link). Dort finden Sie neben dem Quellcode des Newsradars nützliche Links, ein Forum, ein Wiki und können auch gerne Ihre eigenen Programme anderen Lesern zur Verfügung stellen. (pek)

[1] Peter König, Kleinkunstprogramm, Algorithmische Bilder und Animationen mit Processing, c't 24/07, S. 206


Seit 2001 schrauben die Initiatoren Ben Fry und Casey Reas mit ihrem Team an ihrer schlichten Entwicklungsumgebung namens Processing – nach über 150 inkrementellen Beta-Releases erblickte im vergangenen Herbst endlich Version 1.0 das Licht der Welt. Ziel von Fry und Reas ist es, mit ihrem Projekt das Programmieren als Werkzeug für bildende Künstler und Designer zu etablieren. Deshalb bringt Processing von Haus aus besondere Talente für statische, animierte und interaktive Grafiken mit. Fertige GUI-Elemente wie Schieberegler oder Texteingabe-Felder fehlen in der Grundausstattung allerdings völlig.

Programmieren darf man mit Processing in einer gezielt vereinfachten Variante der mächtigen objektorientierten Programmiersprache Java. Ganz ohne deren für Anfänger verwirrenden Überbau bringt schon eine Handvoll Zeilen imperativen Quellcodes Grafiken und Animationen auf den Bildschirm. Da hinter den Kulissen ein vollwertiges Java am Werk ist, können versierte Programmierer auf den reichhaltigen Fundus an fertigen Methoden, Klassen und Paketen des Java-API zurückgreifen – allerdings derzeit nur auf die ältere Version 1.4. Fertige Programme, im Processing-Jargon als „Sketches“ bezeichnet, spuckt der Editor auf Knopfdruck wahlweise als Applet oder als ausführbares Java-Binary für Windows, Linux oder Mac OS X aus.

Für die Entwicklung umfangreicher Projekte ist Processing nur bedingt geeignet – der reduzierte Editor für den Quellcode hat zwar seinen eigenen Charme, aber Annehmlichkeiten wie automatische Ergänzung von Funktionsnamen und Schlüsselwörtern oder auch ein Debugger fehlen. Es ist allerdings problemlos möglich, seinen Code in Processing zu beginnen und ihn, wenn er den Kinderschuhen entwachsen ist, in eine große Entwicklungsumgebung wie Eclipse umzuziehen.

Processing steht unter Open-Source-Lizenz und viele seiner Fans stellen ihre Programme, Erweiterungen und Bibliotheken ebenfalls frei zur Verfügung. Über siebzig Zusatzpakete fügen Funktionen für Bildverarbeitung, Visualisierung, Klänge und Netzwerkkommunikation hinzu. Sogar selbst gelötete Hardware lässt sich per Erweiterung zur Zusammenarbeit mit Processing überreden. Die Webseite des Projekts versammelt zahlreiche Beispiele, ausführliche Dokumentationen und Tutorials, steht aber – wie die Software selbst – nur auf Englisch zur Verfügung.


Die Standard-Funktion draw() führt ein Processing-Programm während der Laufzeit immer wieder aus – beim Newsradar sorgt sie für die grafische Darstellung und zieht bei Bedarf die Notbremse. Die Hilfsfunktion checkWebsite() prüft heise online auf neue Nachrichten, checkLinks() fügt fehlende Links ein.

void draw(){
if (minute() == minuteNextRefresh){
checkWebsite();
checkLinks();
minuteNextRefresh = (minute() + REFRESH) % 60;
}
physics.tick(TICK);
if (EMERGENCY_BRAKE !=0){
doEmergencyBraking();
}
drawBackground();
drawGraph();
}

void checkWebsite(){
String [] lines = loadStrings(URL);
for (int i=0; i<lines.length; i++){
if (lines[i].indexOf("/meldung/") != -1){
String curr = isolateURLfromMainPage(lines[i]);
int currId = getIdFromURL(curr);
if (!newsmap.containsKey(currId)){
News newNews = new News(curr, currId, DEPTH,
random(SIZE), random(SIZE));
newsmap.put(currId, newNews);
} else {
((News)newsmap.get(currId)).ageNews();
} } } }

void checkLinks(){
Set newskeys = newsmap.keySet();
Iterator it = newskeys.iterator();
while (it.hasNext()){
int currNewsId = (Integer)it.next();
News currNews = (News)newsmap.get(currNewsId);
Map links = currNews.linksTo;
Set linkskeys = links.keySet();
Iterator it2 = linkskeys.iterator();
while (it2.hasNext()){
int currLinkId = (Integer)it2.next();
if (newsmap.containsKey(currLinkId)){
News currLinkedNews = (News)newsmap.get(currLinkId);
if (links.get(currLinkId)==null){
Spring linkspring = physics.makeSpring(currNews.pos,
currLinkedNews.pos, STRENGTH, DAMP,
max(LINKRL, abs(currNews.age-currLinkedNews.age)));
links.put(currLinkId, linkspring);
[...]
} else {
((Spring)links.get(currLinkId)).setRestLength
(max(LINKRL, abs(currNews.age-currLinkedNews.age)));
} } } } }

Kommentare

Kommentare lesen (35 Beiträge)