Wiederholungen (Schleifen)

Wiederholungen (Schleifen)

Wiederholungen sind ein Alltagsphänomen. Es beginnt schon damit, dass man jeden Tag zur Schule kommen muss. Oder dass man jeden Tag drei mal etwas isst. Oder dass man Sachen (wie z.B. Geburtstagsgeschenke) zählen muss. All das besteht aus sich wiederholenden Elementen.

Nimm z.B. dieses "Bastelanleitung":

Nimm dir ein Blatt Din-A4-Papier.
Falte es in der Hälfte zusammen. Du hast nun ein doppeltes Blatt Din-A5-Papier.
Wiederhole Schritt 2 so lange, bis du ein Din-A8-Papier bekommen hast.

Diese Anleitung enthält auch eine Wiederholungsanweisung. Was das mit Informatik zu tun hat, werden wir in der kommenden Unterrichtsstunde erarbeiten.

Aufgabe 1 - Theorie

Lest das Fachkonzept: Wiederholung. Beantwortet die Fragen unten und notiert die Antworten dazu in euerm Gruppendokument.

Was ist eine Wiederholung?
Was unterscheidet sie von einer Verzweigung?
Welche verschiedenen Wiederholungstypen gibt es?
Wie unterscheiden sich diese?

Aufgabe 2 - verschiedene Schleifen

a) Lest die Syntax: while-Schleife. Beantwortet die Fragen unten und notiert die Antworten dazu in euerm Gruppendokument.

Aus welchen Elementen besteht eine while-Schleife?
Wie können komplexe Bedingungen abgefragt werden?

b) Lest die Syntax: for-Schleife. Beantwortet die Fragen unten und notiert die Antworten dazu in euerm Gruppendokument.

Aus welchen Elementen besteht eine for-Schleife?
Was ist der Unterschied zwischen einer for- und einer while-Schleife?

c) Erstellt eine Tabelle, in welchen Fällen man sich für eine bestimmte Schleife entscheiden sollte (Vor/Nachteile der beiden Schleifen).

Aufgabe 3

Erzeugt dieses Muster mit einer der beiden Schleifen:

Aufgabe 4

Erstelle mit Hilfe einer Schleife ein Programm, das ein Band aus zufällig gefärbten Rechtecken durchlaufen lässt.

Hinweis 1 zu Aufgabe 3

Ihr braucht einen Durchmesser, der sich mit jedem Schleifendurchlauf verändert, um das umzusetzen ist eine Variable erforderlich.

Hinweis 2 zu Aufgabe 3

Erzeuge mit der Schleife solange Kreise, bis der Durchmesser der Breite entspricht. Erhöhe den Durchmesser mit jedem Durchgang der Schleife.

Lösung zu Aufgabe 3

Möglichkeit 1 - while

void setup() {
  size(200, 200);
}
 
void draw(){ 
  background(0);
 
  noFill();
  stroke(255, 255, 0);
  strokeWeight(1);
 
  int d = 0;
 
  while (d < width) { 
    ellipse(width / 2, height / 2, d, d);
    d += 10;
  }  
}

Möglichkeit 2 - for

void setup() {
  size(200, 200);
}
 
void draw(){ 
  background(0);
 
  noFill();
  stroke(255, 255, 0);
  strokeWeight(1);
 
  for (int d = 0; d <= width; d += 10) {
    ellipse(width / 2, height / 2, d, d);
  }  
}

Lösung zu Aufgabe 4

while

void setup(){
  size(400, 150);
  frameRate(10);
}
 
void draw(){
  background(255);
 
  int x = 0;
 
  while (x + 30 < width) {
    fill(random(256), random(256), random(256));
    rect(x + 10, 65, 20, 20);
 
    x += 20;
  }
}

for

void setup(){
  size(400, 150);
  frameRate(10);
}
 
void draw(){
  background(255);
 
  for (int x = 0; x + 30 < width; x += 20) {
    fill(random(256), random(256), random(256));
    rect(x + 10, 65, 20, 20);
  }
}

Lösungsvideo Aufgabe 3

Lösungsvideo Aufgabe 4

Aufgabe 5

Erstelle mit Hilfe einer for-Schleife ein Programm, dass einen Farbverlauf von Weiß nach Schwarz auf einer Leinwand 255*255 Pixeln abbildet.

Aufgabe 6

Erzeuge mittels einer Folge von Kreisen und einer while-Schleife die Illusion einer Kugel:

Lösung zu Aufgabe 5

void setup() {
  size(255, 255);
}
 
void draw() {
  for (int i = 0; i < width; i++) {
    stroke(i);
    line(i, 0, i, height);
  }
}

Lösung Aufgabe 6

void setup() {
  size(500, 500);
  background(0);
  noFill();
  strokeWeight(5);
}
 
void draw(){    
  float d = 0;
  float c = 255;
 
  while (d <= width) {
    stroke(c);
    ellipse(width / 2, height / 2, d, d);
 
    d++;
 
    c -= 0.5; // Kleinschrittige Verringerung des Wertes um Verlauf über ganze Breite zu erhalten 
 
    //Mit Haltebedingung scharfen Rand erzeugen
    if (c < 25) { c = 0; }
  } 
}

Aufgabe 7

Erzeugt mit einer for-Schleife dieses Muster:

Aufgabe 8

Erzeugt mit einer (oder mehreren?!?!) for-Schleife(n) dieses Muster:

Lösung Aufgaben 7

void setup() {
  size(400, 200);
}
 
void draw(){
  background(0);
  stroke(255, 255, 0);
 
  for (int i = 10; i < width; i += 10) {
    line(i, 0, i, height);
  }
}

Lösung Aufgaben 8

void setup() {
  size(200, 200);
}
 
void draw() {
  background(0);
  stroke(255, 255, 0);
 
  for (int i = 10; i < width; i += 10) {
    line(i, 0, i, height);
  }
 
  for (int j = 10; j < height; j += 10) {
    line(0, j, width, j);
  }
}

Verschachtelte Schleifen

Um beispielsweise interessante Muster zu erzeugen, kann man for-Schleifen auch ineinander verschachteln. Betrachten wir dazu folgendes Beispiel:

void setup() {
  size(200, 200);
}
 
void draw() {
  background(200);
  stroke(255, 0, 0);
  strokeWeight(5);
 
  for (int x = 20; x < width; x += 20) {
    for (int y = 20; y < height; y += 20) {
      point(x, y);
    }    
  }
}

Die äußere Schleife legt den $x$-Wert der ersten Reihe von Punkten fest. Die innere Schleife zeichnet nun alle 20 Pixel einen Punkt (Änderung des $y$-Werts). Nach Abarbeitung der inneren Schleife springt das Programm wieder in die äußere Schleife und ändert den $x$-Wert um 20 Pixel. Daraufhin zeichnet die innere Schleife die zweite Reihe von Punkten, usw. Nach Erreichen der Abbruchbedingung der ersten Schleife bricht das Programm ab.

Im Prinzip kann man beliebig viele Schleifen ineinander verschachteln. Zu beachten ist dabei, dass mit der Zahl der Schleifen unter Umständen die Laufzeit des Programms deutlich zunimmt. Hier noch ein schönes Beispiel:

void setup() {
  size(200, 200);
}
 
void draw() { 
  background(255);
  stroke(255, 0, 0);
  strokeWeight(1);
  rectMode(CENTER);
 
  for (int y = 9; y < height; y += 20) {
    for (int x = 9; x < width; x += 20) {
      for (int d = 18; d > 0; d -= 4) {
        rect(x, y, d, d); 
      }
    }    
  }
}

Aufgabe 9 - Code Style 2

Nachdem du nun etwas besser im Bereich Schleifen Bescheid weißt, ist es Zeit sich noch einmal den Code Style anzuschauen. Ließ dir dazu das Fachkonzept: Code Style 2 durch.

Aufgabe 10

Experimentiere mit dem letzten Programmbeispiel um weitere Muster zu erzeugen. Beispiele:

Lösungen zu Aufgabe 10

a)

void setup() {
  size(200, 200);
  background(200);
  stroke(255, 0, 0);
  strokeWeight(1);
}
 
void draw() {
  // Rechtecke im Modus "Ankerpunkt im Zentrum"
  rectMode(CENTER);
 
  background(255);
 
  for (int y = 9; y < height; y += 20) {
    for (int x = 9; x < width; x += 20) {
      for (int d = 18; d > 0; d -= 4) {
        if (((x - 9) / 20) % 2 == 1) {
          stroke(0, 0, 255);
          ellipse(x, y, d, d);
        } else {
          stroke(255, 0, 0);
          rect(x, y, d, d); 
        }
      }
    }    
  }
}

b)

void setup() {
  size(200, 200);
  background(200);
  stroke(255, 0, 0);
  strokeWeight(1);
}
 
void draw() {
  // Rechtecke im Modus "Ankerpunkt im Zentrum"
  rectMode(CENTER);
 
  background(255);
 
  for (int y = 9; y < height; y += 20) {
    stroke(random(255), random(255), random(255));
 
    for (int x = 9; x < width; x += 20) {
      for (int d = 18; d > 0; d -= 4) {
        if (((x - 9) / 20) % 2 == 1) {
          ellipse(x, y, d, d);
        } else {
          rect(x, y, d, d); 
        }
      }
    }    
  }
}

c)

void setup() {
  size(200, 200);
  background(200);
  stroke(255, 0, 0);
  strokeWeight(1);
}
 
void draw() {
  // Rechtecke im Modus "Ankerpunkt im Zentrum"
  rectMode(CENTER);
 
  background(255);
 
  for (int y = 9; y < height; y += 20) {    
    for (int x = 9; x < width; x += 20) {
      for (int d = 18; d > 0; d -= 4) {
        stroke(random(255));
 
        if (((x - 9) / 20) % 2 == 1) {
          ellipse(x, y, d, d);
        } else {
          rect(x, y, d, d); 
        }
      }
    }    
  }
}

d)

void setup() {
  fullScreen();
  rectMode(CENTER);
}
 
void draw() {
  background(255);
 
  for (int y = 9; y < height; y += 20) {    
    for (int x = 9; x < width; x += 20) {
      for (int d = 18; d > 0; d -= 4) {
        stroke(random(255), random(255), random(255));
 
        if (((x - 9) / 20) % 2 == 1) {
          ellipse(x, y, d, d);
        } else {
          rect(x, y, d, d); 
        }
      }
    }    
  }
}

Aufgabe 11

Erzeuge folgenden Effekt mit Hilfe von zwei for-Schleifen:

Aufgabe 12

Erstelle ein Programm für folgendes Grundmuster mit Hilfe einer Schleife.

Aufgabe 13

Variiere das Grundmuster aus Aufgabe 12.

Lösung für Aufgaben 11, 12 & 13

Aufgabe 11

void setup() {
  size(200, 200);
}
 
void draw(){
  background(255);
  noStroke();
 
  for (int x = 0; x < width; x += 10) {
    for (int y = 0; y < height; y += 10) {
      fill(random(256), random(256), random(256));
      rect(x, y, 10, 10);
    }
  }
}

Aufgabe 12

void setup(){
  size(200, 200);
}
 
void draw() {
  background(0);
  int randPos = 0;
 
  while (randPos < width) {
    stroke(255, 0, 0);
    line(0, randPos, randPos, height);
 
    randPos += 20;
  }
}

Aufgabe 13

void setup(){
  size(200, 200);
}
 
void draw() {
  background(0);
  int randPos = 0;
 
  while (randPos < width) {
    stroke(255, 0, 0);
    line(0, randPos, randPos, height);
 
    stroke(0, 255, 0);
    line(randPos, 0, width, randPos);
 
    stroke(0, 0, 255);
    line(0, height - randPos, randPos, 0);
 
    stroke(0, 255, 255);
    line(width - randPos, height, width, randPos);
 
    randPos += 20;
  }
}

Aufgabe 14

Wenn man mit dem Muster aus Aufgabe 3 herumspielt, d.h. mit den Parameterwerten experimentiert, kann man sehr interessante dynamische Muster erzeugen. Schaut euch die Lösung dieser Aufgabe an und experimentiert mit den verschiedenen Werten, um andere Muster zu erzeugen.

Lösung Aufgabe 14

int d = 0;
int t = 0;
 
//Änderungsmaß für t
int a = 0;
int b = 5;
 
void setup() {
  size(400, 400);
  frameRate(30);
}
 
void draw(){
  background(0);
 
  //Höhe der Ellipse ändert sich bei jeder Aktualisierung von draw()
  t = t - a;
 
  noFill();
  stroke(255, 255, 0);
  strokeWeight(1);
 
  while (d < width) { 
    ellipse(width / 2, height / 2, d, t);
    d += 10;
    t += 10;
  }
 
  //Nach Durchlaufen der while-Schleife werden die Parameter wieder auf den Startwert gesetzt.
  d = 0;
  t = 0;
 
  //Umkehrpunkte des Musters festlegen
  a += b;
  if (a > width) {
    b = -5;
  }
  if (a < 0) {
    b = 5;
  }
}

Aufgabe 15

Erzeuge weitere psychedelische Muster…

Archiv

Arbeitsauftrag für Zuhause

Bitte bearbeitet folgende Aufgaben sorgfältig, wir benötigen sie für die kommende Unterrichtsstunde.

Führt die oben angegebene "Bastelanleitung" durch. Wenn euch hier etwas unklar sein sollte, schaut euch das nebenstehende Video dazu an.
Sammelt zwei bis drei andere Beispiele für solche Wiederholungen. Denke dabei z.B. an Alltagssituationen, Sport oder Schulfächer. Wenn ihr hierbei Hilfe benötigt findet ihr in der nebenstehenden Hilfebox weitere Beispiele zur Anregung.
Postet eure Beispiele hier, dazu einfach die Beispiele eintippen und auf "abschicken" klicken. Am Ende bitte auf "Alle an die Tafel" klicken!

Erläuterung der Aufgabe

Weitere Beispiele zur Anregung

Wie oben angegeben, begegnen uns Wiederholungen relativ häufig in Alltag, Sport oder auch in der Schule. Hier eine kleine Liste an Möglichkeiten, die euch evtl. zu weiteren Beispielen anregt:

wende die Würstchen auf dem Grill solange, bis sie von beiden Seiten braun sind
laufe 5 mal 100 Meter so schnell zu kannst
führe drei komplette Kurvendiskussionen durch um dich auf die kommende Klausur vorzubereiten
iss solange weiter bis zu satt bist
…

Aufgabe 1 - Grundlagen der for- und while-Schleife

Für diese Aufgabe teilt sich eure Kleingruppe noch einmal auf. Die Einteilung wird euch vom Lehrer mitgeteilt.

Erarbeitung - 10 Minuten

Erarbeitet euch, allein oder zu zweit, die grundlegende Funktion der euch zugeteilten Schleife
1. for-Schleife
2. while-Schleife
Bereitet euch darauf vor, eure Erkenntnisse in der Kleingruppe vorzustellen.

Vorstellung - 10 Minuten

Stellt euch eure Erkenntnisse gegenseitig vor.
Füllt beim ausgeteilten Übersichtsblatt (PDF) für beide Schleifenarten jeweils das Codebeispiel aus, damit ihr in eurer Gruppe eine Übersicht über for- und while-Schleife habt.
1. Den PAP schauen wir uns in der kommenden Stunde an.
2. Wenn ihr Hilfe benötigt, findet ihr diese neben der Aufgabe.

Hinweis zum Codebeispiel

Wir haben zu Beginn der Stunde einige Beispiele gesammelt, außerdem gibt es auf den Seiten zu den Schleifen selbst Codebeispiele.

Mögliche Beipsiele

''for''-Schleife

Zeichnet 10 Kreise an zufälligen Positionen.

for(int i = 0; i < 10; i++){
  circle(random(width), random(height), 10);
}

''while''-Schleife

Zeichnet Kreise über die komplette Fensterbreite mit einem Abstand von 50 Pixel.

int x = 0;
while(x < width){
  circle(x, width/2, 10);
  x += 50;
}