Processing

Kommen wir zur Praxis: Processing ist eine auf Java basierende Programmiersprache, welche der Programmierung von Bildern dient und fortan unser Werkzeug ist.

[Processing] is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool.[1]

Erste Programme

SkribblesWer schon etwas Erfahrung mit der Programmierung hat und idealerweise die Java-Syntax kennt, der wird in Processing schnell Fuß fassen. Unsere erste Aufgabe war es, uns mit den Möglichkeiten vertraut zu machen (dabei hilft ein Blick in die Referenz) und die Darstellung einer grafischen Entwicklung von hell zu dunkel.

Da selbst bei den uns zur Verfügung stehenden Techniken das eigentliche Handwerk immer noch die größte Rolle spielt (siehe Design by Numbers[2], wo ein paar gute Anmerkung zu „Skills” etc. gemacht werden), habe ich zunächst ein paar Skribbles angefertigt, um zu sehen, wie man die Entwicklung von hell nach dunkel mit einfachsten grafischen Mitteln realisieren könnte.

Ich habe mich dazu entschlossen, die letzte der geskribbleten Versionen umzusetzen, die dabei entstandenen Bilder sehen so aus:

Der dazu benötigte Programmtext (hier der für das erste der drei Bilder) ist sehr kurz und wird Zeile für Zeile abgearbeitet und umgesetzt.

// Hintergrund weiss
background(255);
// Strichfarbe und -stärke
stroke(200);
strokeWeight(1);
// vertikale Linien
line(25, 0, 25, 100);
line(50, 0, 50, 100);
line(75, 0, 75, 100);
// horizontale Linien
line(0, 25, 100, 25);
line(0, 50, 100, 50);
line(0, 75, 100, 75);

Zunächst wird der Hintergrund auf weiss gesetzt: Dazu wird als #was_sind_parameter">Parameter der Wert 255 übergeben, was als RGB-Wert interpretiert wird. Gibt man den Funktionen, welche Farbeigeschaften setzen nur einen Parameter, so wird dieser allen drei Weten (R, G und B) zugewiesen - durch das übergeben von drei Parametern lassen sich die Farbwerte R, G und B einzeln setzen.

Anschließend die Strichfarbe auf ein helles grau gesetzt und die Strichstärke auf einen Pixel. Im letzten Schritt werden die vertikalen und horizontalen Linien gezeichnet. Dazu müssen der Funktion line() folgende Parameter übergeben werden:

  1. X-Koordinate des Startpunkts
  2. Y-Koordinate des Startpunkts
  3. X-Koordinate des Endpunkts
  4. Y-Koordinate des Endpunkts

Die Koordinaten dienen der Ortsbestimmung der Punkte auf der #was_ist_eine_matrix">Matrix/ Bildfläche, daher ist ihre Reihenfolge wichtig für das Zeichnen der Linie:

A line is described by two pairs of numbers that represent the positions on the paper. The order of the pairs has no significance, but the order within a pair does.[2]

Die Bilder und der Programmcode im Einzelnen:

Die Funktion draw()

Will man den Vorgang des Zeichnens und die Entwicklung des Bildes in einzelnen Schritten (Frames) darstellen, sind mehrere Faktoren zu beachten:

Mit Hilfe der Funktion draw(), welche das in ihr enthaltene Programm in jedem Frame aufruft, lässt sich das Bild in einzelnen Schritt sichtbar weiterentwickeln. So kann man bspw. eine Linie zeichnen, welche links oben beginnt und mit jedem Frame näher zur Ecke rechts unten strebt. Dabei wird sie heller und dicker. Hier das einfache Programm, welches dieses Bild generiert:

int s = 1; // Strichstärke
int coord = 0; // X- und Y-Koordinate
color c = 0; // X- und Y-Koordinate

void setup() {
  size(200, 200);
  background(255);
}

void draw() {
  strokeWeight(s);
  stroke(c);
  point(coord, coord);
  // Werte um 1 erhöhen
  coord++;
  s++;
  c++;
}

Quellen

  1. Processing Website. http://processing.org/. Aufgerufen am 21.02.2007.
  2. #maed99">[Maed99]