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.

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.