Übung (Smiley/Sadly in p5js)

Vorbemerkungen

Im p5js-Editor 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.