Einstieg in ProcessingGeschichte, Kontext und die ersten Zeilen Code

Diese Lesson führt Processing als Programmiersprache und -Umgebung ein. Nach einem kurzen Überblick über die Entstehung und Wurzeln des Projekts am MIT Media Lab wird die Processing Software mit ihren grundlegenden Funktionen vorgestellt. Danach folgt der unmittelbare Einstieg in die Programmierung, indem das Koordinatensystem, die visuellen Grundelemente und die Verwendung von Farben eingeführt werden.

In dieser Lesson dreht sich alles um das Gestalten von generativen und interaktiven Systemen mittels der Open Source Umgebung Processing. Sie ermöglicht Interessierten ohne Programmierhintergrund einen schnellen und simplen Einstieg in das kreative Arbeiten mit Code. 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 Werkzeug für Designer dienen, das einen flexibleren Umgang mit Software und Technologie ermöglicht. Schnell wurde die Umgebung von vielen Künstlern nicht nur im Entwurfsprozess, sondern auch für Installationen und Ausstellungen genutzt.

Processing basiert auf der 'höheren' Programmiersprache Java, vereinfacht deren Schreibweise und minimiert so den Schreibaufwand bei Programmieren beachtlich. Es handelt sich also streng genommen bei Processing eher um einen Dialekt von Java, als um eine eigenständige Programmiersprache. Der Vorteil dieses Umstands liegt dabei auf der Hand. Möchte (oder muss) man später einmal über den Tellerrand von Processing hinausschauen, so fällt der Einstieg in Java sehr leicht. Auch das spätere Erlernen von Java-ähnlichen Programmiersprachen wie ActionScript oder JavaScript fällt durch Processing leichter. Der Schlüssel für das Verständnis von Programmierung liegt im Erlernen der Formulierung von Programmanweisungen - der sog. Syntax - und der logischen Strukturierung von Programmabläufen, also dem Gestalten von Algorithmen. Alle aktuellen Sprachen ähneln sich in diesen Punkten stark und können deshalb mit Grundkenntnissen in Processing leicht erlernt werden. Deshalb - und natürlich wegen der starken visuellen Ausrichtung - ist Processing unser Werkzeug der Wahl wenn es um die Einführung in die Programmierung für Künstler und Designer geht.

Das Programm

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.

Zeichenfläche

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.

Größe des Sketchfensters

Die Größe der Zeichenfläche lässt sich mit dem Aufruf des Befehls size() festlegen. Processing passt die Ausgabefläche anderenfalls auf 100x100 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 800x600 Pixeln im Ausgabefenster an. size()
    size (800, 600);

Visuelle Grundelemente

Punkt

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. point()
    point (0, 0);   //obere-linke Ecke
    point (43, 89);

Linie

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. line()
    line (10, 20, 80, 60);

Rechteck

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. rect()
    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

  • 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. ellipse()
    ellipse (50, 50, 45, 55);

Viereck

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. quad()
    quad (12, 19, 31, 85, 67, 74, 80, 19);

Graustufen

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

Farben

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.

Hintergrund einfärben

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. background()
    background (231, 0, 89);

Flächen füllen & Ränder einfärben

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. fill()
    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. noFill()
    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. stroke()
    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. noStroke()
    noStroke ();