Interaktion

In Processing ist es sehr einfach von Anfang an eine Interaktion zu implementieren. Wie wir bereits gesehen haben, kann man die Mausposition über mouseX und mouseY abrufen. Mausklicks werden über mousePressed() erfasst. Uns fällt auf, dass bei mousePressed anschließend zwei Klammern verwendet werden. Das liegt daran, dass es sich dabei um eine Methode handelt. Den Ausdruck „Methode“ haben wir auch bei setup() und draw() verwendet.

Methoden

auch als Unterroutinen bezeichnet
 
Methoden sind prinzipiell dazu da den Code leserlicher zu machen und Redundanzen (Wiederholungen) zu vermeiden. Ein Stück Code, dass immer wieder verwendet werden soll, ist am besten in einer Methode aufgehoben. Natürlich kann man den Code immer wieder mit Copy & Paste einfügen, doch dass führt zu langem, schwer leserlichen Code und es ist auf Dauer mühsam immer wieder ein Codestück rauszusuchen, zu kopieren und einzufügen.
 
Allgemeine Form:
ret-Typ Name (Parameterliste) {
//Methodenrumpf
}
 
Der Name kann frei gewählt werden und wird prinzipiell klein geschrieben. Der ret-Typ (return Typ) ist der Rückgabewert. Und die Parameterliste ist eine Aufzählung an Variablen, die mit einem Komma getrennt werden.
 
Wenn man selber eine Methode schreibt, überlegt man sich also, was die Methode tun soll und was man dazu benötigt. Möchte ich beispielsweise ein Methode schreiben zum Addieren zweier Integer-Werte, dann erwarte ich mir von demjenigen, der die Methode aufruft, dass er mir zwei Integer-Werte gibt und keine Strings oder booleans. Diese Werte nennt man Argumente oder Parameter und werden in der Parameterliste näher definiert. Außerdem möchte ich, dass die Methode die Summe zurück gibt. Auch hier muss ich definieren von welchem Typ der Rückgabewert ist. Die Methode würde beispielsweise so aussehen:

int add2integers(int x, int y){
	int sum;
	sum = x + y;
	return sum;
}

In dieser Methode ist das erste int der Rückgabewert. Sobald ich hier einen Wert stehen habe, muss ich return und eine Variable von diesem Typ angeben. Sobald return aufgerufen wird, endet die Methode, alles was danach steht wird nicht mehr ausgeführt.
Der Name add2integers ist frei gewählt. Die Parameterliste deklariert zwei Variablen, die nur in dieser Methode bekannt sind. Sie werden anschließend addiert und der Variable sum zugewiesen.
 
Um die Methode im Hauptprogramm aufzurufen, wird der Name der Methode geschrieben und, falls vorhanden, Parameter angegeben.

int number1 = 10;
int number2 = 20;
int sum = add2integers(number1, number2);

 
Prinzipiell gibt es zwei verschiedene Arten von Methoden:
eine Prozedur – eine Methode, die etwas tut
eine Funktion – eine Methode, die etwas tut und einen Wert zurückliefert

Eine Methode muss keine Parameter besitzen. Es kann auch vorkommen, dass man einfach eine Methode aufruft und diese anschließend etwas tut oder einen Wert zurückgibt. Die Klammern werden dabei trotzdem gemacht – sie sind jedoch leer.
 
Wenn eine Methode keinen Rückgabewert besitzt, so wird dafür der Begriff void als ret-Wert verwendet. Sie wird auch als Prozedur bezeichnet.
 
Wenn wir also in Processing Code in die setup() Methode oder draw() Methode geschrieben haben, haben wir diese näher definiert. Beide Methoden haben keinen Rückgabewert, nun wird auch klar, wieso wir hier zu Beginn immer void geschrieben haben.

Keyboard

Processing gibt uns schon vorgefertigte Methoden für das Auslesen von Tasten auf der Tastatur, was die Methode damit allerdings macht, ist noch nicht näher definiert – das liegt nun an uns.
Beispielsweise wird keyPressed() jedes mal ausgeführt, wenn eine Taste (key) gedrückt wird.
Mit einem einfachen if-Statement kann nun näher definiert werden, was genau getan werden soll, wenn eine bestimmte Taste gedrückt wird.

void keyPressed(){
   if (key == 's'){
       background(100);
   }
}

Hier wird, wenn „S“ gedrückt wird, die Hintergrundfarbe geändert.
Die keyPressed() Methode muss nicht von uns aufgerufen werden, sondern wird von Processing aufgerufen, sobald eine Taste (key) gedrückt wird.

Mouse

• mouseMoved()
• mouseDragged()
• mousePressed()
• mouseReleased()
• …

Übung

Übung: Hälften einfärben
Erzeuge einen Canvas mit 800×600 Pixel. Färbe den Hintergrund weiß ein.
Je nachdem in welcher Hälfte sich der Mauszeiger befindet soll die Hälfte rot (linke Seite) oder grün (rechte Hälfte) eingefärbt werden.

Lösung

void setup(){
   size (800,600);
   noStroke();
}

void draw(){
   background(255);
   if (mouseX < width/2){
        fill(255,0,0);
        rect(0,0, width/2, height);
   } else {
        fill(0,255,0);
        rect(width/2, 0, width, height);
   }
}

Wie verändert sich das Beispiel nun, wenn der Canvas gedrittelt werden soll. Je nachdem, wo sich der Mauszeiger befindet soll das erste Drittel rot, das zweite Drittel grün und das dritte Drittel blau erscheinen.
Beachte dabei: Die Lösung benötigt eine verschachtelte if-Anweisung. Setze die Grenzen richtig und bedenke, dass der Canvas bei 0,0 anfängt!

Lösung

void setup(){
   size (800,600);
   noStroke();
}

void draw(){
   background(255);
   
   if (mouseX < width/3){
        fill(255,0,0);
        rect(0,0, width/3, height);
   } else if(mouseX >= width/3 && mouseX < (width/3)*2) {
        fill(0,255,0);
        rect((width/3), 0, (width/3), height);
   } else{
       fill(0,0,255);
       rect((width/3*2), 0, width/3, height);
   }
}

Übung: Kreisgröße abhängig von Mausposition
Erzeuge ein 800×800 Pixel großes Ausgabefenster. Zeichne einen Kreis, dessen Ursprung in der Mitte liegt und dessen Größe von jeder Mausbewegung abhängt. Die Größe des Kreises soll sich ändern, wenn die Maus vertikal und horizontal bewegt wird.

Lösung

void setup() {
  size(800, 800);
  background(0);
  smooth();
}

void draw() {
  //background(255);
  int s = mouseX + mouseY;
  stroke(255, 14, 81);
  noFill();
  ellipse(width/2, height/2, s, s);
}