Bello (ein virtueller Hund) soll mit Hilfe von p5.js einen virtuellen Spaziergang im Grünen machen. Dazu muss Bello erst einmal virtuell gestaltet werden: Strecken (Läufe, Schweif), ein Rechteck (Rumpf) und ein Kreis (Kopf) modellieren ihn. Diese geometrischen Objekte werden durch die Angabe von Koordinaten, Radien,... erzeugt.
Bisher haben wir Objekte immer direkt in den Zeichenbereich gesetzt. Bei Animationen wurden die Koordinaten der Objekte geändert. Hier wirst du einen völlig anderen Ansatz kennenlernen: Bello wird relativ zum Koordinatenursprung gezeichnet und dann verschoben.
Der große Vorteil dieses Ansatzes ist, dass die Koordinaten, die Bello erzeugen, immer unverändert bleiben, so dass Änderungen am Aussehen leicht vorgenommen werden können. Würde man Verschiebungen oder sogar Animationen über Veränderungen der Koordinaten programmieren, dann wäre die Pflege eines Programms bei komplizierteren Objekten kaum zu schaffen.
Also soll Bello erst einmal gezeichnet werden. Da es ein Spaziergang wird, darf der Himmel, eine Wiese und die Sonne nicht fehlen.
Du solltest jetzt genügend Erfahrung mit p5.js gesammelt haben, dass die einzelnen Programmieranweisungen nicht mehr erklärt werden müssen. Neu ist hier die Anweisunge translate(0, 300);. Die Übersetzung von translate ist verschieben. Bello wird relativ zum Koordinatenursprung erzeugt und dann in die linke untere Ecke des Zeichenbereichs verschoben. Denke daran, dass bei p5.js oben links der Koordinatenursprung ist und die y-Koordinate nach unten positiv größer wird.
translate(0, 300); bedeutet also: verschiebe alles was folgt um 0 Pixel in x-Richtung und 300 Pixel nach unten.
Bello soll auf der Wiese laufen, also muss er noch auf die Wiese verschoben werden. translate(x,y); kann beliebig oft hintereinander ausgeführt werden. Deshalb wird er zuerst nach unten links in der Ecke verschoben und danach um 50 Pixel nach oben und 50 Pixel nach rechts. Durch diese Hintereinanderausführung könnte Bello immer parallel zu den Koordinatenachsen verschoben werden, was die Steuerung erleichtert. Du kannst ihn natürlich aber auch verschieben, wie du möchtest.
Jetzt kann Bello ein drittes Mal verschoben werden, so dass er seinen Spaziergang gemacht hat.
Da während des virtuellen Spaziergangs einige Zeit vergangen ist, wird sich die Position der virtuellen Sonne in dieser Zeit auch verändert haben. Das ermöglicht eine weitere Verschiebung.
Moment! Wo sind Bello und die Wiese? Da translate(x,y); alle Objekte verschiebt, werden Bello und die Wiese mit der Sonne auch nach links und nach unten verschoben.
Damit nur die Sonne verschoben werden kann, bietet p5.js zwei Anweisungen an: push(); und pop();. Mit der Anweisung push(); merkt sich p5.js den Zustand des Zeichenbereichs. Dann kann man die Sonne verschieben und nach pop(); werden die folgenden Veränderungen ohne die Anweisungen zwischen push(); und pop(); ausgeführt (gilt übrigens auch für Liniendicke, Farbe,...).
Damit kann die Sonne verschoben werden, und Bello und die Wiese bleiben an ihrer Position.
Die Sonne kann mit Hilfe von translate, push und pop auch animiert werden.
Dazu führt man viele kleine Verschiebungen hintereinander aus. Dies wird mit Hilfe einer Variablen sonnenwanderung, welche bei jedem frame eins größer wird, gesteuert. Damit die Verschiebung auch an der Zielposition endet, fragt man den Wert von sonnenwanderung mit Hilfe einer if-Abfrage ab:
if (sonnenwanderung < 250) {
translate(-sonnenwanderung, sonnenwanderung/5 );
sonnenwanderung++;
}
else { translate(-sonnenwanderung, sonnenwanderung/5 ) }Auf die gleiche Weise kann man Bello auch animieren.
Um die Funktionsweise von push und pop zu verdeutlichen findest du am Ende der draw-Funktion noch einen Kreis, der einen virtuellen Mond darstellen soll. Dieser Kreis wird mit Bello verschoben, da die Verschiebung von Bello nicht mit push und pop isoliert wurde.
Setzt man die Animation von Bello zwischen push und pop, dann bleibt der virtuelle Mond an seiner Stelle.
Mit Hilfe von p5.js kannst du Objekte rotieren. Die Anweisung dazu ist:
rotate(bogenmass);Die Rotation wird im Bogenmaß gemessen. Dabei gilt, für eine volle Drehung ist das Bogenmaß 2 PI. Für eine halbe Drehung ist das Bogenmaß PI, für eine viertel Drehung PI/2, usw.
Mit dem was du über die Verschiebung im ersten Teil dieses Kapitel gelernt hast, solltest du in der Lage sein, die Programmierung der folgenden Uhr zu verstehen. Beachte dabei, dass alle Objekte (Uhrkreis, Zeiger, Markierungen) mit den Koordinaten (0,0) angelegt werden und zum Zielort verschoben und rotiert werden.
Versuche bei 12 Uhr, 3 Uhr, 6 Uhr und 9 Uhr einen Strich als Markierung zu setzen und verwende dabei translate und rotate.
In der Lösung wird jeder Markierungsstrich beim Ursprung O(0,0) erzeugt, in die Mitte verschoben, gedreht und an seine Zielposition verschoben.
Mit Hilfe von p5.js kannst du Objekte skalieren. Die Anweisung dazu ist:
scale(faktor);Dabei werden alle geometrischen Eigenschaften des Objekts (auch z.B. die Liniendicke) skaliert. Mit Hilfe von push und pop kannst du die Skalierung auf ein Objekt begrenzen.
Bello, aus dem ersten Teil des Kapitels, soll eine große Schwester Bella bekommen: