11.2.7 Interaktion und Animation

7.1 Interaktion

Heutzutage ist man gewohnt, dass man Apps mit Tastatur, Maus, Finger oder Eingabestift steuern kann, so dass die App auf Eingaben reagiert. Dieses Zusammenspiel von Eingabe und Ausgabe nennt man "Interaktion". Viele Apps bieten neben der Möglichkeit zur Interaktion auch Animationen, bei denen sich Objekte auf dem Display verändern.

Interaktionen und Animationen zu programmieren, ist anspruchsvoll und für Anfänger*innen wenig geeignet. Die Bibliothek p5.js bietet die Möglichkeit, auch ohne große Programmierkenntnisse interaktive und animierte Apps zu bauen, weswegen wir sie in diesem Kurs verwenden.

Im p5.js-Blockly-Editor gibt es in der Kategorie "p5-Funktionen" die beiden Blöcke "setup()" und "draw()":

Alle Anweisungen, die im Block "setup()" stehen, werden genau einmal beim Programmstart ausgeführt.
Alle Anweisungen, die im Block "draw()" stehen, werden viele Male pro Sekunde ausgeführt.

Man muss nicht wissen, wie die p5.js-Bibliothek das macht, man kann den Block "draw()" nutzen, um eine Animation oder eine interaktive App zu programmieren, indem man eine Anweisung, bei denen sich während des Programmablaufs Werte ändern, in den Block "draw()" setzt.

Im folgenden ersten Beispiel wird erst ein statischer Kreis gezeichnet, der sich nicht ändert. Im zweiten Beispiel wird ein Kreis gezeichnet, dessen Position man während des Programmablaufs mit der Maus ändern kann.

7.2 Beispiel: Statischer Kreis

Wenn ein nicht beweglicher Kreis gezeichnet werden soll, wird während der Programmausführung alles nur ein einziges Mal gezeichnet. Deswegen können die Anweisungen in den Block "Setup()" geschrieben werden.

Blöcke
Text

Öffnen Sie den p5.js-Blockly-Editor und stellen Sie folgende Blöcke zusammen, damit eine gelbe Sonne auf blauem Himmel über einer grünen Wiese gezeichnet wird:

Die "Liniendicke" legt die Dicke des Rands um das danach gezeichnete Objekt fest. Da kein Rand gezeichnet werden soll, wird die Liniendicke auf 0 festgelegt.
Die "Füllfarbe" legt die Farbe des danach gezeichneten Objekts fest.
"Ellipse" zeichnet eine Ellipse an den Koordinaten "x" und "y" mit der angegebene "Breite" und "Höhe". Wenn die Breite und Höhe gleich sind, wird ein Kreis gezeichnet.
"Rechteck" zeichnet ein Rechteck mit der oberen linken Ecke an den Koordinaten "x" und "y" mit der angegebene "Breite" nach rechts und der "Höhe" nach unten.

Öffnen Sie den p5.js-Flems-Editor und fügen/tippen Sie dort folgenden Programmier-Code ein, so dass eine gelbe Sonne gezeichnet wird.

var zeichenflaeche;

setup = function() {
  zeichenflaeche = createCanvas(300, 300);
  background("#33ccff");
  strokeWeight(0);
  fill("#ffff00");
  ellipse(60, 80, 50, 50);
  fill("#009900");
  rect(0, 250, 300, 50);            
};

new p5();

fill() legt die Füllfarbe des danach gezeichneten Objekts fest.
strokeWeight() legt die Dicke des Rands um das danach gezeichnete Objekt fest.
ellipse() zeichnet eine Ellipse. Die ersten beiden Zahlen sind die Koordinaten, an welcher die Ellipse gezeichnet wird. Die letzten beiden Zahlen sind die Breite und Höhe der Ellipse. Wenn die Breite und Höhe gleich sind, wird ein Kreis gezeichnet.
rect() zeichnet ein Rechteck. Die ersten beiden Zahlen sind die Koordinaten, an welcher die obere linke Ecke des Rechtecks gezeichnet wird. Die letzten beiden Zahlen sind die Breite und Höhe des Rechtecks nach rechts und nach unten.

7.3 Beispiel: Beweglicher Kreis

Wenn der Kreis beweglich sein soll, muss während der Programmausführung geprüft werden, ob sich etwas ändert und die Änderung muss neu gezeichnet werden. Deswegen müssen die Anweisungen in den Block "draw()" geschrieben werden, der viele Male pro Sekunde ausgeführt wird.

Blöcke
Text

Öffnen Sie den p5.js-Blockly-Editor und stellen Sie die Anweisungen zum Zeichnen von Sonne und Wiese in den Block "draw()". Der Block "setup()" muss weiterhin vorhanden sein, damit eine Zeichenfläche angelegt wird:

Die Sonne soll der Maus folgen. Daher werden die Zahlen, welche bei den Koordinaten der Ellipse stehen, gegen die x- und y-Werte der aktuellen Maus-Position ausgetauscht:

Ändern Sie in den Block "Ellipse" wie folgt. Die beiden Blöcke "Maus: x-Koordinate" und "Maus: y-Koordinate" stehen in der Kategorie "Werte":

Der Block "draw" wird während des Programmablaufs viele Male pro Sekunde ausgeführt, so dass die Änderung der Mausposition vom Programm bemerkt wird und die Position des Kreises in Echtzeit geändert wird.

Hinweis: Die Sonne ist nur zu sehen, wenn die Maus über der Zeichenfläche ist, denn als Mauskoordinaten werden die Koordinaten innerhalb des Internet-Browser-Fensters genommen.

Das Programm kann mit folgendem Link geöffnet werden: Bewegliche Sonne.

Öffnen Sie den p5.js-Flems-Editor und fügen/tippen Sie dort folgenden Programmier-Code ein:

var zeichenflaeche;

setup = function() {
  zeichenflaeche = createCanvas(300, 300);
};

draw = function() {
  background("#33ccff");
  strokeWeight(0);
  fill("#ffff00");
  ellipse(mouseX, mouseY, 50, 50);
  fill("#009900");
  rect(0, 250, 300, 50);
};

new p5();

"mouseX" liefert die aktuelle x-Koordinate der Maus und "mouseY" liefert die aktuelle y-Koordinate der Maus.

Der Block "draw" wird während des Programmablaufs viele Male pro Sekunde ausgeführt, so dass die Änderung der Mausposition vom Programm bemerkt wird und sich die Position des Kreises in Echtzeit ändert.

7.4 Animation mit der Schildkröte

Im folgenden wird einer kleine Schildkröte beigebracht, wie sie eine Zeichnung anfertigen soll. Dem Zeichnen der Schildkröte können wir animiert zusehen. Bevor die Schildkröte (= Turtle) in einem Programm genutzt werden kann, muss diese in das Programm eingefügt werden. Ein minimales Schildkröten-Programm sieht wie folgt aus:

Blöcke
Text

Die Schildkröte wird mit dem Block "Turtle einfügen" an den Koordinaten P(x/y) auf die Zeichenfläche gesetzt. Dieser Block muss im Block "setup()" stehen.

Nachdem die Schildkröte eingefügt wurde, folgen Anweisungen, welche die Bewegung der Schildkröte steuern. Diese Anweisungen können beliebig umfangreich sein und müssen im Block "setup()" stehen. Folgende Anweisung sagt z.B. der Schildkröte, dass sie 100 Pixel in ihre aktuelle Blickrichtung laufen soll:

Nachdem der Schildkröte beigebracht wurde, was sie tun soll, wird mit dem Block "Turtle: Bewegung aufzeichnen" die Bewegung der Schildkröte und alles was sie dabei macht gespeichert. Auch dieser Block muss in "setup()" stehen.

Im Block "draw()" wird animiert ausgeführt, was die Schildkröte vorher gelernt hat. Am Anfang muss der Block "Hintergrundfarbe" stehen, damit während der Animation die alten Positionen der Schildkröte übermalt werden, indem bei jedem Durchlauf die Zeichenfläche neu eingefärbt wird.
Mit dem Block "Turtle: Animation starten" wird die aufgezeichnete Bewegung der Schildkröte animiert ausgeführt. Die Zahl bei "Geschwindigkeit" legt fest, wie schnell sich die Turtle bewegt. Diese Anweisung muss im Block "draw()" stehen.

Das Beispielprogramm kann mit folgendem Internet-Link gestartet werden: Schildkröte läuft vorwärts

7.5 Anweisungen für die Schildkröte

Mit folgenden Anweisungen kann der Schildkröte beigebracht werden, was sie machen soll:

Blöcke
Text

Mit "Stift runter" wird der Schildkröte gesagt, dass sie während ihrer Bewegung zeichnen soll. Mit "Stift rauf" wird der Schildkröte gesagt, dass sie während ihrer Bewegung nicht zeichnen soll.
Mit "Malfarbe" kann man die Farbe im Auswahlfeld oder mit Hilfe des RGB-Code angeben, mit welcher die Schildkröte zeichnen soll.
Mit "Vorwärts" gibt man die Anzahl der Pixel an, um welche sich die Schildkröte in ihre Blickrichtung bewegen soll. Mit "Rückwärts" gibt man die Anzahl der Pixel an, um welche sich die Schildkröte gegen ihre Blickrichtung bewegen soll.
Mit "Drehung nach links" gibt man den Winkel in Grad an, um welchen sich die Schildkröte relativ zu ihrer Blickrichtung nach links drehen soll. Mit "Drehung nach rechts" gibt man den Winkel in Grad an, um welchen sich die Schildkröte relativ zu ihrer Blickrichtung nach rechts drehen soll.

7.6 Schildkröte zeichnet Quadrat

Blöcke
Text

Programm starten: Schildkröte malt ein Quadrat

7.7 Schildkröte zeichnet Haus

Blöcke
Text

Mit folgendem Programm wird der Schildkröte beigebracht wie man ein Haus zeichnet. Das entstehende Bild wird noch mit einer Sonne und einer Wiese ergänzt, für welche die Anweisungen in den Block "draw()" gesetzt werden.

Programm starten: Schildkröte malt ein Haus

7.8 XP: Kunst mit der Schildkröte

Öffnen Sie das Programm: Schildkröte malt ein Haus
Verändern Sie das Programm so, dass ein eigenes Schildkrötenkunstwerk entsteht.
Speichern Sie das Block-Programm oder das Text-Programm und eine Bildschirmkopie der von der Schildkröte gemalten Zeichnung.

Lassen Sie Ihrer Lehrkraft in der vereinbarten Weise ihr Schildkröten-Programm und die Bildschirmkopie der von der Schildkröte gemalten Zeichnung zukommen. Dafür gibt es die vereinbarte Menge an XPs.