Nachdem wir nun ein paar Grundlagen zum Programmieren allgemein geklärt haben ist es nun Zeit endlich auch mal richtig zu programmieren. Zunächst schauen wir uns hierzu die Programmierumgebung von Processing an. Was aber ist Processing eigentlich?

Processing ist eine sogenannte objektorientierte Programmiersprache mit zugehöriger integrierter Entwicklungsumgebung. Die Programmiersprache ist für die Einsatzbereiche Grafik, Simulation und Animation spezialisiert. Processing wird in einem open source Projekt entwickelt, das am Massachusetts Institute of Technology (MIT) in Boston initiiert wurde. Processing hat den Charakter einer stark vereinfachten Version der Programmiersprache Java, ermöglicht Interaktionen und visuelle Elemente zu programmieren und eignet sich besonders gut für einen einfachen Einstieg in das Programmieren und einen fließenden Übergang in das Programmieren mit Java.²⁾

Wenn wir den im obigen Fenster sichtbaren Code println("Hallo Welt!"); eingeben und anschließend auf den Startknopf klicken, erhalten wir auf der Konsole am unteren Rand des Fensters die entsprechende Textausgabe.

Gleichzeitig erscheint das sogenannte Graphikfenster, in dem in Zukunft die meisten unserer Programme ablaufen.

void setup(){
  size(400, 400);
  background(243, 247, 129);
}

Es ist sicher keine Überraschung, dass die Anweisungen unserer eindeutigen Sprache entsprechen. In der Methode setup() legen wir die Eigenschaften des Graphikfensters fest. Die Bedeutung des Schlüsselwortes void werden wir an späterer Stelle kennenlernen. Die Methode size() legt Breite und Höhe des Graphikfensters fest, die Methode background() die Hintergrundfarbe im RGB-Modus (Der gewünschte Farbcode kann mit dem Farbauswahl-Tool in Processing ermittelt werden). Natürlich wollen wir im Graphikfenster auch zeichnen. Zu diesem Zweck ergänzen wir unseren Code durch folgende Zeilen:

void draw(){
  stroke(255,0,0);
  line(0,0,400,400);
  line(0,400,400,0);
}

In der Methode draw() erzeugen wir unsere Graphikelemente. In diesem Fall sind dies zwei diagonale Linien. In der Methode line() geben wir die Koordinaten (x,y) des Startpunktes und des Endpunktes der Linie an. Die Methode stroke() legt die Linienfarbe für alle nachfolgenden Linien fest. Die Farbe wird erst durch einen erneuten Aufruf der Methode stroke() geändert bzw. durch noStroke() deaktiviert.

Sicherlich ist es euch während dem Experimentieren mit Processing schon passiert, dass ihr Fehlermeldungen erhalten habt. Dies ist normal und sollte euch nicht entmutigen. Fehlermeldungen resultieren daraus, dass der Computer nicht sonderlich intelligent ist, sondern die Anweisungen in einer sehr präzisen Form benötigt. Wenn der Computer die Anweisungen nun nicht deuten kann, gibt er eine Fehlermeldung aus. Diese zu verstehen ist nicht immer einfach. Wenn man eine Fehlermeldung jedoch richtig deuten kann, gibt einem diese sehr gute Hinweise darauf, wo der Fehler liegt.

Mit background() lässt sich der Hintergrund des Zeichenfensters festlegen. Diese Eigenschaft wird üblicherweise in der setup()-Methode festgelegt:

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

Die setup()-Methode ist für die statischen Eigenschaften unserer Graphiken zuständig, die bereits bekannte draw()-Methode dagegen für die dynamischen Aspekte. Diese Methode sorgt dafür, dass die Graphiken ständig neu gezeichnet werden. Ein Beispiel für die Dynamik ist folgendes kleines Programm:

int x=0;
 
void setup() {
  size(400,400);
}
 
void draw() {
  background(x);
  x=x+1;
}

Erläuterung: Der Hintergrund des Zeichenfensters ist zu Beginn schwarz (background(0)). Bei jedem Aufruf der Methode draw() wird der Wert für x um 1 erhöht und im nächsten Durchlauf die Hintergrundfarbe an den neuen Wert angepasst. Die Methode draw() aktualisiert das Zeichenfenster 60 mal pro Sekunde. Mit der Methode frameRate() können wir die Geschwindigkeit anpassen:

void setup() {
  size(400,400);
  frameRate(30);
}

Auf diese Weise halbieren wir die Aktualisierungsrate auf 30 mal pro Sekunde.

Zeichnen folgt in Processing allgemein dem gleichem Ablauf wie jedes andere Zeichenprogramm, wobei die ersten beiden Schritte auch in der Reihenfolge getauscht werden können.

1. Auswahl der Füllfarbe
2. Auswahl der Linienfarbe
3. zeichnen des gewünschten Objektes