Einstieg in Processing

In dieser Workshopreihe dreht sich alles um das Gestalten von genarativen und interaktiven Systemen mittels der open source Umgebung Processing. Sie ermöglicht Interessierten, ohne Programmierhintergrund, einen schnellen und simplen Einstieg in das Arbeiten mit Code – für einen grafischen Output. Ohne aufwendige Vorbereitung erlaubt Processing das Zeichnen von grafischen Elementen und die Verwendung von Input, z.B. durch Maus und Tastatur.
Das Projekt wurde von Ben Fry und Casey Reas 2001 am MIT ins Leben gerufen. Inspiriert von John Maeda's 1999 entstandenem Projekt Design by Numbers sollte es als visuelles Sketchtool für Designern dienen, um neue Denkweisen neben der bekannten Informatik zu erzeugen. Schnell wurde die Umgebung von vielen Künstlern nicht nur im Entwurfsprozess, sondern auch in ganzen Installationen und Ausstellungen genutzt.

Processing basiert auf der 'höheren' Programmiersprache Java, vereinfacht deren Schreibweise und minimiert den Schreibaufwand beachtlich. Dennoch ist der Sprung zu weiteren Sprachen wie Java, ActionScript oder JavaScript ein geringer. Der Kernpunkt ist das Verständnis für die Formulierung der sog. Syntax (der Programmanweisung) und die logische Strukturierung von Programmabläufen. Alle aktuellen Sprachen ähneln sich in diesen Punkt stark.

Als Applikation ist Processing ein Texteditor mit kleinen Zusatzfunktionen die grundlegende, programmierspezifische Aufgaben erfüllen. Im Vergleich zu Entwicklungsumgebungen wie eclipse und netbeans bedarf es keiner aufwendigen Projekteinrichtung und Konfiguration bevor die ersten Schritte gemacht werden können. Kostenlos verfügbar für Mac, Linux und Windows kann es im Downloadbereich der Processingseite runtergeladen werden. Vorraussetzungen sind eine aktuelle Java- und QuickTime-Version. Teilweise benötigen Plugins (sog. Libraries) systemspezifische Zusatzdateien, die jedoch immer mitgeliefert werden.

Der Kern des Programmfenster stellt der Texteditor dar. Alle Bestandteile der hier geschriebenen Anweisungen werden zur besseren Lesbarkeit eingefärbt. Über dem Editor befindet sich die Menüleiste mit den gewohnten Optionen 'Öffnen', 'Speichern' bis hin zur Pluginverwaltung und Ausgabe des Sketches. Einige der essentiellen Funktionen, wie z.B. das Ausführen des Programms, sind zwischen Menüleiste und Texteditor als Icons angesiedelt. Beim Starten der Applikation springt ein zweites Fenster auf in dem der Sketch abgebildet wird. Alternativ kann das Programm auch mit der Tastenkombination Apfel+r ausgeführt werden. Im späteren Verlauf kann es zu mehreren Textdokumenten für ein Programm kommen. Direkt über dem Texteditor befindet sich zu diesem Zweck eine Tab-Leiste um diese aufzulisten.

Als Basis zum Zeichnen in Processing ist das Sketchfenster in ein kartesisches Koordinatensystem unterteil. Horizontal befindet sich die x-Achse am oberen Fensterrand und die y-Achse vertikal an der linken Außenseite. In der oberen-linken Ecke ist der Punkt x=0,y=0 (Koordinatenursprung). Von dort aus breitet sich das Koordinatensystem auf der x-Achse nach rechts und auf der y-Achse nach unten aus. Positions- und Größenangaben werden in der Einheit Pixel (ein Bildschirmpunkt) vorgenommen – demnach ist der xWert für den Punkt in der oberen-rechten Ecke die Breite des Fensters in Pixel. Beide Achsen dehnen sich ebenfalls in den negativen Wertebereich noch links bzw. rechts aus. Auch diese Koordinaten können beim Positionieren angegeben werden, je nach Größe der grafischen Objekte rutschen diese aber aus der sichtbaren Fläche und werden nicht dargestellt.

Neben dem zweidimensionalem Raum können unter Hinzunahme der z-Achse dreidimensionale Abbildungen erzeugt werden. Die dritte Achse verläuft ebenfalls durch die obere-linke Ecke. Bildlich gesehen geht sie durch den Bildschirm, wobei sich der positive Wertebereich hinter dem Bildschirm befindet. In den folgenden Lessons konzentrieren wir uns auf das Gestalten mit Code in 2d.

Die Größe der Zeichenfläche lässt sich mit dem Aufruf des Befehls size() festlegen. Processing passt die Ausgabefläche anderenfalls auf 100×100 Pixel an. Damit diese Einstellung funktioniert, braucht das Programm zwei Informationen von uns. Wie breit und wie hoch die gewünschte Zeichenfläche sein soll. Bei Positionen und Größen im 2d-Raum wird immer erst der Wert auf der x-Achse und danach der y Wert genannt (demnach erst die Breite, dann die Höhe). Beide Werte kommen als Parameter zwischen die beiden runden Klammern, die dem Begriff size folgen.

• size(width, height) legt die Größe der sichtbaren Zeichenfläche (im Sketchfenster) fest. Das unten aufgeführte Beispiel legt einen Bereich von 800×600 Pixeln im Ausgabefenster an. siehe Referenz

  size (800, 600);
  

Ein Punkt ist das simpelste Element der primitiven Grundformen. Nur mit einer x und einer y-Koordinate nimmt er, ohne spezielle Angaben, die Fläche eines Pixels auf dem Bildschirm ein. Die für die Füllung verwendete Farbe kann mit stroke() festgelegt werden.

• point(x, y) zeichnet einen Punkt auf die Zeichenfläche. Bestimmt wird dieser durch x & y-Koordinate. siehe Referenz

  point (0, 0);   //obere-linke Ecke
  point (43, 89); 
  

Als zweites Element lernen wir die Linie kennen. Als eine Reihe von Punkten erstreckt sie sich zwischen einem Anfangs- und einem Endpunkt. Um eine Linie zu zeichnen verwendet man den line() Befehl. Dieser hat genau vier Parameter, zwei Werte für den Anfangs- und zwei für den Endpunkt.

• line(x1, y1, x2, y2) zeichnet eine Linie zwischen zwei Punkten. Punkt1 und Punkt2 werden jeweils durch eine x & y-Koordinate angegeben. siehe Referenz

  line (10, 20, 80, 60);
  

Der Befehl rect() ermöglicht das Füllen bzw. Umranden einer rechteckigen Fläche. Bestimmt durch den oberen-linken Punkt dehnt dich diese nach rechts-unten aus. Dafür benötigt Processing neben der x und y-Koordinate zur Punktbestimmung die Breite und Höhe des Elements.

• rect(x, y, width, height) zeichnet ein Rechteck mit einer definierten Breite und Höhe an eine bestimmte Position auf die Zeichenfläche des Sketchfensters. siehe Referenz

  rect (20, 20, 60, 40);
  

Alle Außenkante des Vierecks bleiben beim Aufruf von rect() immer parallel zur x bzw. y-Achse. Um dies zu umgehen kann für das freie Zeichnen von viereckigen Flächen der quad() Befehl verwendet werden.

• ellipse(x, y, width, height) zeichnet eine Ellipse/Kreis in die Zeichenfläche. Grundsätzlich befindet sich der mit x und y angegebene Punkt im Zentrum der Ellipse. Die beiden weiteren Werte geben die Breite (width) auf der x-Achse und Höhe (height) auf der y-Achse des Elements an. Bei den Größenangaben handelt es sich demnach um den Durchmesser auf der jeweiligen Achse, nicht um den Radius. siehe Referenz

  ellipse (50, 50, 45, 55);
  

Ein Dreieck, erzeugt mit triangle(), ist eine durch drei miteinander verbundenen Linien geschlossene Fläche. Genau wie bei line() wird die Lage jedes der drei Punkte durch eine x und eine y-Koordinate eindeutig im Sketchfenster bestimmt.

• triangle(x1, y1, x2, y2, x3, y3) zeichnet ein Dreieck in die Zeichenfläche. Die drei benötigten Punkte werden jeweils durch eine x und eine y-Koordinate angegeben. siehe Referenz

  triangle (22, 78, 77, 69, 41, 20);
  

Neben rect() erlaubt die erweiterte Möglichkeit quad() ebenfalls das Darstellen von Vierecken. Mittels vier ausformulierten Punkten können Formen gezeichnet werden, die keine Innenwinkel von 90° besitzen und parallele Seitenpaare haben.

• quad(x1, y1, x2, y2, x3, y3, x4, y4) zeichnet ein Viereck in Zeichenfläche. Bestimmt durch 4 Punkte, jeweils eine x und y Koordinate, beschreiben die Lage der Fläche. siehe Referenz

  quad (12, 19, 31, 85, 67, 74, 80, 19);
  

Standardmäßig arbeitet Processing mit dem RGBA-Farbraum (Rot, Grün, Blau, Alpha). Für jeden der sogenannten Kanäle steht ein Wertebereich von 256 Einheiten, beginnend bei 0, zur Verfügung um das Mischverhältnis zu bestimmen (additive Farbmischung). Ein Anteil von 0 bedeutet, daß kein Teil dieses Kanals in die Farbmischung eingeht – mit 255 der komplette Kanal.
Drei Befehlen bietet Processing um Farben für unterschiedliche Eigenschaften/Bereiche festzulegen: background() für das einfärben der gesamten Zeichenfläche, fill() für die Füllfarbe und stroke() für die Umrandung von visuellen Elemente.

Processing färbt ohne unser Zutun den Hintergrund des Sketchfensters grau ein. Wenn wir die Fläche leeren wollten, sie mit einem Farbton füllen, müssten wir ein Rechteck im Fensterformat zeichnen. Diese Funktionalität bietet uns ebenfalls der Befehl background(). Ausgestattet mit Informationen über die Anteiligkeit der Farbkanäle überschreibt er den momentanen Inhalt der Zeichfläche (ohne das wie bei rect() Position oder Größe angegeben werden muss).

• background(r, g, b) löscht den Inhalt der Zeichenfläche durch homogenes Füllen mit einer Farbe. Diese wird durch die drei Kanäle r Rot, g Grün und b Blau bestimmt. siehe Referenz

  background (231, 0, 89);
  

Um Flächen/Einschlüsse farblich zu füllen kann man dem grafischen Element keine konkreten Informationen mit auf den Weg geben. Innerhalb von Processing existiert für Füll- und Strichfarbe jeweils ein Farbeimer, bildlich gesprochen. Der Inhalt dieser beiden Eimer kann mit zwei Funktionen bestimmt werden: fill() für die Füllfarbe und stroke() für die Farbgebung der Umrandung. Wenn keine Farbe angewendet werden soll kommen noFill() und noStroke() ins Spiel. Diese Einstellungen bleiben solange aktiv, bis sie durch einen Aufruf von fill() bzw. noFill() für die Füllfarbe und stroke() bzw. noStroke() für die Umrandung geändert werden.

• fill(r, g, b) setzt die Füllfarbe für alle im Anschluss gezeichneten Elemente. Die drei Werte stehen jeweils für einen Farbkanal: r Rot, g Grün und b Blau. Optional kann durch einen vierten Wert a die Transparenz bestimmt werden. Der Wertebereich liegt für alle vier Angaben zwischen 0 und 255. siehe Referenz

  fill (255, 0, 0); //volles Rot
  fill (0, 255, 0); //volles Grün
  fill (0, 0, 255); //volles Blau
  

• noFill() deaktiviert die Füllfarbe für alle im Anschluss gezeichneten Elemente. siehe Referenz

  noFill ();
  

• stroke(r, g, b) setzt die Farbe für alle im Anschluss gezeichneten Elemente. Die drei Werte stehen jeweils für einen Farbkanal: r Rot, g Grün und b Blau. Optional kann durch einen vierten Wert a die Transparenz bestimmt werden. Der Wertebereich liegt für alle vier Angaben zwischen 0 und 255. siehe Referenz

  stroke (255, 0, 0); //volles Rot
  stroke (0, 255, 0); //volles Grün
  stroke (0, 0, 255); //volles Blau
  

• noStroke() deaktiviert die Umrandungsfarbe für alle im Folgenden gezeichneten Elemente. siehe Referenz

  noStroke ();
  

Im RGB Farbraum mischen sich Graustufen aus gleichen Anteilen der drei Kanäle Rot, Grün und Blau. Durch die additive Zusammensetzung erhält man bei drei vollen Teilen die Farbe weiß, bei keinen Angaben für R,G,B schwarz. Processing bietet für diesen Fall eine Kurzschreibweise für die Festlegung von Füll- und Strichfarben. Statt drei gleicher Werte wird nur eine Wert zwischen den runden Klammern genannt. Die Zeile fill(38, 38, 38); hat die gleiche Aufgabe wie fill(38);.

background (110);  // grau
fill (0);          // schwarz
stroke (255);      // weiß

Neben dem Grauwert kann als zweiter Wert die Transparenz für den Grauton angageben werden, ebenfalls von 0 bis 255.

background (110);  // grau
fill (0, 90);      // schwarz, transparent
stroke (255, 200); // weiß, transparent

Aufrufe von fill() und stroke() lassen sich wie folgt lesen:

• 1 Wert Grauton, deckend
• 2 Werte Grauton, mit Transparenzangabe
• 3 Werte RGB Farbtonangabe, deckend
• 4 Werte RGB Farbtonangabe, mit Transparenzangabe