Lernpfad:Einführung in Processing/11: Unterschied zwischen den Versionen
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Jneug (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 9: | Zeile 9: | ||
Noch schöner wäre es, wenn der Ball vom Rand "abprallen" würde. Wir möchten also so etwas programmieren: | Noch schöner wäre es, wenn der Ball vom Rand "abprallen" würde. Wir möchten also so etwas programmieren: | ||
< | <pre> | ||
wenn Ball am Bildrand | wenn Ball am Bildrand | ||
dann | dann | ||
ändere die Richtung | ändere die Richtung | ||
</ | </pre> | ||
Ein solches Konstrukt ("wenn - dann") nennt man eine ''Bedingte Anweisung'' (oder auch ''Verzweigung''). | Ein solches Konstrukt ("wenn - dann") nennt man eine ''Bedingte Anweisung'' (oder auch ''Verzweigung''). | ||
Zeile 42: | Zeile 42: | ||
{{Aufgabe:End}} | {{Aufgabe:End}} | ||
Bedingte Anweisungen ermöglichen in Kombination mit Variablen, die sich dynamisch verändern, komplexe Programme zu verfassen. | ''Bedingte Anweisungen'' ermöglichen in Kombination mit Variablen, die sich dynamisch verändern, komplexe Programme zu verfassen. | ||
{{P5js|https://editor.p5js.org/Ngb/full/ScYqX283j|height=400|width=400}} | {{P5js|https://editor.p5js.org/Ngb/full/ScYqX283j|height=400|width=400}} | ||
{{Aufgabe:Start}} | |||
# Erweitere das "greet"-Programm aus {{Pfad|10}} so, dass auch das Geschlecht berücksichtigt wird. Ergänze dazu einen weiteren ''Paramter'' <code>gender</code> vom Typ <code>int</code>. Ist der Wert <code>1</code>, dann soll mit "Frau", ist er <code>2</code> mit "Herr" begrüßt werden. | |||
#: Beispielsweise gibt <code>greet("Hi", "Meier", 1)</code> die Begrüßung "Hi, Frau Meier!" aus. | |||
{{Aufgabe:End}} | |||
== 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). | |||
<pre> | |||
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 | |||
</pre> | |||
In Java gibt es dafür den <code>else</code>-Befehl: | |||
<syntaxhighlight lang="java" line="1"> | |||
void setup() { | |||
size(400,400); | |||
rectMode(CENTER); | |||
} | |||
void draw() { | |||
background(200); | |||
if( mouseX < width/2 ) { | |||
fill(255,0,0); | |||
rect(mouseX, mouseY, 10, 10); | |||
} else { | |||
fill(0,0,255); | |||
triangle(mouseX, mouseY-5, mouseX-5, mouseY+5, mouseX+5, mouseY+5); | |||
} | |||
} | |||
</syntaxhighlight> | |||
{{Aufgabe:Start}} | |||
# Ü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. | |||
# Programmiere ein Glücksspiel: Bei einem Mausklick soll eine Zufallszahl bis 100 erzeugt werden (nutze dazu {{Processing Ref|random()}}) liegt die Zahl unter einer in einer Variablen festgelegten Schwelle, hat der Spieler gewonnen. <br/>Nutze diese Vorlage: | |||
#: <syntaxhighlight lang="java" line="1"> | |||
int gewinnChance = 20; | |||
void draw() { | |||
// bleibt leer | |||
} | |||
void keyPressed() { | |||
// Dein Code | |||
} | |||
</syntaxhighlight> | |||
#: Überleg dir eine Visualisierung für das Ergebnis. Du kannst zum Beispiel den Hintergrund rot bzw. grün einfärben. Oder du nutzt {{Processing Ref|println()}}. | |||
{{Aufgabe:End}} | |||
== Wahrheitswerte == | |||
Als du im {{Pfad|8}} ''Variablen'' kennengelernt hast, hast du eine Liste von ''Datentypen'' bekommen. Unter ihnen befanden sich ''Wahrheitswerte'' (<code>boolean</code>). | |||
Wahrheitswerte sind ein besonderer Typ, da sie nur genau zwei Werte annehmen können: Wahr (<code>true</code>) und Falsch (<code>false</code>). | |||
Wenn du eine ''Bedingte Anweisung'' nutzt, dann benutzt du auch immer einen ''Wahrheitswert'', da die Bedingung entweder wahr ist, oder falsch. | |||
Eine Bedingung wie <code>mouseX > 5</code> | |||
wird genau dann zu <code>true</code>, wenn in der Variablen <code>mouseX</code> eine Zahl größer als <code>5</code> steht. Ansonsten wird sie zu <code>false</code>. | |||
{{Hinweis| | |||
Wir könnten die Werte <code>true</code> und <code>false</code> 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: | |||
<syntaxhighlight lang="java" line="1"> | |||
boolean sichtbar = true; | |||
void draw() { | |||
background(200); | |||
if( sichtbar ) { | |||
circle(50, 50, 20); | |||
} | |||
} | |||
void mouseClicked() { | |||
if( sichtbar ) { | |||
sichtbar = false; | |||
} else { | |||
sichtbar = true; | |||
} | |||
} | |||
</syntaxhighlight> | |||
{{Aufgabe:Start}} | |||
# Übernimm das Programm in | |||
{{Aufgabe:End}} |
Version vom 7. Dezember 2021, 23:14 Uhr
Kannst du dich noch an dieses Programm aus Schritt 9 erinnern?
Eigentlich wäre es schöner, wenn der Ball nicht einfach aus dem Bild fliegen würde. Vielleicht hast du dies schon mit Hilfe 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.
- Ergänze das Programm um eine Bedingte Anweisung, die den Ball auch vom linken Rand abprallen lässt.
- Ergänze dann zweit neue Variablen
y
unddy
, sowie zwei Bedingte Anweisungen, die den Ball vom oberen und unteren Rand abprallen lassen. Teste das Programm mit verschiedenen Werten fürdx
unddy
.- 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.
- Tipp: Du kannst mit random() auch zufällige Werte für die Bewegung und Startposition generieren lassen. Dazu musst du den Befehl in der
Bedingte Anweisungen ermöglichen in Kombination mit Variablen, die sich dynamisch verändern, komplexe Programme zu verfassen.
- Erweitere das "greet"-Programm aus 10 so, dass auch das Geschlecht berücksichtigt wird. Ergänze dazu einen weiteren Paramter
gender
vom Typint
. Ist der Wert1
, dann soll mit "Frau", ist er2
mit "Herr" begrüßt werden.- Beispielsweise gibt
greet("Hi", "Meier", 1)
die Begrüßung "Hi, Frau Meier!" aus.
- Beispielsweise gibt
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, 10, 10);
} else {
fill(0,0,255);
triangle(mouseX, mouseY-5, mouseX-5, mouseY+5, mouseX+5, mouseY+5);
}
}
- Ü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.
- Programmiere ein Glücksspiel: Bei einem Mausklick 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 zum Beispiel 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;
}
}
- Übernimm das Programm in