p5js Kurs: Lektion 5: Funktionen schreiben
Beispielprogramme dieser Lektion
1.Das Beispielprogramm „Ein Gesicht“
function setup() {
createCanvas(300, 300);
background(100, 149, 237);
noLoop();
//Position des Gesichtes
let x = 80;
let y = height/2;
//Durchmesser des Gesichtes
let d = 80;
//Linkes Gesicht zeichnen
fill(255,193,193);
strokeWeight(d/35);
//linkes Ohr
ellipse(x-d/2, y, d/4);
//rechtes Ohr
ellipse(x+d/2, y, d/4);
//Gesicht
ellipse(x, y, d);
//linkes Auge
fill(255);
ellipse(x-d/5, y, d/4);
//linke Pupille
ellipse(x-d/5, y, 2);
//rechtes Auge
ellipse(x+d/5, y, d/4);
//rechte Pupille
ellipse(x+d/5, y, 2);
//Mund
line(x-d/7, y+d*0.32, x+d/7, y+d*0.32);
//Nase
line(x, y+d/10, x-d/25, y+d/5);
line(x-d/25, y+d/5, x+d*0.03, y+d/5);
//Haare
strokeWeight(d/10);
line(x, y-d*0.47, x+d*0.4, y-d*0.3);
line(x, y-d*0.47, x+d*0.3, y-d*0.3);
line(x, y-d*0.47, x-d*0.1, y-d*0.3);
line(x, y-d*0.47, x-d*0.2, y-d*0.3);
line(x, y-d*0.47, x-d*0.3, y-d*0.3);
line(x, y-d*0.47, x-d*0.4, y-d*0.3);
}
Zeile 4: Da dieses Programm statisch ist, schaltet noLoop() das Neuzeichnen des Programmfensters aus
Zeilen 7, 8 und 10: Legen die Position (x, y) und den Durchmesser d des Gesichtes fest
Zeilen 13-42: Zeichnen das Gesicht; beachte, dass alle Positionen und Abmessungen in Bezug auf x, y und d berechnet werden!
Übungsaufgaben
1.1 Zeichne ein zweites Gesicht rechts neben das erste. Dafür musst Du x einen neuen Wert (zum Beispiel 220) geben, und dann den Code ab Zeile 12 bis Zeile 42 wiederholen.
1.2 Wenn Du die Aufgabe gelöst hast, überlege, ob Dir die Lösung gefällt! Was ist, wenn Du nicht nur zwei, sondern hunderte von Gesichtern zeichnen mußt? Was ist, wenn Du die Position der Augen bei allen Gesichtern verändern willst? Welche Probleme könnten dabei auftreten?
function setup() {
createCanvas(300, 300);
background(100, 149, 237);
noLoop();
//Position des Gesichtes
let x = 80;
let y = height/2;
//Durchmesser des Gesichtes
let d = 80;
//Linkes Gesicht zeichnen
fill(255,193,193);
strokeWeight(d/35);
//linkes Ohr
ellipse(x-d/2, y, d/4);
//rechtes Ohr
ellipse(x+d/2, y, d/4);
//Gesicht
ellipse(x, y, d);
//linkes Auge
fill(255);
ellipse(x-d/5, y, d/4);
//linke Pupille
ellipse(x-d/5, y, 2);
//rechtes Auge
ellipse(x+d/5, y, d/4);
//rechte Pupille
ellipse(x+d/5, y, 2);
//Mund
line(x-d/7, y+d*0.32, x+d/7, y+d*0.32);
//Nase
line(x, y+d/10, x-d/25, y+d/5);
line(x-d/25, y+d/5, x+d*0.03, y+d/5);
//Haare
strokeWeight(d/10);
line(x, y-d*0.47, x+d*0.4, y-d*0.3);
line(x, y-d*0.47, x+d*0.3, y-d*0.3);
line(x, y-d*0.47, x-d*0.1, y-d*0.3);
line(x, y-d*0.47, x-d*0.2, y-d*0.3);
line(x, y-d*0.47, x-d*0.3, y-d*0.3);
line(x, y-d*0.47, x-d*0.4, y-d*0.3);
//Rechtes Gesicht zeichnen
x = 220;
fill(255,193,193);
strokeWeight(d/35);
//linkes Ohr
ellipse(x-d/2, y, d/4);
//rechtes Ohr
ellipse(x+d/2, y, d/4);
//Gesicht
ellipse(x, y, d);
//linkes Auge
fill(255);
ellipse(x-d/5, y, d/4);
//linke Pupille
ellipse(x-d/5, y, 2);
//rechtes Auge
ellipse(x+d/5, y, d/4);
//rechte Pupille
ellipse(x+d/5, y, 2);
//Mund
line(x-d/7, y+d*0.32, x+d/7, y+d*0.32);
//Nase
line(x, y+d/10, x-d/25, y+d/5);
line(x-d/25, y+d/5, x+d*0.03, y+d/5);
//Haare
strokeWeight(d/10);
line(x, y-d*0.47, x+d*0.4, y-d*0.3);
line(x, y-d*0.47, x+d*0.3, y-d*0.3);
line(x, y-d*0.47, x-d*0.1, y-d*0.3);
line(x, y-d*0.47, x-d*0.2, y-d*0.3);
line(x, y-d*0.47, x-d*0.3, y-d*0.3);
line(x, y-d*0.47, x-d*0.4, y-d*0.3);
}
Die Lösung hat mehrere Nachteile, vor allem diese:
- Du musst jedes Mal, wenn Du ein neues Gesicht zeichnen willst, 30 Codezeilen hinschreiben.
- Wenn Du an dem Gesicht etwas ändern willst, und der Code für das Gesicht an 7 Stellen in Deinem Programm steht, dann musst Du den Code auch an 7 Stellen ändern.
2. Gesichter zeichnen mit Funktion
function setup() {
createCanvas(300, 300);
background(100, 149, 237);
noLoop();
gesichtZeichnen(80, height/2, 80);
gesichtZeichnen(220, height/2, 80);
}
function gesichtZeichnen(x, y, d){
fill(255,193,193);
strokeWeight(d/35);
//linkes Ohr
ellipse(x-d/2, y, d/4);
//rechtes Ohr
ellipse(x+d/2, y, d/4);
//Gesicht
ellipse(x, y, d);
//linkes Auge
fill(255);
ellipse(x-d/5, y, d/4);
//linke Pupille
ellipse(x-d/5, y, 2);
//rechtes Auge
ellipse(x+d/5, y, d/4);
//rechte Pupille
ellipse(x+d/5, y, 2);
//Mund
line(x-d/7, y+d*0.32, x+d/7, y+d*0.32);
//Nase
line(x, y+d/10, x-d/25, y+d/5);
line(x-d/25, y+d/5, x+d*0.03, y+d/5);
//Haare
strokeWeight(d/10);
line(x, y-d*0.47, x+d*0.4, y-d*0.3);
line(x, y-d*0.47, x+d*0.3, y-d*0.3);
line(x, y-d*0.47, x-d*0.1, y-d*0.3);
line(x, y-d*0.47, x-d*0.2, y-d*0.3);
line(x, y-d*0.47, x-d*0.3, y-d*0.3);
line(x, y-d*0.47, x-d*0.4, y-d*0.3);
}
Die Zeilen 10-41 definieren die Funktion gesichtZeichnen()
Zeile 10 definiert die Signatur der Funktion: Sie soll gesichtZeichnen heißen und erwartet drei Werte zwischen den runden Klammern, die wir hier x, y und d nennen und die für die Position und den Durchmesser des Gesichts stehen
Die Zeilen 11-40 definieren, was passieren soll, wenn Du die Funktion benutzt; die jeweiligen Werte für x, y und d werden eingesetzt
In den Zeilen 6 und 7 wird die weiter unten definierte Funktion mit jeweils unterschiedlichen Werten verwendet
Übungsaufgaben
2.1 Zeichne Gesichter an unterschiedlichen Positionen und in verschiedenen Größen in das Programmfenster.
2.2 Schreibe, ähnlich wie bei dem Beispiel Konfettiparty aus Lektion 2 ein Programm, das den Bildschirm mit „Gesichtskonfetti“ füllt.
2.3 Schreibe ein Programm, bei dem Du mit Mausklicks Gesichter im Programmfenster positionierst.
function setup() {
createCanvas(300, 300);
background(100, 149, 237);
noLoop();
gesichtZeichnen(100, 50, 80);
gesichtZeichnen(50, 150, 60);
gesichtZeichnen(250, 100, 40);
gesichtZeichnen(200, 250, 220);
}
//...
function setup() {
createCanvas(300, 300);
background(100, 149, 237);
}
function draw() {
let x = random(width);
let y = random(height);
gesichtZeichnen(x, y, 50);
}
// ...
function setup() {
createCanvas(300, 300);
background(100, 149, 237);
}
function mousePressed() {
gesichtZeichnen(mouseX, mouseY, 50)
}
//...
3. Bäume zeichnen
function setup() {
createCanvas(300, 200);
background(185, 211, 238);
noLoop();
baumZeichnen(70, height, 110);
baumZeichnen(150, height, 90);
baumZeichnen(230, height, 130);
}
function baumZeichnen(x, y, h){
// Stamm
stroke(139, 35, 35);
strokeWeight(h/5);
line(x, y, x, y-h);
// Krone
fill(0, 100, 0);
noStroke();
ellipse(x, y-h, h);
}
Die Zeilen 10 bis 20 definieren die Funktion baumZeichen(). Sie erwartet drei Argumente: x und y stehen für die Position der Wurzel; h steht für die Höhe. Die Zeilen 12-14 sind für das Zeichnen des Stamms zuständig: Zeile 12 legt die Strichfarbe für den Stamm fest Zeile 13 setzt die Strichstärke auf einen Wert abhängig von der Höhe des Baums Zeile 14 malt den Stamm, indem sie von der Wurzel aus eine senkrechte Linie zieht Die Zeilen 16-18 zeichnen die Krone: Zeile 16 setzt die Füllfarbe auf dunkelgrün Zeile 17 sorgt mit noStroke() dafür, dass die Krone ohne Umrandung gezeichnet wird Zeile 18 zeichnet die Krone In den Zeilen 5-7 verwenden wir die Funktion und zeichen drei Bäume
Übungsaufgaben
3.1 Verbessere die Funktion baumZeichnen(), indem Du dem Grün der Baumkronen unterschiedliche, zufallsgesteuerte Schattierungen gibst. Verwende hierfür die Funktion random(). Beachte, dass Du mit random() auch Zufallszahlen aus Wertebereichen erzeugen kannst: random(100, 200) liefert Zahlen zwischen 100 und 200.
3.2 Modifiziere das Programm so, dass Du Bäume per Mausklick pflanzen kannst. Wähle für die Höhe einen jeweils zufällig erzeugen Wert zwischen 20 und 50.
3.3 Schreib ein Programm, das zufallsgesteuert Bäume an die Unterkante des Programmfensters zeichnet.
3.4 Du kannst Dir weitere Baum-Funktionen ausdenken. Bäume können auch elliptische oder quadratische Kronen haben oder solche, die aus mehreren Ellipsen bestehen. Bäume können Äpfel oder anderes Obst tragen…
function setup() {
createCanvas(300, 200);
background(185, 211, 238);
noLoop();
baumZeichnen(70, height, 110);
baumZeichnen(150, height, 90);
baumZeichnen(230, height, 130);
}
function baumZeichnen(x, y, h){
// Stamm
stroke(139, 35, 35);
strokeWeight(h/5);
line(x, y, x, y-h);
// Krone
let gruen = random(100, 200)
fill(0, gruen, 0, 200);
noStroke();
ellipse(x, y-h, h);
}
function setup() {
createCanvas(300, 200);
background(185, 211, 238);
noLoop();
}
function mousePressed() {
let h = random(20, 50)
baumZeichnen(mouseX, mouseY, h);
}
// ...
function setup() {
createCanvas(300, 200);
background(185, 211, 238);
}
function draw() {
let x = random(width)
let h = random(20, 100);
baumZeichnen(x, height, h);
}
// ...
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“.
