Bedingte Anweisung

Mit bedingten Anweisungen und Verzweigungen (folgt später) kann man festlegen, wann ein bestimmter Teil eines Programms ausgeführt wird und wann nicht.

Zum Beispiel möchte man, dass ein Objekt seine Bewegungsrichtung ändert, wenn es eine bestimmte x-Koordinate erreicht hat. Oder man möchte je nach Tastaturtaste, die man drückt, eine andere Bewegung ausüben. Oder man möchte, dass nach einer gewissen Zeit die Hintergrundfarbe geändert wird.

Es gibt sehr viele Fälle, wo es erwünscht ist, eine bedingte Anweisung oder Verzweigung zu nutzen. Hier lernst du die bedingte Anweisung kennen.

Bedingte Anweisung if

Den Aufbau einer bedingten Anweisung siehst du unten:

if(Bedingung) {
  // dieser Teil innerhalb der
  // geschweiften Klammern wird nur
  // ausgeführt wenn die Bedingung wahr ist
}
	

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(100);
  let x = 100;
  let y = 200;

  if(x > 150) {
    /*
    x ist nicht grösser als 150,
    deshalb wird dieser Teil
    nicht ausgeführt und das
    Rechteck wird nicht gezeichnet
    */
    rect(50, 50, 40, 40);
  }

  if(y > 150) {
    /*
    y ist grösser als 150,
    deshalb wird dieser Teil
    ausgeführt und der Kreis
    wird gezeichnet
    */
    ellipse(150, 150, 40, 40);
  }
}
	

Bedingte Anweisung if und else

Man kann festlegen, welcher Programmteil ausgeführt werden soll, falls die Bedingung nicht erfüllt wird. Dies geschieht mit einer else-Anweisung.

let x = 50;

if(x > 100) {
  // Dieser Teil wird nicht ausgeführt.
}
else {
  // Dieser Teil wird ausgeführt.
}

let x = 100;

function setup() {
  createCanvas(600, 100);
}

function draw() {
  background(100);

  // wenn x kleiner als 300 ist,
  // färbe den Kreis rot
  if(x < 300) {
    fill(255, 0, 0);
  }
  // wenn x nicht kleiner als 300 ist,
  // färbe den Kreis blau
  else {
    fill(0, 0, 255);
  }

  let y = 50;
  let durchmesser = 50;
  ellipse(x, y, durchmesser, durchmesser);

  x = x + 2;
  // wenn x grösser ist als die Breite (width)
  // der Zeichnungsfläche, setze x auf 0
  if(x > width) {
    x = 0;
  }
}

Mehrfache bedingte Anweisungen mit else if

Man kann mehrere bedingte Anweisungen hintereinander ausführen. Dies geschieht folgendermassen:

if(Bedingung 1) {
  // wird ausgeführt,
  // falls Bedingung 1 erfüllt wird
}
else if(Bedingung 2) {
  // wird ausgeführt,
  // falls Bedingung 2 erfüllt wird
}
else if(Bedingung 3) {
  // wird ausgeführt,
  // falls Bedingung 3 erfüllt wird
}
else {
  // wird ausgeführt,
  // falls keine Bedingung erfüllt wird
}

Falls eine Bedingung erfüllt wird, werden alle anderen else if und else übersprungen. Falls keine Bedingung erfüllt wurde, wird der Code in else ausgeführt.
Es können beliebig viele else if Bedingungen hintereinander folgen. Jedoch kann nur ein else am Schluss folgen, oder es kann weggelassen werden.

let x = 0;

function setup() {
  createCanvas(600, 100);
}

function draw() {
  background(100);

  if(x < 100) {
    fill(255, 0, 0); // rot
  }
  else if(x < 200){
    fill(0, 0, 255); // blau
  }
  else if(x < 300) {
    fill(0, 255, 0); // grün
  }
  else if(x < 400) {
    fill(0, 255, 255); // türkis
  }
  else if(x < 500) {
    fill(255, 0, 255); // pink
  }
  else {
    fill(0, 0, 0); // schwarz
  }

  let y = 50;
  let durchmesser = 50;
  ellipse(x, y, durchmesser,  durchmesser);

  x = x + 2;
  // wenn der Kreis ganz rechts ist
  // setze ihn zurück nach ganz links
  if(x > width) {
    x = 0;
  }
}