Conditions

Vergleichen

Wir haben bereits eine "Condition" bei den Schleifen kennengelernt. Durch die "Condition" haben wir definiert wie lange eine Schleife laufen soll. Es gibt verschiedene Möglichkeiten "Conditions" zu definieren:

Operator Beispiel Erklärung
=== 1 === 1 Genau dasselbe
== 1 == '1' Dasselbe, aber der Variablentyp wird ignoriert.
!== 1 != 2 Nicht dasselbe
< 1 < 2 Kleiner als
> 2 > 1 Größer als
<= 1 <= 2 Kleiner oder gleich
>= 2 >= 1 Größer oder gleich

Wir können mehrere Konditionen mit && (und) oder || (oder) kombinieren:

if (a < b && b < c) {
// do something
}
if (a === b || a === c) {
// do something else
}

Beispiele

Wir können "Conditions" nutzen, um bestimmte Befehle auszuführen (z.B. bestimmte Dinge zu zeichnen):

for (let i = 0; i < 10; i += 1) {
fill("black");
if (i < 5) { // turn fill to red when i is smaller 5
fill("red");
}
circle(i * 5, i * 5, 5);
}

Wenn wir mehrere "Conditions" testen wollen, können wir dies nacheinander tun:

if (i === 1) {
fill("red");
} else if (i === 2) {
fill("blue");
} else if (i === 3) {
fill("green");
} else {
fill("yellow");
}

Mit else können wir alle bis dahin nicht erfassten Fälle abgreifen.

In solch einer Liste von if-Statements, arbeitet das System von oben nach unten. Sobald eine Condition zutrifft, werden alle anderen else if-Statements ignoriert. Wenn man dies umgehen will, muss mehrere if-Statements unabhängig voneinander definieren:

if (i < 5) {
circle(5, 5, 5);
}
if (i < 10) {
rect(0, 0, 5, 5);
}

Im obigen Beispiel wird ein Kreis gezeichnet wenn i kleiner 5 ist. Und wenn i kleiner 10 i ist wird ein Rechteck gezeichnet. Wenn i kleiner 5 ist, werden also sowohl ein Rechteck als auch ein Kreis gezeichnet.are draw.

Es gibt eine nützliche Kondition, die uns hilft gerade und ungerade Zahlen voneinander zu unterscheiden:

for (let i = 0; i < 10; i += 1) {
if (i%2 === 0) {
fill('red');
} else {
fill('green');
}
}

Die obige "Condition" i%2 === 0 überprüft, ob eine Zahl, wenn diese durch 2 geteilt wird, keinen Rest hinterm Komma als Ergebnis hat. 6/2 = 3 > true, 5/2 = 2.5 > false.

Scopes (nochmal)

Scopes betreffen nicht nur Funktionen wie setup und draw, sondern auch Schleifen und if-Statements. Genau wie bei den Funktionen, sobald wir uns innerhalb der geschweiften Klammern befinden {}, befinden wir uns auf einem weiteren Scope-Level:

// global scope
function setup () {
// setup() scope
for (let i = 0; i < 10; i += 1) {
// for-loop scope
if (i < 5) {
// if scope
}
}
}

Aufgabe: Conditions & Zufall

Generiert euch einen zufälligen Wert in eine Vriable und nutzt diesen Wert dann in einer Serie von if-Statements, um davon abhängig innerhalb einer Schleife unterschiedliche Objekte zu zeichnen.

Inspiration: Form-Wechsel

/lectures/2d/conditions/randomshapes/sketch.jsView on GitHub

Zurück zum Anfang