p5js Kurs: Lektion 5: Funktionen schreiben

Beispielprogramme dieser Lektion

Ein Gesicht

Zwei Gesichter ohne Funktion

Zwei Gesichter mit Funktion

Bäume zeichnen


1.Das Beispielprogramm „Ein Gesicht“


Programm im Editor öffnen


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);
}


2. Gesichter zeichnen mit Funktion


Programm im Editor öffnen


function setup() {
  createCanvas(300, 300);
  background(240);
  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 weitere 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 in das Programmfenster malst.


3. Bäume zeichnen


Programm im Editor öffnen


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 Mach die Baumkronen halbtransparent, indem Du einen vierten Wert an fill() übergibst. Dieser sogenannte Alphawert steht für die Deckkraft der Farbe. fill(0, 255, 0, 128) ergibt ein halbtransparentes Grün.
3.3 Modifiziere das Programm so, dass Du Bäume per Mausklick pflanzen kannst.
3.4 Denk Dir weitere Baum-Funktionen aus. 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…
3.5 Schreib ein Programm, das zufallsgesteuert Bäume an die Unterkante des Programmfensters zeichnet.

Navigation

Übersicht

Vorherige Lektion

Nächste Lektion