11: Bedingte Anweisungen

Vorheriger Schritt

Nächster Schritt

Was du in diesem Schritt lernst

• Bedingte Anweisungen.
• "Wenn-Dann-Sonst" Anweisungen
• Wahrheitswerte.

Kannst du dich noch an dieses Programm aus Schritt 9 erinnern?

Klicken, um das Programm zu starten.

Eigentlich wäre es schöner, wenn der Ball nicht einfach aus dem Bild fliegen würde.

Vielleicht hast du dies schon mithilfe des Modulo-Operators verhindert, aber dann "teleportiert" der Ball einfach wieder nach links und fliegt erneut los.

Noch schöner wäre es, wenn der Ball vom Rand "abprallen" würde. Wir möchten also so etwas programmieren:

wenn Ball am Bildrand
dann
	ändere die Richtung

Ein solches Konstrukt ("wenn - dann") nennt man eine Bedingte Anweisung (oder auch Verzweigung).

In Java wird sie mit dem if-Befehl umgesetzt. (Daher sagen wir hier auch einfach if-Anweisung.)

Das Programm aus Schritt 9 könnten wir so modifizieren:

int x = 0;
int dx = 1;

void draw() {
  background(200);
  ellipse(x, 50, 20, 20);
  x = x + dx;
  if( x > width ) {
    dx *= -1;
  }
}

dx steht für "delta x". Das bedeutet "Änderung von x". Die Änderung ist zunächst 1. Sobald die Bedingung x > width wahr ist, wird der Code im Block der if-Anweisung ausgeführt. dx *= -1 multipliziert den Inhalt der Variablen dx mit -1 und speichert das Ergebnis direkt wieder in dx. Aus 1 wird also 1 * -1 = -1. Nun wandert der Ball nach links aus dem Fenster.

Arbeitsauftrag

1. Ergänze das Programm um eine bedingte Anweisung, die den Ball auch vom linken Rand abprallen lässt.
2. Ergänze dann zwei neue Variablen y und dy, sowie zwei bedingte Anweisungen, die den Ball vom oberen und unteren Rand abprallen lassen. Teste das Programm mit verschiedenen Werten für dx und dy.

   Tipp: Du kannst mit random() auch zufällige Werte für die Bewegung und Startposition generieren lassen. Dazu musst du den Befehl in der void setup() Methode ergänzen.

   Klicken, um das Programm zu starten.

Bedingte Anweisungen ermöglichen in Kombination mit Variablen, die sich dynamisch verändern, komplexe Programme zu verfassen.

Klicken, um das Programm zu starten.

Arbeitsauftrag

1. Notiere die Bedingungen, die vermutlich im Programm oben verwendet wurden, als "Wenn-Dann" Sätze.
2. Erweitere das "greet"-Programm aus 10 so, dass auch das Geschlecht berücksichtigt wird. Ergänze dazu einen weiteren Parameter gender vom Typ int. Ist der Wert 1, dann soll mit "Frau", ist er 2 mit "Herr" begrüßt werden.

   Beispielsweise gibt greet("Hi", "Meier", 1) die Begrüßung "Hi, Frau Meier!" aus.

Vergleichsoperatoren

Um eine Bedingung zu schreiben, brauchen wir Vergleichsoperatoren, die zwei Werte vergleichen und dann einen Wahrheitswert ergeben. Folgende Operatoren kannst du zunächst verwenden:

"ist gleich"	a == b	Ist a genau gleich zu b.
"echt größer"	a > b	Ist a größer (aber nicht gleich) b.
"echt kleiner"	a < b	Ist a kleiner (aber nicht gleich) b.
"größer oder gleich"	a >= b	Ist a größer oder gleich b.
"kleiner oder gleich"	a <= b	Ist a kleiner oder gleich b.
"nicht gleich"	a != b	Ist a ungleich (also nicht gleich) b.

Der Vergleich von zwei Werten wird immer mit == (zwei Gleichheitszeichen) gemacht. Ein einfaches Gleichheitszeichen (=) haben wir schon für die Zuweisung zu einer Variablen benutzt!

Wenn-Dann-Sonst

Oftmals möchte man nicht nur beim Eintreten einer Bedingung etwas passieren lassen, sondern auch etwas anderes, wenn das Gegenteil eintritt (also dann, wenn die Bedingung genau nicht eintritt).

Wenn die Maus in der linken Hälfte ist
dann
    zeichne ein rotes Quadrat an der Mausposition
sonst
    zeichne ein blaues Dreieck an der Mausposition

In Java gibt es dafür den else-Befehl:

void setup() {
  size(400,400);
  rectMode(CENTER);
}

void draw() {
  background(200);
  if( mouseX < width/2 ) {
    fill(255,0,0);
    rect(mouseX, mouseY, 20, 20);
  } else {
    fill(0,0,255);
    triangle(mouseX, mouseY-10, mouseX-10, mouseY+10, mouseX+10, mouseY+10);
  } 
}

Arbeitsauftrag

1. Übernimm das Programm oben in Processing und probier es aus. Ergänze es dann so, dass in jedem Quadranten der Zeichenfläche eine andere Figur an der Mausposition gezeichnet wird.
2. Programmiere ein Glücksspiel: Bei einem Tastendruck soll eine Zufallszahl bis 100 erzeugt werden (nutze dazu random()) liegt die Zahl unter einer in einer Variablen festgelegten Schwelle, hat der Spieler gewonnen.
   Nutze diese Vorlage:

   int gewinnChance = 20;
   
   void draw() {
     // bleibt leer
   }
   
   void keyPressed() {
     // Dein Code
   }
   

   Überleg dir eine Visualisierung für das Ergebnis. Du kannst etwa den Hintergrund rot bzw. grün einfärben. Oder du nutzt println().

Wahrheitswerte

Als du im 8 Variablen kennengelernt hast, hast du eine Liste von Datentypen bekommen. Unter ihnen befanden sich Wahrheitswerte (boolean).

Wahrheitswerte sind ein besonderer Typ, da sie nur genau zwei Werte annehmen können: Wahr (true) und falsch (false).

Wenn du eine Bedingte Anweisung nutzt, dann benutzt du auch immer einen Wahrheitswert, da die Bedingung entweder wahr ist, oder falsch.

Eine Bedingung wie mouseX > 5 wird genau dann zu true, wenn in der Variablen mouseX eine Zahl größer als 5 steht. Ansonsten wird sie zu false.

Wir könnten die Werte true und false auch direkt als Bedingung benutzen, allerdings macht das nicht besonders viel Sinn. Erkennst du, warum?

Praktisch ist, dass wir Wahrheitswerte auch in Variablen speichern können. Schau dir folgendes Programm an:

boolean sichtbar = true;

void draw() {
  background(200);
  if( sichtbar ) {
    circle(50, 50, 20);
  }
}

void mouseClicked() {
  if( sichtbar ) {
    sichtbar = false;
  } else {
    sichtbar = true;
  }
}

Arbeitsauftrag

1. Überleg, was das Programm macht. Übernimm es dann in Processing und prüfe deine Vermutung.
2. Beschreibe, was der Vorteil ist, hier eine Variable vom Typ boolean zu nutzen. Warum lässt sich dieses Programm nicht anders lösen?
3. Modifiziere das Programm so, dass zunächst ein weißer Kreis (ohne Rand) an der Mausposition gezeichnet wird. (Der Hintergrund soll nicht mehr gelöscht werden!) Nach einem Mausklick soll ein schwarzes Quadrat gezeichnet werden. Ein weiterer Mausklick schaltet wieder zum weißen Kreis.

   Klicken, um das Programm zu starten.

Lösung zu Aufgabe 3

boolean white = true;

void setup() {
  background(200);
}

void draw() {
  if( white ) {
    noStroke();
    fill(255);
    ellipse(mouseX, mouseY, 10, 10);
  } else {
    noStroke();
    fill(0);
    rect(mouseX, mouseY, 10, 10);
  }
}

void mouseClicked() {
  if( white ) {
    white = false;
  } else {
    white = true;
  }
}

Wenn-Dann-Sonst-Wenn-Dann

Manchmal gibt es mehrere Bedingungen, die man nacheinander prüfen möchte, aber nur, wenn die ersten Bedingungen nicht zutreffen. Stell dir vor, du möchtest den Hintergrund Schwarz, Rot oder Gold einfärben, je nachdem, ob sich der Mauszeiger im oberen, mittleren oder unteren Drittel befindet:

void setup() {
  size(400, 400);
}

void draw() {
  if ( mouseY < 133 ) {
    background(0);
  } else {
    if( mouseY < 266 ) {
      background(255, 218, 83);
    } else {
    background(255, 38, 0);
    }
  }
}

Du kannst beliebig viele bedingte Anweisungen ineinander verschachteln. Allerdings leidet schnell die Übersichtlichkeit. Daher kannst du einen else-Befehl mit einer neuen if-Anweisung direkt verknüpfen zu einer else if-Anweisung:

void setup() {
  size(400, 400);
}

void draw() {
  if ( mouseY < 133 ) {
    background(0);
  } else  if ( mouseY < 266 ) {
    background(255, 218, 83);
  } else {
    background(255, 38, 0);
  }
}

Der Quelltext wird deutlich übersichtlicher, schon bei nur zwei bedingten Anweisungen.

Arbeitsauftrag

1. Programmiere eine Textanzeige, die bei Mausklick zum nächsten Wort wechselt. Das erste Wort ist "Hallo". Nutze diese Vorlage:

   int zustand = 0;
   
   void setup() {
     textAlign(CENTER);
     textSize(20);
   }
   
   void draw() {
     background(0);
     if (zustand == 0) {
       text("Hallo", width/2, height/2);
     }
   }
   

   Ergänzen die Vorlage so, dass bei jedem Mausklick ein neues Wort angezeigt wird. Nach "Hallo" kommt "mein", "Name", "ist", "Hase", "Tschüs". Danach geht es wieder von vorn los. (Die Auswahl der Wörter kann frei variiert werden.) Nutze dafür else if-Anweisungen.

Klicken, um das Programm zu starten.

Lösung

int zustand = 0;

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

void draw() {
  background(0);
  if (zustand == 0) {
    text("Hallo", width/2, height/2);
  }
  else if (zustand == 1) {
    text("mein", width/2, height/2);
  }
  else if (zustand == 2) {
    text("Name", width/2, height/2);
  }
  else if (zustand == 3) {
    text("ist", width/2, height/2);
  }
  else if (zustand == 4) {
    text("Hase", width/2, height/2);
  }
  else if (zustand == 5) {
    text("Tschüs", width/2, height/2);
  }
}

void mouseClicked() {
  zustand += 1;
  if( zustand == 6 ) {
    zustand = 0;
  }
}

Zusatzaufgabe

Animiere ein "Gebirge", das von rechts nach links zieht.

Klicken, um das Programm zu starten.

Tipp: Verwende drei Koordinaten (jeweils x und y), um immer zwei Linien zu zeichnen (den aktuell sichtbaren Berg). Die Punkte sind immer so weit auseinander, wie der Bildschirm breit ist. Wenn der zweite Punkt links verschwindet, musst du die Punkte ändern (die Punkte "rücken" jeweils einen auf und der dritte Punkt wird "neu erschaffen").

Wenn du das obige Gebirge geschafft hast, fügen noch einen Punkt hinzu.

Klicken, um das Programm zu starten.