Bedingungen

Mit Bedingungen können Sie steuern, ob ein bestimmtes Stück Code ausgeführt wird. Dabei wird überprüft ob eine Bedingung erfüllt ist oder nicht und je nachdem wird Code in einem Action-Block ausgeführt. Den Begriff Action-Block kennen Sie bestimmt noch von Funktionen.

Dazu benutzt man eine sogenannte if-Bedingung. Bedingungen sind Bool’sche Werte (englisch: Booleans), dass heißt, sie können nur einer von zwei Werten sein: true🟢 oder false🔴. Hier sehen Sie ein Beispiel wie man es schreibt:

function draw() {
    if (mouseX < 200) {
        background(255, 0, 0);
    } else {
        background(0, 255, 0);
    }
}

Wir stellen die Frage "ist dieser Ausdruck hier wahr?" - im Beispiel also: "Ist mouseX kleiner als 200?"

if (mouseX < 200) {

Ergebnis: true 🟢
Wenn die Antwort Ja lautet, wird dieser erste Action-Block ausgeführt.

} else {

Ergebnis: false 🔴
Wenn die Frage aber mit Nein beantwortet würde (z.B. weil die Position 200 oder größer ist) wird der Code in diesem zweiten Action-Block nach dem else Statement ausgeführt.

(Es muss nicht immer einen else-Block geben, er ist optional.)

}

Das Beispiel sollten Sie am besten einmal selbst in Visual Studio Code ausführen.

Operatoren

Mit Operatoren kann man Werte miteinander vergleichen. Im obigen Beispiel hatten wir “kleiner als” < schon kennen gelernt.

Mit dem Operator === vergleicht man ob zwei Werte genau gleich sind. Mit !== erreicht man das Gegenteil: !== ist immer dann wahr, wenn zwei Dinge ungleich sind.

> und < verhalten sich genau, wie Sie es aus der Grundschule kennen - man kann vergleichen ob ein Wert größer oder kleiner als ein Anderer ist. Mit >= und <= vergleicht man ob ein Wert größer gleich oder kleiner gleich einem anderen Wert ist.

Aufgabe

Für die Aufgaben arbeiten Sie bitte in G1C 02 Interaktion Vorname Nachname.

Öffnen, bzw. schließen Sie die Augen¹ Ihres Emojis, je nachdem ob die Taste der Maus gedrückt ist oder nicht (Hilfreiche Variablen finden Sie auch im Maus-Artikel!).

Speichern Sie das Ergebnis als emoji-blink.js. (blink: englisch für blinzeln)

Aufgabe

Lassen Sie Ihren Selfie/Avatar 300 Pixel nach rechts fahren und dort dann stoppen.

Speichern Sie das Ergebnis in selfie-conditional-animation.js.

Aufgabe

Erweitern Sie Ihr paint.js aus dem Maus-Artikel.

Das Zeichenprogramm benutzt im Moment direkt den line()-Befehl und zeichnet dauerhaft Linien. Bauen Sie es so um, dass es nur bei gedrückter Maustaste zeichnet.

Bonusaufgabe (freiwillig)

Erweitern Sie Ihr Malprogramm so weit wie Sie wollen. Es sind keine Grenzen gesetzt. Speichern Sie das Ergebnis unter paint-pro.js.

Vergessen Sie nicht, Ihre Ergebnisse zu committen und zu pushen! Abgabe bis 16.11.2022 / 18:00 Uhr via Gitlab.