Übungen

Zunächst können die bisher besprochenen Themen kurz wiederholt werden.

Mit diesen folgenden Aufgaben wollen wir die bisherigen Konzepte wie Variablen/Konstanten, Ein- und Ausgabe, Operatoren, Funktionen, if/else if/else und switch anwenden und somit vertiefen.

Übungen werden in Moodle bereitgestellt.

Aufgaben und Lösungen siehe 04-if-switch im Repository exercises.

Zusatzaufgabe: Smiley/Sadly in p5js.org

Mit dieser Zusatzaufgabe werden Funktionen zur Abwechslung in der JavaScript-Bibliothek p5js.org eingesetzt.

Im p5js-Editor lassen sich in einer interaktiven Umgebung Grafiken und Animationen erstellen.

Im Code werden zwei Funktionen deklariert (setup und draw). In den beiden Funktionen werden jeweils im Funktionsrumpf andere Funktionen aus dem Framework p5js aufgerufen (createCanvas() mit zwei Parametern und background() mit einem Parameter).

function setup() {	
  createCanvas(400, 400);	
}
	
function draw() {
  background(220);	
}

Aufgabe

Bauen Sie in editor.p5js.org einen interaktiven Smiley bzw. Sadly.

Der Smiley soll aus verschiedenen Kreiseln (circle) für den Kopf, die Augen und den lächelnden Mund bestehen. Wenn der Mauszeiger in der oberen Hälfte der Leinwand (canvas) ist, soll der Smiley zu sehen sein. Bewegt sich der Mauszeiger in die untere Hälfte, dann wird der Smiley zu einem Sadly, d.h. die Mundwinkel zeigen nach unten. Die Mausposition kann jederzeit mit mouseX und mouseY abgefragt werden.

Versuchen Sie mindestens den Smiley in p5js zu bauen:

Hinweise zum Vorgehen:
Erstellen Sie für die Zeichnung der einzelnen Bestandteile des Smileys jeweils passende Funktionen, die Sie dann in der draw-Funktion aufrufen, z.B.

function draw() {
  background(220);
  // die folgenden drei Funktionen sind zu schreiben!
  drawFace();
  drawEyes();
  drawMouth();
}

Der Sadly sieht dann so aus und sollte erscheinen, wenn der Mauszeiger in die untere Hälfte der canvas bewegt wird:

Mögliche Zusatzaufgaben:

Gestalten Sie den Smiley nach eigenen Ideen: Pupillen, Augenbrauen, Brille, Hut, Zähne, usw. oder bauen Sie mehrere unterschiedliche Smileys ein.

Hier können Sie gerne kreativ werden und KI-Tools einsetzen!

→ Durch KI-Tools gelingt die Verwendung von p5js schneller und einfacher.