Informatik-Box

Lernpfad:Einführung in Processing/13: Unterschied zwischen den Versionen

Lernpfad:Einführung in Processing/13 (Quelltext anzeigen)

Version vom 16. Februar 2022, 21:42 Uhr

6.183 Bytes hinzugefügt ,  21:42, 16. Feb. 2022
keine Bearbeitungszusammenfassung
(Die Seite wurde neu angelegt: „{{NNavigation}} {{Tldr:Start|Was du in diesem Schritt lernst|Icon=Icon Chalk board.png}} * ''Bedingte Schleifen'' * ''Zählschleifen'' {{Tldr:End}} === Bedin…“)
 
Keine Bearbeitungszusammenfassung
 
(27 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
{{NNavigation}}
{{NNameAnzeigen}}{{NNavigation}}


{{Tldr:Start|Was du in diesem Schritt lernst|Icon=Icon Chalk board.png}}
{{Tldr:Start|Was du in diesem Schritt lernst|Icon=Icon Chalk board.png}}
* ''Bedingte Schleifen''
* ''Bedingte Schleifen''
* ''Zählschleifen''
* ''Zählschleifen''
* ''verschachtelte'' Schleifen
{{Tldr:End}}
{{Tldr:End}}


=== Bedingte Schleifen ===
== Bedingte Schleifen ==


{{Pfad|11|Bedingte Anweisungen}} erlauben die Ausführung von Anweisungen unter einer bestimmten Bedingung. Oftmals sollen Anweisungen aber nicht nur einmal, sondern öfter ausgeführt werden, ''solange'' eine Bedingung ''wahr'' ist. Diese Art von Konstrukt nennt man eine ''Bedingte Schleife'' (oder auch <code>while</code>-Schleife).
{{Pfad|11|Bedingte Anweisungen}} erlauben die Ausführung von Anweisungen unter einer bestimmten Bedingung. Oftmals sollen Anweisungen aber nicht nur einmal, sondern öfter ausgeführt werden, ''solange'' eine Bedingung ''wahr'' ist. Diese Art von Konstrukt nennt man eine ''Bedingte Schleife'' (oder auch <code>while</code>-Schleife).
Zeile 29: Zeile 30:
}
}
</syntaxhighlight>
</syntaxhighlight>
<pre class="output">
1
4
9
16
25
36
49
64
81
</pre>


Wichtig ist hier Zeile 6: Die Schleife läuft solange, bis <code>x</code> größer oder gleich <code>100</code> ist. Wenn Zeile 6 nicht wäre, würde sich <code>x</code> nicht verändern und immer <code>1</code> bleiben. In dem Fall würde das Programm ''unendlich lange'' laufen und niemals enden.
Wichtig ist hier Zeile 6: Die Schleife läuft so lange, bis <code>x</code> größer oder gleich <code>100</code> ist. Wenn Zeile 6 nicht wäre, würde sich <code>x</code> nicht verändern und immer <code>1</code> bleiben. In dem Fall würde das Programm ''unendlich lange'' laufen und niemals enden.


{{Aufgabe:Start}}
{{Aufgabe:Start}}
Kopiere das Programm nach {{Processing}} und probiere es mit Hilfe des ''Debuggers'' aus.
Kopiere das Programm nach {{Processing}} und probiere es mithilfe des ''Debuggers'' aus.


Klicke dazu den runden grauen Button oben rechts an (der etwas aussieht wie ein Käfer). {{Processing}} wechselt in den Debug-Modus. Nun kannst du das Programm ''schrittweise'' ablaufen lassen. Markiere dazu Zeile 4 als ''Breakpoint'', indem du links auf die Zeilennummer klickst (die Nummer wird zu einem "Diamanten"). Wenn du nun das Programm startest stoppt die Ausführung in Zeile 5 und zeigt dir im ''Debug-Fenster'' die Werte aller Variablen an.
Klicke dazu den runden grauen Button oben rechts an (der etwas aussieht wie ein Käfer). {{Processing}} wechselt in den Debug-Modus. Nun kannst du das Programm ''schrittweise'' ablaufen lassen. Markiere dazu Zeile 4 als ''Breakpoint'', indem du links auf die Zeilennummer klickst (die Nummer wird zu einem "Diamanten"). Wenn du jetzt das Programm startest, stoppt die Ausführung in Zeile 5 und zeigt dir im ''Debug-Fenster'' die Werte aller Variablen an.


Klicke nun den ''Weiter'' Button mehrmals und beobachte die Veränderung der Werte im kleinen ''Debug-Fenster''.
Klicke nun den ''Weiter'' Button mehrmals und beobachte die Veränderung der Werte im kleinen ''Debug-Fenster''.
Zeile 41: Zeile 53:


{{Aufgabe:Start}}
{{Aufgabe:Start}}
# Gib alle Geraden Zahlen von 2 bis 100 auf der Konsole aus.
# Gib alle geraden Zahlen von 2 bis 100 auf der Konsole aus.
# Zeichnen drei Quadrate nebeneinander. Das erste liegt bei <code>(10, 40)</code> und ist 20x20 Pixel groß. Das nächste liegt mit 10 Pixeln Abstand rechts daneben, das dritte wieder 10 Pixel rechts davon.
# Zeichnen drei Quadrate nebeneinander. Das Erste liegt bei <code>(10, 40)</code> und ist 20x20 Pixel groß. Das nächste liegt mit 10 Pixeln Abstand rechts daneben, das dritte wieder 10 Pixel rechts davon.
#: Verwende eine While-Schleife, so dass mit einer kleinen Änderung auch 5 oder 2 Quadrate gezeichnet werden können.
#: Verwende eine <code>while</code>-Schleife, sodass mit einer kleinen Änderung auch 5 oder 2 Quadrate gezeichnet werden können.
{{Aufgabe:End}}
{{Aufgabe:End}}
{{Lösung:Start}}
<syntaxhighlight lang="java" line="1">
int i = 0;
while( i < 3 ) {
    rect(10 + i*20, 40, 20, 20);
}
</syntaxhighlight>
{{Lösung:End}}


=== Zählschleifen ===
== Zählschleifen ==


Die Aufgaben oben haben alle einen ähnlichen Aufbau: Sie zählen in einer Variable von einem ''Anfangswert'' bis zu einem ''Zielwert'' mit einer festgelegten ''Schrittweite''. Da diese Art der Schleife beim Programmieren sehr häufig vorkommt, gibt es dafür ein eigenes Konstrukt: Die ''Zählschleife''.
Die Aufgaben oben haben alle einen ähnlichen Aufbau: Sie zählen in einer Variable von einem ''Anfangswert'' bis zu einem ''Zielwert'' mit einer festgelegten ''Schrittweite''. Da diese Art der Schleife beim Programmieren regelmäßig vorkommt, gibt es dafür ein eigenes Konstrukt: die ''Zählschleife''.


Eine Zählschleife (oder auch <code>for</code>-Schleife) bringt alle drei Teile zusammen:
Eine Zählschleife (oder auch <code>for</code>-Schleife) bringt alle drei Teile zusammen:
Zeile 57: Zeile 77:
}
}
</syntaxhighlight>
</syntaxhighlight>
<pre class="output">
0
1
2
3
...
</pre>


Das Programm gibt die Zahlen <code>1</code> bis <code>100</code> auf die Konsole aus. In der Klammer hinter <code>for</code> stehen die Bestandteile durch <code>;</code> getrennt:
Das Programm gibt die Zahlen <code>1</code> bis <code>100</code> auf die Konsole aus. In der Klammer hinter <code>for</code> stehen die Bestandteile durch <code>;</code> getrennt:
Zeile 73: Zeile 100:


{{Aufgabe:Start}}
{{Aufgabe:Start}}
# Probiere diese Programm aus und erkläre seine Funktion. Was sind ''Startwert'', ''Zielwert'' und ''Schrittweite''?
# Probiere dieses Programm aus und erkläre seine Funktion. Was sind ''Startwert'', ''Zielwert'' und ''Schrittweite''?
#: <syntaxhighlight lang="java" line="1">
#: <syntaxhighlight lang="java" line="1">
for (int x = 0; x < 100; x = x + 10) {
for (int x = 0; x < 100; x = x + 10) {
Zeile 84: Zeile 111:
# Erweitere das Programm zu einem Karo-Muster.
# Erweitere das Programm zu einem Karo-Muster.
{{Aufgabe:End}}
{{Aufgabe:End}}
{{Lösung:Start|Lösung zu Aufgabe 2}}
<syntaxhighlight lang="java" line="1">
for (int x = 0; x < 100; x = x + 10) {
  int y = 100 - x;
  ellipse(x, y, 5, 5);
}
</syntaxhighlight>
{{Lösung:End}}
{{Lösung:Start|Lösung zu Aufgabe 4}}
<syntaxhighlight lang="java" line="1">
for (int y = 0; y < 100; y = y + 10) {
  line(0, y, 100, y);
}
for (int x = 0; x < 100; x = x + 10) {
  line(x, 0, x, 100);
}
</syntaxhighlight>
{{Lösung:End}}
== Verschachtelte Schleifen ==
Eine Schleife kann schon eine Menge Arbeit sparen, da man Anweisungen nicht ständig wiederholen muss. Noch mächtiger werden sie aber, wenn mehrere Schleifen ''ineinander'' verwendet werden.
Stell dir vor, wir haben eine Tabelle mit <em>Zeilen</em> und <em>Spalten</em>.
{| {{prettytable}}
! !! 0 !! 1 !! 2 !! 3 !! 4
|-
! 0
| || || || ||
|-
! 1
| || || || ||
|-
! 2
| || || || ||
|}
Wir können alle Zeilennummern mit einer Zählschleife ausgeben:
<syntaxhighlight lang="java" line="1">
for( int i = 0; i < 3; i += 1 ) {
    println("Zeile " + i);
}
</syntaxhighlight>
<pre class="code output">
Zeile 0
Zeile 1
Zeile 2
</pre>
Ebenso die Spalten:
<syntaxhighlight lang="java" line="1">
for( int j = 0; j < 5; j += 1 ) {
    println("Spalte " + j);
}
</syntaxhighlight>
<pre class="code output">
Spalte 0
Spalte 1
Spalte 2
Spalte 3
Spalte 4
</pre>
Sollen nun für alle <em>Zellen</em> die Zeilen und Spaltennummer ausgegeben werden, müssen wir beide Schleifen '''ineinander verschachteln''':
<syntaxhighlight lang="java" line="1">
for( int i = 0; i < 3; i += 1 ) {
    for( int j = 0; j < 5; j += 1 ) {
        println("Zeile "+i+", Spalte "+j);
    }
}
</syntaxhighlight>
<pre class="code output">
Zeile 0, Spalte 0
Zeile 0, Spalte 1
Zeile 0, Spalte 2
Zeile 0, Spalte 3
Zeile 0, Spalte 4
Zeile 1, Spalte 0
Zeile 1, Spalte 1
Zeile 1, Spalte 2
Zeile 1, Spalte 3
Zeile 1, Spalte 4
Zeile 2, Spalte 0
Zeile 2, Spalte 1
Zeile 2, Spalte 2
Zeile 2, Spalte 3
Zeile 2, Spalte 4
</pre>
{{Aufgabe:Start}}
<syntaxhighlight lang="java" line="1">
size(200, 200);
for( int i = 0; i < 5; i += 1 ) {
    for( int j = 0; j < 5; j += 1 ) {
        if( (i+j)%2 == 0 ) {
          fill(0);
        } else {
          fill(255);
        }
        rect(i*40, j*40, 40, 40);
    }
}
</syntaxhighlight>
# Analysiere das Programm oben und erkläre seine Funktion.
#: '''Tipps''':
#* Zur Erinnerung: <code>a%2 == 0</code> prüft, ob die Zahl <code>a</code> durch zwei teilbar ist.
#* Stell dir <code>i</code> als Zeilen- und <code>j</code> als Spaltennummer vor. Welche Quadrate werden dann wie eingefärbt?
#* Du kennst das Ergebnis schon aus {{Pfad|10|Schritt 10}}.
# Pass das Programm so an, dass das Muster ein Fenster der Größe <code>400x400</code> ausfüllt.
{{Aufgabe:End}}
{{Lösung:Start|Lösung Aufgabe 1}}
Das Programm zeichnet dasselbe Schachbrettmuster, wie in der Aufgabe in {{Pfad|10|Schritt 10}}.
{{Lösung:End}}
{{Lösung:Start|Lösung Aufgabe 2}}
<syntaxhighlight lang="java" line="1">
size(400, 400);
for( int i = 0; i < 20; i += 1 ) {
    for( int j = 0; j < 20; j += 1 ) {
        if( (i+j)%2 == 0 ) {
          fill(0);
        } else {
          fill(255);
        }
        rect(i*40, j*40, 40, 40);
    }
}
</syntaxhighlight>
{{Lösung:End}}
{{Aufgabe:Start}}
# Erstelle ein Programm, dass für die Zahlen Eins bis Zehn die Produkte mit den Zahlen Eins bis Zehn ausgibt (also das kleine Einmaleins).
#: <code>1*1=1, 1*2=2, 1*3=3, ..., 1*10=10, 2*1=2, 2*2=4, 2*3=6, ..., 10*10=100</code>
#
## Fülle eine <code>400x400</code>-Pixel Große Zeichenfläche reihen- und spaltenweise mit roten Kreisen.
##: [[Bild:Processing_Kreismuster.jpg|200px]]
## Modifiziere das Programm so, dass jede zweite Spalte grüne Kreise enthält.
##: [[Bild:Processing_Kreismuster_2.jpg|200px]]
{{Aufgabe:End}}
{{Lösung:Start|Lösung Aufgabe 1}}
<syntaxhighlight lang="java" line="1">
for( int i = 1; i <= 10; i += 1 ) {
  for( int j = 1; j <= 10; j += 1 ) {
    int produkt = i*j;
    println(i+"*"+j+"="+produkt);
  } 
}
</syntaxhighlight>
{{Lösung:End}}
{{Lösung:Start|Lösung Aufgabe 2}}
<syntaxhighlight lang="java" line="1">
void setup() {
  size(400, 400);
}
void draw() {
  fill(236, 48, 0);
  for ( int i = 0; i < 10; i += 1 ) {
    for ( int j = 0; j < 10; j += 1 ) {
      ellipse(20 + i*40, 20 + j*40, 30, 30);
    }
  }
}
</syntaxhighlight>
{{Lösung:End}}
{{Lösung:Start|Lösung Aufgabe 3}}
<syntaxhighlight lang="java" line="1">
void setup() {
  size(400, 400);
}
void draw() {
  for ( int i = 0; i < 10; i += 1 ) {
    for ( int j = 0; j < 10; j += 1 ) {
      if ( i%2 == 1 ) {
        fill(0, 198, 48);
      } else {
        fill(236, 48, 0);
      }
      ellipse(20 + i*40, 20 + j*40, 30, 30);
    }
  }
}
</syntaxhighlight>
{{Lösung:End}}
{{Zusatzaufgabe:Start}}
Erstelle ein ''radiales'' Muster dieser Art:
[[Bild:Processing_Kreise_radial.jpg|200px]]
Verwende auch hier verschachtelte Schleifen. Die erste bestimmt den Abstand zum Mittelpunkt, die zweite den Winkel. Nutze dann <code>sin()</code> zur Berechnung der <code>x</code>- und <code>cos()</code> für die <code>y</code>-Koordinate.
{{Zusatzaufgabe:End}}
{{Tipp:Start|Tipp zur Zusatzaufgabe}}
Für den nullten Kreis und den Winkel 135 Grad könntest du die Koordinaten berechnen durch:
* x: <code>i*60*sin(radians(135))</code>
* y: <code>i*60*cos(radians(135))</code>
<code>60</code> ist der Abstand zwischen zwei Ringen. Der Winkel beginnt bei 0 und zählt bis 360 hoch. Die Schrittweite wird anhand der Anzahl Kreise pro Ring bestimmt. Bei Acht Kreisen: <code>360 / 8 = 45</code>.
{{Tipp:End}}{{Lösung:Start|Lösung Zusatzaufgabe}}
<syntaxhighlight lang="java" line="1">
void setup() {
  size(400, 400);
}
void draw() {
  for ( int i = 0; i <= 3; i += 1 ) {
    for ( int j = 0; j < 360; j += 45 ) {
      ellipse(200+i*60*sin(radians(j)), 200+i*60*cos(radians(j)), 30, 30);
    }
  }
}
</syntaxhighlight>
{{Lösung:End}}
Jneug
8.581

Bearbeitungen

Abgerufen von „http://ngb.schule/wiki/Spezial:Mobiler_Unterschied/8978...9336“