3 If-Anweisung

Normalerweise wird Ihr Code Zeile für Zeile, von oben nach unten, ausgeführt. Manchmal möchte man aber eine Zeile - oder einen ganzen Block von Zeilen - aber nur unter einer bestimmten Bedingung durchführen. Sie möchten das Raumschiff nur dann nach links bewegen, wenn eine bestimmte Taste gedrückt ist. Sie möchten eine Erfolgsmeldung nur dann ausgeben, wenn eine bestimmte Punktzahl erreicht wurde. Dafür gibt es die If-Anweisung. Sie erlaubt es, im Code zu "springen" und somit den sogenannten Kontrollfluss zu verändern.

3.1 Einfache If-Anweisung

Nehmen wir an, Ihr Programm soll einem Prüfling sagen, ob er bestanden hat. Das sei dann der Fall, wenn die Punktzahl (Variable punkte) mindestens 50 beträgt. Im Code wird das so gelöst:

int punkte = 75;

if (punkte >= 50) {
   println("bestanden");
}

Die Zeile mit der Print-Anweisung wird nur unter der Bedingung ausgeführt, dass der Wert von punkte größer oder gleich 50 ist. Ansonsten wird die Zeile übersprungen. Wir ändern also den normalen Kontrollfluss.

Flussdiagramm

Das können wir auch als Flussdiagramm visualisieren (man nennt das auch Programmablaufplan):

Im Flussdiagramm stellen Kästen normale Befehle/Anweisungen dar, die Pfeile zeigen, welche Anweisung als nächstes ausgeführt wird. Eine Raute symbolisiert eine Entscheidung: Von hier aus gehen zwei Pfeile aus, einer mit true, einer mit false beschriftet. Man wählt den Pfeil, der der Bedingung entspricht (die entweder zu true oder false evaluiert worden sein muss).

Man sieht in dem Diagramm sehr schön, dass der Kasten mit "bestanden" nicht immer ausgeführt wird, da sich der Kontrollfluss an der Raute aufteilt.

Wir erweitern unseren Code um eine Zeile hinter der If-Anweisung:

int punkte = 75;

if (punkte >= 50) {
   println("bestanden");
}
println("tschüs");

Wir erweitern unser Flussdiagramm entsprechend, um zu klären, wann diese neue Codezeile ausgeführt wird.

Wir sehen, dass "tschüs" immer ausgegeben wird, unabhängig davon, ob die Bedingung erfüllt ist oder nicht. Wir sind wieder im "regulären" Kontrollfluss.

Bedingung

Die allgemeine Form der If-Anweisung ist:

if (BEDINGUNG)
   ANWEISUNG

Eine Anweisung ist entweder eine einzelne Code-Zeile (Befehl, Variablenzuweisung ...) oder - wie in unseren Beispielen - ein Code-Block, der mit geschweiften Klammern markiert ist. Auf Code-Blocks gehen wir im nächsten Abschnitt ein.

Eine Bedingung ist ein sogenannter boolescher Ausdruck, benannt nach dem britischen Mathematiker George Boole. Ein boolescher Ausdruck ist ein Ausdruck, der nach Auswertung immer entweder wahr (true) oder falsch (false) ist. Die zwei einfachsten booeschen Ausdrücke sind true und false. Sie können z.B. schreiben:

if (true) {
    println("immer");
}

Die obige Anweisung wird immer ausgeführt, was natürlich wenig sinnvoll ist (man kann das if dann auch einfach weglassen), aber es zeigt, dass das Schlüsselwort true (genauso wie false) eine vollwertige Bedingung sein kann.

Eine weiterer boolescher Ausdruck ist ein numerischer Vergleich. Beispiele:

10 > 100
x > 5 + y
41 == foo
x != y
33 < boo

Auf beiden Seiten des Vergleichs

• können beliebig komplexe arithmetische Ausdrücke stehen.
• können Variablen vorkommen, diese werden bei der Abarbeitung durch ihre aktuellen Werte ersetzt.

Beachten Sie insbesondere das "gleich". Es muss mit doppeltem Gleichheitszeichen geschrieben werden! Es ist ein häufiger Anfängerfehler hier nur ein einfaches Gleichheitszeichen zu setzen, da in diesem Fall keine Fehlermeldung ausgegeben wird! Es wird dann nämlich eine Zuweisung vorgenommen, d.h. die Variable, die Sie nur "testen" wollen, wird verändert!

x == 5
z == k
42 == foo

Im Vergleich zu den Vergleichsoperatoren, die man aus der Schule kennt, ist zu beachten:

• Für "kleiner gleich" schreiben Sie <= und zwar in genau dieser Reihenfolge. Ähnlich für "größer gleich".
• Für "gleich" schreiben Sie ein doppeltes Gleichheitszeichen.
• Für "ungleich" wird != geschrieben. Das Ausrufezeichen ist nämlich für Negation zuständig.

Code-Block

Die geschweiften Klammern in den obigen Beispielen markieren jeweils einen sogenannten Code-Block. Code-Blocks erlauben uns, viele Zeilen "zusammenzupacken" und bei der If-Anweisung als Aktion zu definieren, die ausgeführt wird, wenn die Bedingung wahr ist.

Code-Blocks werden uns noch in vielen anderen Zusammenhängen begegnen, z.B. bei Funktionen, Schleifen und Klassen. Beachten Sie, dass die Zeilen innerhalb des Code-Blocks eingerückt sind und zwar alle gleich, so dass man direkt sieht, dass diese Zeilen zusammengehören. In der Processing-Umgebung können Sie das automatisch durchführen lassen im Menupunkt Edit > Auto Format oder mit der Tastenkombination CMD+T (Mac) bzw. STRG+T (Windows).

Die Einrückung ist wichtig, weil ein Code-Block weitere Code-Blöcke enthalten kann. Das heißt die Blöcke können verschachtelt sein. Hier ein Beispiel:

int punkteTest = 75;
int zusatzTest = 85;

if (punkteTest >= 50)
{
   println("Test ist bestanden!");
   if (zusatzTest >= 50)
   {
      println("Zusatztest ist AUCH bestanden!");
   }
}

Der Else-Teil

Wollen wir auch eine Aktion immer dann ausführen, wenn die Bedingung nicht erfüllt ist, können wir noch einen Else-Teil (else heißt "sonst") anfügen:

int punkte = 75;

if (punkte >= 50) {
   println("bestanden");
} else {
   println("durchgefallen");
}
println("tschüs");

Auch hier können wir den Kontrollfluss mit einem Flussdiagramm verdeutlichen:

Eine wichtige Erkenntnis ist, dass, egal ob die Bedingung true oder false ist, immer Code ausgeführt wird (im Diagramm entweder der rechte Ast oder der linke Ast).

Die If-Else-Anweisung ist als ein einziges, zusammengehöriges Konstrukt zu betrachten, der zwei Code-Blöcke enthält. Nach dem If-Else geht es regulär Zeile für Zeile weiter, hier folgt also auch immer das "tschüs".

Beispiel: Fliegender Ball

Nehmen wir an, Sie animieren einen Ball, von links nach rechts zu fliegen. Wenn er rechts aus dem Bildschirm tritt, soll er links wieder auftauchen:

Das Basisprogramm sieht zunächst mal so aus:

int x = 0;

void setup() {
  size(200, 100);
}

void draw() {
  background(0);
  ellipse(x, height/2, 20, 20);
  x++;
}

In dieser Version fliegt der Ball genau einmal über den Bildschirm und verschwindet dann auf Nimmerwiedersehen.

Überlegen Sie, was folgender Satz bedeutet:

Wenn er rechts aus dem Bildschirm tritt,
soll er links wieder auftauchen.

Der erste Teilsatz ist eine Bedingung, das sieht man an dem "Wenn". Wie übersetzen Sie diese Bedingung in Code? Sie betrachten sich Ihre Variablen - das ist in diesem Fall x - und überlegen, wann die Bedingung

Wenn er rechts aus dem Bildschirm tritt

erfüllt ist. Die Antwort: wenn das x genau so groß wird wie das Fenster breit ist, bei unserem 200x100-Fenster also:

x == 200

Denken Sie immer daran, bei Vergleichen das doppelte Gleichheitszeichen zu verwenden.

Noch besser ist es, diese Bedingung allgemein zu halten, denn es könnte sein, dass Sie das Grafikfenster größer oder kleiner stellen. Verwenden Sie die Systemvariable width, die die aktuelle Breite des Grafikfensters enthält.

x == width

Kommen wir zum zweiten Teilsatz:

..., soll er links wieder auftauchen.

Was bedeutet es, dass der Ball links auftaucht? Ganz einfach: dass der x-Wert wieder auf Null gesetzt wird. Wir testen also in unserem Programm in jedem Durchlauf von draw(), ob das x == width ist und, wenn das der Fall ist, setzen wir x auf Null:

int x = 0;

void draw() {
  background(0);
  ellipse(x, height/2, 20, 20);
  x++;

  if (x == width) {
      x = 0;
  }
}

Geschwindigkeit

Die Bewegung des Balls wird durch das x++ verursacht. Bei jedem Durchlauf von draw() wird das x um genau 1 erhöht. Wenn wir das x jedesmal um 3 erhöhen würden, wäre der Ball schneller. Um hier flexibel zu sein, führen wir eine neue Variable als Geschwindigkeit mit Namen speed ein. Statt einer konstanten Zahl wie 1 wird der Wert dieser Variable auf das x addiert. Wir nehmen hier mal Geschwindigkeit 3:

int x = 0;
int speed = 3;

void draw() {
  background(0);
  ellipse(x, 50, 20, 20);
  x = x + speed;

  // VORSICHT!
  if (x == width) {
    x = 0;
  }
}

Plötztlich funktioniert das Neu-Erscheinen des Balls nicht mehr, er verschwindet einfach! Warum? Schauen wir uns mal an, welche Werte das x annimmt, indem wir uns x auf der Konsole ausgeben:

0
3
6
12
...
93
96
99
102
105

Das Problem ist, dass x nicht genau 100 wird, sondern darüber hinweg springt. Deshalb müssen wir unsere If-Bedingung allgemeiner fassen. Man sagt auch, dass man die Bedingung relaxiert, also etwas "weicher" fasst.

if (x >= width) {
  x = 0;
}

Das komplette Programm (ob man hier > oder >= verwendet, spielt keine Rolle):

int x = 0;
int speed = 3;

void draw() {
  background(0);
  ellipse(x, 50, 20, 20);
  x = x + speed;

  if (x > width) {
    x = 0;
  }
}

Rückwärts fliegen

Wenn Sie die Geschwindigkeit mit einer negativen Zahl belegen, können Sie den Ball auch rückwärts fliegen lassen:

int x = 100;
int speed = -2;

void draw() {
  background(0);
  ellipse(x, 50, 20, 20);
  x = x + speed;

  if (x < 0) {
    x = width;
  }
}

Ihnen ist hoffentlich aufgefallen, dass die If-Anweisung verändert wurde. Auf deutsch lautet die Anweisung jetzt:

Wenn der Ball links aus dem Bildschirm tritt,
soll er rechts wieder auftauchen.

"Links aus dem Bildschirm treten" übersetzt sich zur Bedingung x < 0 und "rechts wiederauftauchen" realisiert man mit der Anweisung x = width.

Coding Style

Bitte achten Sie darauf, wo Leerzeichen und Zeilenumbrüche gemacht werden, und wo nicht.

if (x > 100) {
  x = 0;
}

Alternativ kann man einen Umbruch nach der Bedingung einfügen:

if (x > 100)
{
  x = 0;
}

Denken Sie auch daran, Ihre Code mit Bearbeiten > Autoformatierung von Processing korrekt einrücken zu lassen (Tastenkürzel STRG+T bzw. CMD+T).

int foo = 60;

if (foo > 50) {
  println("OK");
}

int a = 50;
int b = 20;

if (a - 10 >= b) {
  println("a gewinnt");
}

int a = 5;
int b = 2;
int c = 5;
int d = 0;

if (a + b > c + d) {
  println("Team ab gewinnt");
}

int z1 = 5;
int z2 = 11;

if (z1 == z2) {
  println("gleich");
} else {
  println("ungleich");
}

if (z1 != z2) {
  println("ungleich");
} else {
  println("gleich");
}

int punkte = 10;

Bestanden!
Auf Wiedersehen.

Leider durchgefallen :(
Auf Wiedersehen.

0 - 4:   Durchgefallen
5 - 9:   Bestanden
10 - 15: Bestanden mit Auszeichnung

int x = 0;

void draw() {
  background(255);
  ellipse(x, 50, 20, 20);
  x++;

  if (x > width) {
    x = 0;
  }
}

void draw() {
  background(255);
  ellipse(mouseX, mouseY, 20, 20);
}

..........

int count = 0;

int gewinnChance = 20;

void draw() {}

void keyPressed() {
  // Ihr Code
}

3.2 If-Else-If

Wenn Sie größere Fallunterscheidungen haben, bietet sich das If-Else-If an.

Möchten Sie zum Beispiel verschiedene Aktionen abfeuern, je nachdem ob ein Prüfling mehr als 75, mehr als 50 oder weniger als 50 hat, müssten Sie zwei If-Anweisungen verschachteln:

int punkte = 55;

// äußere If-Anweisung

if (punkte > 50) {

  // innere If-Anweisung

  if (punkte > 75) {
    println("Bestnote!");
  } else {
    println("Bestanden.");
  }

} else {
  println("Leider durchgefallen"); // Else-Teil
}

Die äußere If-Anweisung unterscheidet zwischen >50 und <=50. Die innere If-Anweisung teilt den Bereich >50 dann nochmal in >75 und <=75.

Auch wenn Verschachtelung erlaubt und in manchen Fällen auch sinnvoll ist, so ist dieser Code doch schwer zu lesen und je mehr Fälle Sie haben, umso unübersichtlicher wird der Code.

Das Else-If erlaubt Ihnen, eine zweite Bedingung hinzuzufügen. Diese Bedingung wird nur dann geprüft, wenn die erste falsch ist. Das schlussendliche Else greift dann, wenn beide Bedingungen falsch waren.

int punkte = 55;

if (punkte > 75) {
   println("Bestnote!");
} else if (punkte > 50) {
   println("Bestanden.");
} else {
   println("Leider durchgefallen"); // Else-Teil
}

Es können beliebig viele Else-If-Teile eingefügt werden:

int punkte = 55;

if (punkte > 90) {
   println("Bestnote!");
} else if (punkte > 75) {
   println("Sehr gut.");
} else if (punkte > 50) {
   println("Bestanden.");
} else {
   println("Leider durchgefallen"); // Else-Teil
}
println("tschüs");

Processing testet zuerst die erste Bedingung. Falls diese falsch ist, wird das erste Else-If getestet. Falls dies falsch ist, wird das nächste Else-If getestet und so fort. Sind alle diese Bedingungen falsch, so wird der Else-Teil ausgeführt. Danach wird zum normalen Kontrollfluss zurückgekehrt.

Allgemein kann man das so schreiben:

if (BEDINGUNG-1)
   ANWEISUNG-1
else if (BEDINGUNG-2)
   ANWEISUNG-2
else if (BEDINGUNG-3)
   ANWEISUNG-3
...
else
   ANWEISUNG-N

Flussdiagramm

Als Flussdiagramm sieht das so aus:

Man sieht hier deutlich, dass nur genau eine Option (d.h. ein Code-Block) ausgeführt wird. Danach wird zum normalen Kontrollfluss zurückgekehrt.

Coding Style

Bitte achten Sie darauf, wo Leerzeichen und Zeilenumbrüche gemacht werden, und wo nicht.

if (foo > 200) {
  println("foo");
} else if (foo > 100) {
  println("bar");
} else {
  println("sonst");
}

Alternativ:

if (foo > 200)
{
  println("foo");
} else if (foo > 100)
{
  println("bar");
} else
{
  println("sonst");
}

Denken Sie auch daran, Ihre Code mit Bearbeiten > Autoformatierung von Processing korrekt einrücken zu lassen (Tastenkürzel STRG+T bzw. CMD+T).

int zahl = -5;

if (zahl >= 0) {
  println("positiv");
} else {
  println("negativ");
}

int punkte = 10;

0  - 10: Durchgefallen
11 - 20: Naja
21 - 30: Mittelgut
31 - 40: Gut
41 - 50: Super

int zustand = 0;

void setup() {
  textAlign(CENTER);
  textSize(20);
}

void draw() {
  background(0);
  if (zustand == 0) {
    text("Hallo", width/2, height/2);
  }
}

3.3 Boolesche Ausdrücke

Um komplexere Sachverhalte auszudrücken, müssen Sie evtl. mehrere Vergleiche kombinieren. Solche Kombinationen sind wieder boolesche Ausdrücke und können also als Bedingung für das If verwendet werden.

Die genannten Kombinationen werden über sogenannte logische Operatoren hergestellt.

Logisches UND

Nehmen wir an, Sie möchten prüfen, ob die Variable x zwischen 10 und 20 liegt, in der Schule schreibt man einfach 10 < x < 20. In Processing müssen Sie das in zwei Vergleiche zerlegen, nämlich in 10 < x und x < 20. Damit "10 < x < 20" wirklich gilt, müssen beide Vergleich wahr sein. Diese Kombination nennt man das logische UND (engl. AND).

Das logische UND nennt man auch einen logischen Operator. Im Code schreibt man für den UND-Operator ein doppeltes "käufmännisches Und", also && :

int x = 5;

if (10 < x && x < 20) {
   println("Yes!");
}

In der mathematischen Logik nennt man diese Operation auch Konjunktion und das Symbol für UND sieht so aus:

Das logische UND ist verwandt mit dem Konzept der Schnittmenge. Wenn Sie sich die zwei Mengen 10 < x und x < 20 vor Augen führen, dann ist (10 < x && x < 20) genau die Schnittmenge.

Logisches ODER

Der zweite wichtige Operator ist das logische ODER (engl. OR). Nehmen wir an, Sie wollen testen, ob die x-Koordinate eines Objekts den Bildschirmbereich verlässt, der 1024 Pixel breit ist. Dann testen Sie ob x < 0 ist oder x >= 1024.

Das logische ODER schreibt man im Code mit zwei senkrechten Strichen ||

int x = 5;

if (x < 0 || x >= 1024) {
   println("Oops!");
}

In der mathematischen Logik nennt man diese Operation auch Disjunktion und das Symbol für ODER sieht so aus: V

Das logische ODER ist verwandt mit dem Konzept der Vereinigungsmenge. Wenn Sie sich wieder die zwei Mengen 10 < x und x < 20 anschauen, dann ist (10 < x || x < 20) genau die Vereinigungsmenge.

Und wo ist dieses Zeichen | auf meiner Tastatur...?

Auf dem Mac mit ALT+7, unter Windows mit Alt Gr + <.

Trivia

Das Zeichen | wird in Unix-Kreisen auch pipe genannt, weil damit die gleichnamige Operation in einer Unix-Shell gekennzeichnet wird.

Negation

Mit dem Ausrufezeichen negieren Sie einen Ausdruck, d.h. Sie kehren den Wert um (true statt false bzw. false statt true). Das Ausrufezeichen nennt man auch den logischen Negationsoperator oder das logische NICHT (engl. NOT). Im Unterschied zu UND/ODER steht dieser Operator nicht zwischen zwei Ausdrücken, sondern vor einem einzigen Ausdruck.

Wenn Sie z.B. den Vergleich x < 10 negieren wollen, schreiben Sie ! (x < 10) . Das entspricht dann offensichtlich x >= 10 , d.h. das könnte man eigentlich auch direkt so (ohne Negation) hinschreiben, aber für komplexere Ausdrücke ist die Negation manchmal bequemer oder lesbarer.

Nehmen wir an, Sie wollen das Beispiel oben "Objekt verlässt Bildschirm" einfach negieren. Das heißt, Sie wollen Code ausführen für den Fall, dass das Objekt noch auf dem Bildschirm ist, dann schreiben Sie:

int x = 5;

if (! (x < 0 || x >= 1024)) {
   println("Bin auf dem Schirm!");
}

In der mathematischen Logik sieht das Symbol für Negation so aus: ¬

Sollten Sie sich fragen, wie man die obige Bedingung ohne Negation schreibt, kommen Sie auf diesen Ausdruck: x >= 0 && x < 1024 . Das heißt, wenn man einen Ausdruck mit logischem ODER negiert, dann negiert man beide Einzelteile und man "dreht den Operator um", d.h. aus ODER wird UND und umgekehrt. Das nennt man das De Morganschen Gesetz.

! (x < 0 || x >= 1024)

   entspricht

! (x < 0) && ! (x >= 1024)

   entspricht

x >=0 && x <1024

Komplexe Ausdrücke und Präzedenz

Sie können beliebig viele logische Ausdrücke mit UND/ODER kombinieren und mit NICHT negieren.

Wie wird ein solcher Ausdruck ausgewertet? Nehmen wir ein Beispiel mit zwei logischen Operatoren:

int k = 5;
float f = 2.5;
int t = 30;

if (k > 0 && f < 10.0 || t > 100) {
  println("hurra");
}

Processing nimmt sich die Bedingung:

k > 0 && f < 10.0 || t > 100

Und setzt zunächst die Variablenwerte ein:

5 > 0 && 2.5 < 10.0 || 30 > 100

Dann werden die einzelnen Vergleiche aufgelöst:

true && true || false

Jetzt gehen wir von links nach rechts vor und lösen einen Operator nach dem nächsten, also zunächst das true && true, das wird zu true. Anschließend haben wir noch:

true || false

Dies wird wiederum aufgelöst zum Ergebnis:

true

In unserem Beispiel konnten wir von links nach rechts rechnen, aber das gilt nicht immer, denn der UND-Operator hat Priorität vor ODER.

Sehen wir uns das obige Beispiel leicht modifiziert an: das UND steht jetzt hinten, das ODER vorn:

k > 0 || f < 10.0 && t > 100

Wir setzen die Variablenwerte ein:

5 > 0 || 2.5 < 10.0 && 30 > 100

Und lösen die Vergleiche auf:

true || true && false

Jetzt kommt der entscheidende Unterschied: Statt von links nach rechts zu rechnen, müssen wir das UND vorziehen (das wird Präzedenz genannt):

true || true && false

Wir lösen als zunächst true && false auf zu false:

true || false

Dies wird wiederum aufgelöst zum Ergebnis:

true

Allgemein gesprochen verwendet Java bei booleschen (logischen) Ausdrücken ähnliche Regeln wie bei arithmetischen Ausdrücken (also Rechnungen mit +, -, *, /). Dabei gelten folgende Regeln:

In der Tabelle bedeutet eine höhere Priorität, dass der Operator als erstes ausgewertet wird. Das bedeutet: der Negationsoperator wird immer zuerst ausgewertet. Ferner gilt: ein UND wird immer vor ODER ausgewertet.

Wenn Sie folgenden Ausdruck vor sich haben:

a || b && !c || d

Wird dieser so ausgewertet, als gäbe es folgende Klammern:

(a || (b && (!c))) || d

Beispiel: Abprallender Ball

Wir schauen uns das Programm von oben, inklusive Geschwindigkeit, nochmal an:

Dank der Geschwindigkeit kann der Ball sowohl nach rechts (speed = 1) als auch nach links (speed = -1) fliegen. Daher möchten wir jetzt, dass der Ball von der rechten Wand abprallt. Das gleiche gilt natürlich auch für die linke Wand.

Man könnte das so formulieren:

Wenn der Ball den rechten Rand erreicht,
soll er nach links weiterfliegen.

Der erste Teilsatz übersetzt sich wieder zu der Bedingung x > width. Der zweite Satz "nach links weiterfliegen" lässt sich realisieren, indem man die Geschwindigkeit auf -1 setzt:

if (x > width) {
  speed = -1;
}

Analog für den linken Rand:

Wenn der Ball den linken Rand erreicht,
soll er nach rechts weiterfliegen.

Im Code:

if (x < 0) {
  speed = 1;
}

Vorzeichen umdrehen

Wenn wir die Lösung allgemeiner betrachten, sehen wir, dass in beiden Fällen einfach das Vorzeichen der Geschwindigkeit umgedreht wird. Aus 1 wird -1 und aus -1 wird 1. Im Code lässt sich das Umdrehen des Vorzeichens ganz elegant formulieren:

speed = -speed;

Das Schöne an dieser Formulierung ist, dass es egal ist, welcher Wert in speed steht, ob 1, 15 oder 3002. Wenn der Wert negativ ist, wird er positiv. Ist er positiv, wird er negativ.

Der Code würde also wie folgt aussehen:

int x = 0;
int speed = 1;

void draw() {
  background(255);
  ellipse(x, 50, 20, 20);
  x = x + speed;

  if (x > width) {
    speed = -speed;
  }

  if (x < 0) {
    speed = -speed;
  }
}

Zusammenfassen der If-Anweisungen

In dem oberen Code fällt auf, dass in beiden If-Anweisungen der exakt gleiche Code ausgeführt wird. Man könnte also auch sagen: wenn x > width oder x < 0 der Fall ist, dann drehe das Vorzeichen um. Also ein Fall für den booleschen Operator ODER:

int x = 0;
int speed = 3;

void draw() {
  background(255);
  ellipse(x, 50, 20, 20);
  x = x + speed;

  if (x < 0 || x > width) {
      speed = -speed;
  }
}

Ein wichtiger Vorteil zu unserer ersten Lösung: wir können wieder beliebige Geschwindigkeitswerte nehmen, z.B. eben 3:

Sie können diesen Code relativ leicht auf zwei Dimensionen erweitern. Fügen Sie einfach entsprechende Variablen für die y-Richtung hinzu.

Visualisieren der Geschwindigkeit

Wir können die Geschwindigkeit als Linie zeichnen. So können wir sowohl die Größenordnung als auch die Richtung ablesen.

Wir zeichnen eine (rote) Linie vom Mittelpunkt des Balls und nehmen das zehnfache der Geschwindigkeit als Länge (sonst wäre die Linie nur 3 Pixel lang).

int x = 0;
int speed = 3;

void setup() {
  size(200, 100);
  strokeWeight(2);
}

void draw() {
  background(0);
  noStroke();
  ellipse(x, 50, 20, 20);

  stroke(255, 0, 0);
  line(x, 50, x + 10*speed, 50);

  x = x + speed;
  if (x < 0 || x > width) {
    speed = -speed;
  }
}

Probieren Sie den Code auch mit anderen Geschwindigkeiten.

float a = 23;
float b = 110;
float x = 55;

if (x > a && x < b) {
  println("x innerhalb");
} else {
  println("x außerhalb");
}

float a = 110;
float b = 23;
float x = 55;

if (x > a && x < b || x > b && x < a) {
  println("x innerhalb");
} else {
  println("x außerhalb");
}

float a = 23;
float b = 110;
float x = 250;

if (x < a || x > b) {
  println("x extrem");
}

// Ändern Sie die Werte zum Testen
int alter = 21;
float note = 1.7;

// Ändern Sie die Werte zum Testen
float note = 2.3;
int programmiererfahrung = 5;

int x = 0;

void draw() {
  background(0);

  // Linien zum Markieren der Zone
  stroke(255);
  line(25, 0, 25, height);
  line(75, 0, 75, height);

  // hier wird animiert...
  ellipse(x, 50, 20, 20);
  x++;
  if (x > width) {
    x = 0;
  }
}

3.4 Boolesche Variablen

Sie kennen jetzt Bedingungen in If-Anweisungen und sogar boolesche Ausdrücke mit AND und OR. Boolesche Variablen sind ganz primitive Zeitgenossen, da sie lediglich einen von zwei möglichen Werten speichern können: true oder false .

Wozu braucht man sowas? In Processing wollen Sie sich zum Beispiel einen Zustand merken. Wenn Sie zum Beispiel eine Animation haben, möchten Sie sich merken, ob die Animation laufen soll (play) oder anhalten (pause).

Nehmen wir mal eine einfache Animation:

int x = 0;

void draw() {
  background(255);
  ellipse(x, 50, 20, 20);
  x++;

  // immer wieder von links reinkommen
  if (x >= 100) {
    x = 0;
  }
}

Um einen einfachen play/pause Mechanismus zu implementieren, führen wir eine boolesche Variable play ein. Wenn diese true ist, soll die Animation laufen. Wenn sie false ist, nicht:

int x = 0;
boolean play = true;

void draw() {
  background(255);
  ellipse(x, 50, 20, 20);

  // NEU: bewege dich nur, wenn play true ist
  if (play) {
    x++;
  }

  // immer wieder von links reinkommen
  if (x >= 100) {
    x = 0;
  }
}

Es hat sich nicht viel geändert, aber Sie können die Variable play von Hand auf false setzen, dann bleibt der Ball links stehen. Beachten Sie, dass Sie nicht play == true in die Bedingung schreiben müssen (obwohl das auch funktionieren würde). Wenn play true ist, wird direkt true eingesetzt - das gleiche gilt für den Fall, dass play false ist. Keine Notwendigkeit also, nochmal == true hinzuschreiben.

Jetzt müssen Sie nur noch "zur Laufzeit", also während das Programm läuft, die Variable play umsetzen. Das funktioniert, indem Sie die folgende Funktion hinzufügen:

void keyPressed() {
  if (play) {
    play = false;
  } else {
    play = true;
  }
}

Interaktives Feld:(erst auf das graue Feld klicken, dann Taste)

Sie setzen also die Variable play in Abhängigkeit von ihrem aktuellen Zustand, nämlich auf ihr 'Gegenteil'. In der Logik nennt man das auch die Negation ihres Zustands. Das kann man ganz elegant formulieren als:

void keyPressed() {
  play = !play; // setze play auf seine eigene Negation
}

Das Negationszeichen funktioniert also ähnlich wie das Minuszeichen in der Arithmetik. Natürlich sind beide Code-Varianten völlig legitim und in Ordnung.

Boolesche Variablen und boolesche Ausdrücke

In eine boolesche Variable kann ein beliebiger boolescher Ausdruck per Zuweisung hineingetan werden. Im folgenden Beispiel wird der Ball in der x-Zone 30-70 rot gefärbt:

int x = 0;
boolean inTheZone = false;

void draw() {
  background(255);

  // boolescher Ausdruck
  inTheZone = x > 30 && x < 70;

  if (inTheZone) {
    fill(255, 0, 0); // rot
  }
  else {
    fill(255); // weiß
  }

  ellipse(x, 50, 20, 20);
  x++;
}

Auch hier zeigt sich der Vorteil der Varible erst, wenn die Information an anderer Stelle bzw. zu anderer Zeit verwendet wird. Wollen Sie etwa per Tastendruck den Ball wieder auf x=0 setzen unter der Bedingung, dass der Ball in 'der Zone' ist, dann fügen Sie hinzu:

void keyPressed() {
  if (inTheZone) {
    x = 0;
  }
}

Boolesche Variablen als Teil boolescher Ausdrücke

Boolesche Variablen können natürlich auch Bestandteil von booleschen Ausdrücken sein. Hier zwei Beispiele:

boolean foo = true;
boolean goo = false;
int x = 10;

boolean ausdruck1 = foo && goo;
boolean ausdruck2 = foo || x > 5;

println(ausdruck1);
println(ausdruck2);

boolean istKorrekt = true;

if (istKorrekt) {
  println("richtig");
} else {
  println("falsch");
}

boolean foo = true;
boolean bar = false;

if (foo == bar) {
  println("gleich");
} else {
  println("ungleich");
}

int a = 5;
int b = 10;

boolean agb = a > b;

println(agb);

boolean foo = true;

// Hier kommt Ihr Code hin

println(foo);

// Gleicher Code wie oben

println(foo);

false
true

play = !play;

if (play) {
  x++;
}

3.5 Tasten unterscheiden

Interaktion mit Tasten

Nachdem wir die If-Anweisung kennengelernt haben, können wir wesentlich differenzierter mit Benutzereingabe umgehen. Wir können z.B. unterscheiden, welche Taste gedrückt wurde.

Sie wissen, dass Sie auf einen Tastendruck reagieren können, indem Sie die Funktion keyPressed() einfügen. Der Code in dieser Funktion wird immer dann ausgeführt, wenn Sie eine beliebige Taste drücken:

void setup() {}

void draw() {}

void keyPressed() {
  println("Bravo! Eine Taste! Yeah!");
}

Datentyp char

Große Preisfrage: Welche Taste wurde gedrückt? Dazu müssen wir erstmal den Datentyp char kennenlernen (ein Datentyp ist sowas wie int und float). char steht für "character" (engl. für Schriftzeichen). Eine solche Variable enthält genau ein Zeichen (Buchstaben, Zahlen oder Zeichen wie , . # * etc.). Ein einzelnes Zeichen wird mit einfachen Anführungszeichen abgegrenzt . Hier einige Beispiele für char-Variablen.

char foo = 'a';
char boo = 'A'; // ist nicht gleich foo!
char nochnZeichen = '#';
char machMalnPunkt = '.';

Systemvariable key

Die Systemvariable key enthält immer die zuletzt gedrückte Taste. Wichtig: Wenn Sie 'a' drücken und die Taste loslassen, enthält key immer noch 'a'. Im folgenden Code ist das dennoch kein Problem, weil keyPressed() nur ein Mal aufgerufen wird, wenn Sie die Taste 'a' drücken:

void setup() {
}

void draw() {
}

void keyPressed() {
  if (key == 'a') {
    println("A ha.");
  }
}

Kontinuierliche Tastenabfrage (boolesche Variable keyPressed)

Problem mit dem obigen Code: Wenn Sie damit ein Spiel steuern wollen, reagiert Processing nicht, wie Sie möchten:

// Kreis-Steuerung: suboptimale Lösung
int x = 50;

void setup() {
}

void draw() {
  background(255);
  ellipse(x, 50, 20, 20); // Kreis malen
}

void keyPressed() {
  if (key == 'a') {
    x++; // Kreis nach rechts bewegen => es hakt leider
  }
}

Auch hier kommt uns Processing zu Hilfe. Die Variable keyPressed ist eine boolesche Variable, d.h. sie enthält entweder den Wert true oder den Wert false . Diese Variable ist immer dann true, wenn eine Taste im gedrückten Zustand ist. Das können wir ausnutzen, um direkt im draw() unsere Tastaturabfrage zu machen:

int x = 50;

void setup() {
}

void draw() {
  background(200);
  ellipse(x, 50, 20, 20);

  // Abfrage direkt in draw() statt in Funktion
  if (keyPressed) {
    if (key == 'a') {
      x++; // Kreis nach rechts bewegen
    }
  }
}

Warum ist die keyPressed-Abfrage überhaupt notwendig? Wenn Sie sie weglassen, bewegt sich der Kreis nach Drücken und Loslassen der Taste 'a' ständig weiter, da key immer die zuletzt gedrückte Taste enthält.

Variable keyCode

Häufig wollen Sie Bewegung an die Cursortasten binden. Diese Tasten lassen sich, ähnlich wie ENTER, BACKSPACE, ESCAPE etc. nicht einfach zwischen zwei Anführungszeichen schreiben. Deshalb verwendet man die Variable keyCode, die einen numerischen Code für jede Taste enthält. Wenn Sie den keyCode von den Cursortasten kennen, können Sie per Vergleich die Tasten abfragen:

int x = 50;

void setup() {
}

void draw() {
  background(200);
  ellipse(x, 50, 20, 20);

  if (keyPressed) {
    if (keyCode == RIGHT) {
      x++; // Kreis nach rechts
    }
    if (keyCode == LEFT) {
      x--; // Kreis nach links
    }
  }
}

Im Code sehen Sie einen Vergleich von keyCode (enthält eine Zahl, nämlich den Code der zuletzt gedrückten Taste) und der Variablen RIGHT, welche die Zahl enthält, die die linke Cursortaste repräsentiert.

Interaktion mit Maustasten

Bei den Maustasten verhält es sich ähnlich wie mit der Tastatur. Sie haben wieder zwei Möglichkeiten.

Möglichkeit 1: Funktion mousePressed() schreiben

Sie können die Funktion mousePressed() schreiben. Diese wird immer dann aufgerufen, wenn eine der Maustasten gedrückt wird:

void draw() {
}

void mousePressed() {
  println("hello");
}

Beachten Sie, dass Sie innerhalb des Grafikfensters klicken müssen.

Über die Systemvariable mouseButton können Sie unterscheiden, welche der Maustasten gedrückt wurde:

void draw() {
}

void mousePressed() {
  if (mouseButton == LEFT) {
    println("hello");
  }
  if (mouseButton == RIGHT) {
    println("again");
  }
  if (mouseButton == CENTER) {
    println("in the middle");
  }
}

Ähnlich wie keyCode enthält diese Variable eine Zahl. Diese Zahl können Sie mit einer der Systemvariablen LEFT, RIGHT, CENTER vergleichen, um zu prüfen, welche der drei Tasten gedrückt wurde.

Möglichkeit 2: boolesche Variable mousePressed in draw()

Analog zu keyPressed gibt es eine boolesche Variable mousePressed, die solange true ist, wie der Benutzer eine der Maustasten gedrückt hält. Das erlaubt eine kontinuierliche Abfrage innerhalb der draw()-Funktion wie hier:

void draw() {
  if (mousePressed) {
    if (mouseButton == LEFT) {
      println("hello");
    }
    if (mouseButton == RIGHT) {
      println("again");
    }
    if (mouseButton == CENTER) {
      println("in the middle");
    }
  }
}

Sie sehen, dass 60 Mal pro Sekunde die Ausgabe gemacht wird, sofern Sie eine der Tasten gedrückt halten.

3.6 Kollisionserkennung

In diesem Kapitel überlegen wir uns, wie einfach interaktive Elemente funktionieren, wie Sie sie für ein grafisches Interface (GUI, graphical user interface) und Spiele benötigen würden.

Das einfachste interaktive Element ist eine Form, die "aktiv" wird, sobald der Mauszeiger auf ihr liegt, und "inaktiv", sobald der Mauszeiger wieder fort ist.

Dazu müssen wir zunächst wissen, wie wir feststellen, dass der Mauszeiger auf einem Objekt liegt. Das nennt man auch Kollisionerkennung und ist in Computerspielen von hoher Bedeutung.

Punkt-Rechteck

Kollisionserkennung zwischen einem Punkt (z.B. dem Mauszeiger) und einem Rechteck, das parallel zu den Achsen des Koordinatensystems liegt, ist sehr einfach.

Als Rechteck nehmen wir ein Rechteck mit Eckpunkt (rx, ry) und der Größe rwidth und rheight. Den Punkt, für den wir die Kollision berechnen wollen, nennen wir (x, y).

Wir überlegen uns das Problem zunächst nur für die x-Achse. Wenn wir nur die x-Achse betrachten, heißt "Kollision", dass der Wert x innerhalb des Bereichs rx und rx + rwidth liegt. Wenn das der Fall ist, liegt unser Punkt also schonmal innerhalb des korrekten x-Bereichs.

Anschließend betrachten wir die y-Achse. Auch da gilt: "Kollision" heißt hier, dass der y-Wert des Punkts zwischen den Werten ry und ry + height liegt.

Insgesamt schließen wir also: Der Punkt liegt im Rechteck, wenn die folgenden zwei Bedingungen gleichzeitig gelten:

rx <= x <= rx + rwidth
ry <= y <= ry + rheight

Im Code sieht das so aus (statt x, y finden Sie mouseX, mouseY):

// interface_1
// Kollision mit Rechteck (Selektion per Rollover)

int rx = 50;
int ry = 50;
int rwidth = 150; // Breite
int rheight = 200; // Höhe

void setup() {
  size(300, 300);
  noStroke();
}

void draw() {

  // setze Füllfarbe ...
  if (rx <= mouseX && mouseX <= rx + rwidth &&
    ry <= mouseY && mouseY <= ry + rheight) {
    // ... wenn Mauszeiger im Rechteck => rot
    fill(255, 0, 0);
  }
  else {
    // ... sonst: weiß
    fill(255);
  }
  rect(rx, ry, rwidth, rheight);
}

Interaktives Feld:(gehen Sie mit der Maus über das Rechteck!)

Punkt-Kreis

Kollisionserkennung zwischen einem Punkt und einem Kreis ist sogar noch einfacher. Dazu vergleicht man die Distanz des Punkts (x, y) mit dem Mittelpunkt (cx, cy) des Kreises.

Ist die Distanz geringer als der Radius, so ist der Punkt im Kreis:

dist(x, y, cx, cy) < radius

Die Processing-Funktion dist() berechnet den Abstand zweier Punkte, die mit insgesamt vier Parametern angegeben werden. Im folgenden Code nehmen wieder mouseX, mouseY den Platz von x, y ein und der Radius errechnet sich aus diameter/2.

// interface_2
// Kollision mit Kreis (Selektion per Rollover)

int cx = 170;
int cy = 160;
int diameter = 180; // Durchmesser

void setup() {
  size(300, 300);
  noStroke();
}

void draw() {
  // setze Füllfarbe ...
  if (dist(mouseX, mouseY, cx, cy) < diameter/2) {
    // ... wenn Mauszeiger im Rechteck => rot
    fill(255, 0, 0);
  }
  else {
    // ... sonst: weiß
    fill(255);
  }
  ellipse(cx, cy, diameter, diameter);
}

Interaktives Feld:(gehen Sie mit der Maus über den Kreis!)

Weitere Kollisionen

Mit den obigen Techniken können Sie also Kollisionen zwischen Punkt-Rechteck und Punkt-Kreis erkennen. Damit lässt sich schon eine Menge anfangen.

Wer aber auch wissen will, wie man Kollisionen zwischen

• Rechteck-Rechteck
• Kreis-Rechteck
• Punkt-Linie
• Linie-Linie
• etc.

erkennen kann, kann sich die folgende Webseite mit interaktiven Processing-Beispielen ansehen: Collision Detection by Jeff Thompson.

Als Beispiel die Kollision Rechteck-Rechteck (siehe Thompsons Collision Rectangle-Rectangle).

Interaktives Feld:

int x1 = 30;
int y1 = 10;
int x2 = 10;
int y2 = 40;

void draw() {
  background(255);
  noFill();
  rect(x1, y1, 50, 50);
  rect(x2, y2, 50, 50);

  ellipse(mouseX, mouseY, 20, 20);
}

float ax = 50; // x-Position von Punkt a

float bx = 5; // x-Position des Startpunkts der Linie b
float bwidth = 30; // Breite der Linie b

void draw() {
  background(0);
  strokeWeight(5);

  stroke(0,255,0);
  point(ax, 50);

  stroke(255);

  // HIER IHR CODE

  line(bx, 60, bx+bwidth, 60);

  if (keyPressed) {
    if (keyCode == LEFT) {
      bx -= 2;
    } else if (keyCode == RIGHT) {
      bx += 2;
    }
  }
}

float ax = 60; // x-Position des Startpunkts der Linie a
float awidth = 30; // Breite der Linie a

float bx = 5; // x-Position des Startpunkts der Linie b
float bwidth = 40; // Breite der Linie b

void setup() {
  size(150, 100);
}

void draw() {
  background(0);
  strokeWeight(4);

  stroke(0,255,0);
  line(ax, 50, ax+awidth, 50);

  stroke(255);

  // HIER IHR CODE

  line(bx, 60, bx+bwidth, 60);

  if (keyPressed) {
    if (keyCode == LEFT) {
      bx -= 2;
    } else if (keyCode == RIGHT) {
      bx += 2;
    }
  }
}