p5js Kurs: Lektion 6: Wiederholungen
Beispielprogramme dieser Lektion
Wiederholen mit while und Bedingung
1. Code wiederholen mit while und Bedingung
let zaehler = 0;
let grenze = 5;
while (zaehler < grenze) {
console.log("Wert des Zählers:", zaehler);
zaehler = zaehler + 1;
}
Der Code in den Zeilen 5 und 6 wird so lange ausgeführt, wie die Bedingung zaehler < grenze wahr ist.
Zu Beginn des Programms hat zaehler den Wert 0. Mit jedem Durchlaufen der Schleife erhöht Zeile 6 den Wert von zaehler um 1.
Entsprechend lautet die Ausgabe des Programms:
Wert des Zählers: 0 Wert des Zählers: 1 Wert des Zählers: 2 Wert des Zählers: 3 Wert des Zählers: 4
Übungsaufgaben
1.1 a) Sorge dafür, dass die Schleife bis 25 zählt.
1.1 b) Ändere das Programm so, dass die Schleife bei 5 beginnt.
1.1 c) Ändere die Schrittweite (also der Wert, um den zaehler jeweils erhöht wird) von 1 auf 5.
let zaehler = 5;
let grenze = 26;
while (zaehler < grenze) {
console.log("Wert des Zählers:", zaehler);
zaehler = zaehler + 5;
}
2. Code wiederholen mit for
for(let zaehler=0; zaehler<5; zaehler=zaehler+1){
console.log("Wert des Zaehlers:", zaehler)
}
Das Programm erzeugt exakt dieselbe Ausgabe wie das vorherige Beispiel für die while-Schleife. Allerdings stehen hier Initialisierung des Zaehlers, die Abbruchbedingung und die Erhöhung des Zählers komplett in der for-Anweisung in Zeile 1.
Übungsaufgaben
2.1 Ändere die for-Anweisung so, dass die Ausgabe identisch ist mit jener von Aufgabe 1.1: Die Schleife soll von 5 bis 25 in 5er-Schritten zählen.
for(let zaehler=5; zaehler<26; zaehler=zaehler+5){
console.log("Wert des Zaehlers:", zaehler)
}
3. Das Beispielprogramm „Zwei Reihen“
let schrittweite;
function setup() {
createCanvas(400, 400);
background(30,144,255);
stroke(255, 64, 64);
strokeWeight(3);
noFill();
schrittweite = 30;
// obere Reihe
for (let x=0; x<=width; x=x+schrittweite){
ellipse(x, 100, 50);
}
// mittlere Reihe
for (let x=0; x<=width; x=x+schrittweite){
ellipse(x, 200, 50);
}
// untere Reihe ???
}
Zeile 10 setzt schrittweite auf 30.
Die beiden for-Schleifen in den Zeilen 13-15 und 18-20 zeichnen die mittlere und die obere Reihe Kreise: Der Wert x für den Aufruf von ellipse() wird jeweils von der Schleife geliefert. Eine geringere Schrittweite sorgt für eine dichtere Reihe von Kreisen. Bei einer höheren Schrittweite sind die Kreise dichter beieinander.
Übungsaufgaben
3.1 Experimentiere mit unterschiedlichen Schrittweiten.
3.2 Ergänze eine dritte, untere Reihe.
let schrittweite;
function setup() {
createCanvas(400, 400);
background(30,144,255);
stroke(255, 64, 64);
strokeWeight(3);
noFill();
schrittweite = 30;
// obere Reihe
for (let x=0; x<=width; x=x+schrittweite){
ellipse(x, 100, 50);
}
// mittlere Reihe
for (let x=0; x<=width; x=x+schrittweite){
ellipse(x, 200, 50);
}
// untere Reihe
for (let x=0; x<=width; x=x+schrittweite){
ellipse(x, 300, 50);
}
}
4. Das Beispielprogramm „Musterhaft“
let schrittweiteX, schrittweiteY;
function setup() {
createCanvas(400, 400);
background(255, 105, 180);
stroke(138, 43, 226);
strokeWeight(3);
fill(255,255,0, 150);
schrittweiteX = 50;
schrittweiteY = 50;
for (let y = 0; y <= height; y = y + schrittweiteY) {
for (let x = 0; x <= width; x = x + schrittweiteX) {
ellipse(x, y, 25);
}
}
}
In diesem Fall haben wir es mit zwei ineinander verschachtelten for-Schleifen zu tun:
Die äußere Schleife (begrenzt von den Zeilen 13 und 17) liefert die y-Koordinaten. Die innere Schleife (begrenzt von den Zeilen 14 und 16) stellt die x-Koordinaten bereit.
Die Zeile 15 zeichnet den Kreis mit den entsprechenden Koordinaten.
Übungsaufgaben
4.1 Experimentiere mit unterschiedlichen Werten für schrittweiteX und schrittweiteY.
4.2 Sorge dafür, dass die Kreise jeder Reihe mit einem anderen, zufälligen Durchmesser zwischen 10 und 30 gezeichnet werden.
4.3 Was müsstest Du tun, damit jede Spalte (also eine senkrechte Reihe) einen anderen Durchmesser bekommt?
4.4 Ändere den Code so, dass die Strichstärke (strokeWeight) eines jeden Kreises einen zufälligen Wert zwischen 1 und 10 bekommt.
let schrittweiteX, schrittweiteY;
function setup() {
createCanvas(400, 400);
background(255, 105, 180);
stroke(138, 43, 226);
strokeWeight(3);
fill(255, 255, 0, 150);
schrittweiteX = 50;
schrittweiteY = 50;
for (let y = 0; y <= height; y = y + schrittweiteY) {
let d = random(10, 30);
for (let x = 0; x <= width; x = x + schrittweiteX) {
ellipse(x, y, d);
}
}
}
Indem Du Zeile 13 und Zeile 15 der Lösung von 4.2 vertauschst!
let schrittweiteX, schrittweiteY;
function setup() {
createCanvas(400, 400);
background(255, 105, 180);
stroke(138, 43, 226);
strokeWeight(3);
fill(255, 255, 0, 150);
schrittweiteX = 50;
schrittweiteY = 50;
for (let y = 0; y <= height; y = y + schrittweiteY) {
for (let x = 0; x <= width; x = x + schrittweiteX) {
let strichstaerke = random(1, 10);
strokeWeight(strichstaerke);
ellipse(x, y, 25);
}
}
}
5. Das Beispielprogramm „Explosionspinsel“
function setup() {
createCanvas(400, 400);
background(255, 187, 255);
noStroke();
}
function mousePressed(){
for (let i=0; i<10; i++){
let x = mouseX + random(-20,20);
let y = mouseY + random(-20,20);
let rot = random(200, 255);
let durchmesser = random(10, 30)
fill(rot, 50, 0, 150);
ellipse(x, y, durchmesser);
}
}
function keyPressed(){
background(255, 187, 255);
}
Jedes Mal, wenn der Mauszeiger gedrückt wird, passiert folgendes:
Die for-Schleife (Zeilen 9-16) wiederholt zehnmal den Code in den Zeilen 10 bis 15.
Die Zeilen 10 und 11 berechnen die x und die y Position abhängig von der aktuellen Mausposition plus einer Zufallszahl zwischen -20 und 20.
Die Zeile 12 liefert einen zufälligen Wert zwischen 20 und 255 für den Rotanteil.
Zeile 13 ermittelt einen zufälligen Durchmesser.
Zeile 14 setzt die Füllfarbe.
Zeile 15 zeichnet jeweils einen Kreis.
Übungsaufgaben
5.1 a) Ändere die Anzahl der Kreise, die pro Mausklick gezeichnet werden auf 25.
5.1 b) Erhöhe die maximale Entfernung der Kreise vom Mauszeiger auf 50.
5.1 c) Erhöhe den maximalen Durchmesser der Kreise auf 50.
function setup() {
createCanvas(400, 400);
background(255, 187, 255);
noStroke();
}
function mousePressed(){
for (let i=0; i<25; i++){
let x = mouseX + random(-50,50);
let y = mouseY + random(-50,50);
let rot = random(200, 255);
let durchmesser = random(10, 50)
fill(rot, 50, 0, 150);
ellipse(x, y, durchmesser);
}
}
function keyPressed(){
background(255, 187, 255);
}
Zeile 9 löst Aufgabe 5.1 a)
Die Zeilen 10 und 11 lösen Aufgabe 5.1 b)
Zeile 13 löst Aufgabe 5.1 c
Navigation
Dieser Kurs wurde entwickelt mit freundlicher Unterstützung und Kooperation in Workshops mit der Lernoase im Freizeitheim Vahrenwald in Hannover.
Alle Materialien stehen unter der Lizenz CC BY-NC-SA 4.0 mit Namensnennung „Pit Noack“.
