Programmieren in Processing

GrundlagenBearbeiten

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.

KoordinatensystemBearbeiten

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

AnweisungenBearbeiten

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

Erste SchritteBearbeiten

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.

InteraktionBearbeiten

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ünstlerBearbeiten

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

Speichern und VeröffentlichenBearbeiten

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

WebtauglichBearbeiten

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.