Processing – einmal ohne “Geo-” (Teil 1: Über Processing)

(Vielleicht verspreche ich im Titel zu viel und es läuft doch wieder auf etwas “Geo” hinaus . Hat da jemand déformation professionelle gesagt?)

Ich habe schon längere Zeit die Entwicklungen rund um die Programmier- und Visualisierungsumgebung Processing verfolgt. Bei Processing handelt es sich um ein Open Source-Tool, mit dem man mit sehr wenigen Zeilen Programmcode komplexe  Bilder, Animationen und interaktive Grafiken erstellen kann. Einige Highlights von Processing:

  • Output in 2D oder 3D.
  • Für alle Plattformen verfügbar (Win, Mac, Linux).
  • Integration von OpenGL.
  • Processing-Projekte können online (mit JavaScript und Java oder auch nur mit JavaScript) gehostet werden oder in kleine Applikationen verpackt verteilt werden
  • Es gibt eine rege Community.

Am schnellsten gelingt einem der Einstieg in Processing wahrscheinlich über die gut gemachten Tutorials. Daneben gibt es zahlreiche einfache und themenspezifische Beispiele, Beispiele im 3D-Bereich und Beispiele rund um die Verwendung externer Libraries.

Processing-Sketches (so heissen Projekte in Processing) können in kleine Programme exportiert, die auf allen gängigen Computersystemen laufen. Man kann die Sketches aber auch für das Web aufbereiten: Ein Java-Applet mitsamt automatisch erstellter HTML-Seite ist einfach zu exportieren. Solche Sketches fürs Web bedingen, dass im Browser JavaScript aktiviert ist und auf der Maschine ein Java Runtime Environment (JRE) installiert ist.  Neben Processing gibt es noch das Schwesterprojekt Processing.js. Dieses ermöglicht es, Processing-Sketches online zu stellen, die keine JRE, sondern nur JavaScript benötigen – ein sehr praktisches Feature, das ich aber noch nicht getestet habe; die hier angeführten Beispiele können also nur mit JavaScript und JRE betrachtet werden.

Jede Processing-Sketch besteht aus zwei grundlegenden Teilen: In der setup-Methode werden grundlegende Eigenschaften der Sketch definiert, in der draw-Methode werden dann Dinge in die Sketch gezeichnet. Standardmässig wird die draw-Methode immer wieder aufgerufen, so dass man mit Processing einfach Animationen anfertigen kann (oder interaktive Sketches, wie im aktuellen Beispiel). Mit noLoop() in der setup-Methode, kann übrigens das wiederholte Aufrrufen von draw() unterbunden und also eine statische Grafik gezeichnet werden.

void setup() {
  size(600, 400);
  smooth();
}

void draw() {
  if (mousePressed) {
    fill(0);
  }
  else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 50, 50);
}

Übrigens ist die Programmiersprache Processing Java-basiert, wie man aufgrund des obigen Codes vermuten kann. Nach einiger Erfahrung mit Python mutete die Syntax von Processing/Java für mich wieder ziemlich kompliziert an – vor allem wegen der geschweiften Klammern und Strichpunkte.

Obiger Code generiert eine Sketch von 600 mal 400 Pixel. In der draw-Methode wird ein Kreis (bzw. eine Ellipse mit jeweils 50 Pixel Breite und Höhe) gezeichnet, und zwar jeweils dort, wo sich der Maus-Cursor befindet. Wird eine Maustaste gedrückte (mousePressed), ändert sich die Füllfarbe der Ellipse von 255 (Kurzform für RGB = (255, 255, 255), also weiss) auf 0 (schwarz). Probieren Sie’s hier aus.

In meinem ersten eigenen Processing-Projekt wollte ich dann etwas mit echten Daten herumexperimentieren. Ich bin dabei iterativ vorgegangen und habe die Komplexität der Visualisierung etwas gesteigert – getreu dem Motto auf einer der Einführungsseiten von Processing: Don’t start with a cathedral!

Als Grundlagen habe ich einen Datensatz über Erdbeben im Jahr 2009 des Carlton College in Minnesota und ein Satellitenbild-Mosaik  aus MODIS-Aufnahmen des Blue Marble-Projekts von NASA Visible Earth verwendet. Beides soll zusammen visualisiert werden:

Wie es aussieht, handelt sich bei meinem ersten eigenen Processing-Projekt allem Anschein nach doch um „Geo“-Processing ;–) Da ich diesen Post aber als „ohne Geo“ bezeichnet habe, stelle ich das Projekt (und einen Link dazu) im nächsten Post vor.


CC-BY-NC-SA Ernst Basler + Partner (Attribution-Noncommercial-Share Alike 3.0 Unported).


Facebooktwittergoogle_plusredditpinterestlinkedintumblrmailFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Das könnte auch interessant sein...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *