Programmieren in Processing

Grundlagen

Processing ist eine Umgebung zum Lernen der Grundlagen des Programmierens innerhalb eines graphischen Kontextes. Processing ist Open Source-Software, und kann frei unter http://processing.org/download/ herunter geladen werden.

Koordinatensystem

Processing verwendet ein kartesisches Koordinatensystem mit dem Nullpunkt in der oberen linken Ecke.

Anweisungen

Mit Hilfe von Anweisungen wird dem Computer mitgeteilt, dass er bestimmte Schritte ausführen soll.

Erste Schritte

Starten Sie nun die Processing-Entwicklungsumgebung. Da gibt es nicht viel, ausser einem Texteditor und ein Paar Knöpfe.

Im Texteditor geben wir nun folgende Anweisung ein.

ellipse(50, 50, 80, 80);

Diese Anweisung zeichnet eine Ellipse. Die Bedeutung der Parameter werden in der Funktionsreferenz beschrieben. Das Programm wird durch den "Play" Knopf ausgeführt. Falls ein Typfehler vorkommt oder etwas anderes Fehlschläg, färbt sich das Fenster rot ein.

Interaktion

Wir gehen nun ein Schritt weiter und erstellen ein Programm welches eine Ellipse zeichnet in unterschiedlichen Farben, in Abhängigkeit eines Mouse Ereignis. In der setup() Funktion definieren wir die grösse des Ausgabefenster durch die size() Funktion. Die draw() Funktion wird automatisch und fortlaufend ausgeführt, bis das Programm beendet wird, oder die noLoop() Anweisung vorkommt und beinhaltet die Anweisungen welche die Ausgabe festlegen.

void setup() {
  size(480, 120);
}

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

Die Farbe wird mittels fill() verändert. Die Position der Ellipse wird Anhand der Mouse Koordinaten ermittelt.

Zeichnen wie ein Künstler

Um Werke zu erstellen bietet Processing verschiedene Zeichen- und Farbanweisungen:

background(): Setzt die Hintergrundfarbe der Zeichenfläche
point(): Zeichnet einen Punkt
line(): Zeichnet eine Linie
rect(): Zeichnet ein Rechteck
ellipse(): Zeichnet ein Ellipse
stroke(): Setzt die aktuelle Farbe des Strichs
fill(): Setzt die aktuelle Füllfarbe

Speichern und Veröffentlichen

Speichern Sie das Processing-Sketch und exportieren Sie Ihre Werke für verschiedene Betriebssysteme.

Webtauglich

Durch Umsetzung von Processing in JavaScript können wir Processing-Sketches auch im Web einsetzen. Processing.js erlaubt es Processing-Code in einem HTML5 canvas-Element auszuführen.