Einfache Animation

Um etwas zu animieren gibt es in p5js eine Besonderheit: wenn eine Funktion mit dem Namen draw() existiert, wird diese automatisch jedes Mal aufgerufen wenn der Canvas neu gezeichnet wird. Normalerweise passiert das 30 mal pro Sekunde. Sie können einfach mal ausprobieren was bei folgendem Code passiert:

function draw() {
    console.log("I ❤️ Hamster!");
}

damit Sie im vorigen Beispiel etwas sehen können, muss natürlich auch hier p5canvas offen sein und das Konsolen-Fenster am unteren Rand sichtbar sein.

Wow, du magst Hamster echt gern 😄.

Wenn man in draw() nun etwas zeichnet, wird das also immer und immer wieder neu gezeichnet. Wenn man dazwischen Dinge verändert, hat man eine Animation!

Aufgabe 1

Kopieren Sie Ihr Emoji in eine neue Datei emoji-animation.js
Bewegen Sie Ihr Emoji von Links nach Rechts über den Bildschirm.

Aufgabe 2

Animieren Sie Ihre Halloween-Dekoration. Bitte animieren Sie mindestens zwei Dinge. Nennen Sie die Datei halloween-animation.js.

Übertreiben sie es nicht, Sie müssen keinen Fledermaus-Flügelschlag animieren.

Committen und Pushen Sie beide Ergebnisse auf Gitlab bis zum 09.11.2022 / 18:00 Uhr