If you're seeing this message, it means we're having trouble loading external resources on our website.

Wenn du hinter einem Webfilter bist, stelle sicher, dass die Domänen *. kastatic.org und *. kasandbox.org nicht blockiert sind.

Hauptinhalt

Animierte Szenen

Wir haben nun gelernt, wie man mehrere einfache Szenen erstellt, jedoch waren unsere Szenen bisher nur "statisch" - sie waren weder animiert noch reagierten sie auf Nutzerinteraktion. Wir werden sehen, dass man sich bei raffinierteren Szenen schon etwas mehr einfallen lassen muss. Aber das wollen wir uns nicht entgehen lassen!
Reden wir zuerst über Animationen. Wie zeigen wir Winston zunächst in seiner Rockstar-Phase, in der er leidenschaftlich den Beat schlägt? Normalerweise würden wir hierfür die Funktion draw so definieren, dass mithilfe von Code Formen gezeichnet werden, die sich mit jedem Frame ein kleines Stück bewegen. Hier ein Beispiel, bei dem die Position der trommelnden Hände auf dem aktuellen Wert millis() basiert, der Anzahl vergangener Millisekunden:
Wie fügen wir das nun als vierte Szene zu unserem vorherigen Beispiel hinzu? Wir verschieben den Code in eine Funktion drawScene4() und ändern den Code für die Logik mouseClicked.
var drawScene4 = function() {
    currentScene = 4;
    background(194, 255, 222);

    var x = cos(millis()*1); 
    var y = cos(millis()+98);

    ...
 };

 mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene4();
    } else if (currentScene === 4) {
        drawScene1();
    }
};
Probier es unten aus und klicke dich ein paar Mal durch:
Fällt dir etwas auf? Es hat leider nicht ganz funktioniert. Wir konnten Winston mit seinem Schlagzeug sehen, aber seine Stöcke haben sich nicht bewegt. Wie schade! Es ist schwer, Musik zu machen, wenn die Zeit nicht weiterläuft. Vielleicht hast du den Fehler schon gefunden: Wir rufen den Code zum Zeichnen der Trommelstöcke nicht mehr aus der Funktion draw() heraus auf, daher wird er nur ein Mal aufgerufen--nicht mehrfach--und die Stöcke werden nur in dem Moment wiedergegeben, in dem sie zuerst aufgerufen wird. Vielleicht hast du auch schon die Lösung erraten: Definiere eine Funktion draw() und rufe drawScene4() auf, wenn es benötigt wird.
draw = function() {
    if (currentScene === 4) {
        drawScene4();
    }
};
Das sollten wir einmal genau durchdenken. Wann immer wir eine Funktion draw() in unserem Code aufrufen, wird sie wiederholt aufgerufen (standardmäßig mit 60 FPS) und es wird bei jedem Mal, wenn die aktuelle Szene schon auf 4 gesetzt wurde, dadurch die Funktion zum Zeichnen der vierten Szene ausgeführt. Wenn sie einen anderen Wert hat, wird überhaupt nichts gezeichnet--was aktuell auf dem Bildschirm ist, wird beibehalten. Wir müssen nur noch dafür sorgen, dass durch mouseClicked die Szene das erste Mal gezeichnet wird, und die Logik animiert anschließend jeden nachfolgenden Frame.
Manche von euch werden jetzt denken: Warum gibt es keine Logik, die jede Szenenzeichnungsfunktion innerhalb von draw() aufruft? Nun, das ginge schon und würde dafür sorgen, dass beim Hinzufügen von Animationen zu anderen Szenen diese Animationen sofort funktionieren würden. Wenn man aber davon ausgeht, dass die anderen Szenen nicht animiert werden, würde der Rechner sie ohne Grund immer wieder neu zeichnen. Aus Performance-Gründen ist das ungünstig. Wir sollten dem Computer unnötige Arbeit ersparen, wo immer wir können. Das macht unsere Programme schneller und die Nutzer zufriedener.
OK, jetzt wo wir das alles besprochen haben, seht ihr hier die Geschichte in ihrer ganzen anklickbaren, animierten Pracht. Ihr könnt fast schon die Beats aus der vierten Szene herauskommen hören!

Willst du an der Diskussion teilnehmen?

Noch keine Beiträge.
Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.