10.2.4 Segelboot
Im letzten Kapitel wurde die Strand-Szene verbreitert:
In der Szene fehlt noch ein Segelboot. Das soll sich ändern.
Ein Segelboot bauen
- Öffne den p5js-Blockly-Editor indem du auf folgenden Link klickst: Editor öffnen und lade dein breites Wolken-Strand-Programm.
oder
- Klicke auf folgenden Link um ein funktionierendes Programm zu laden: Mehr Platz am Strand
In das Meer soll jetzt ein Segelboot gesetzt werden.
- Baue mit dem was du gelernt hast ein einfaches Segelboot.
Das Segelboot soll mit Hilfe der beiden Variablen segelboot_x
und segelboot_y
beliebig im Meer platziert werden können.
Das Segelboot animieren
Mit einem Grafikprogramm könnte man eine Strandszene leicht zeichnen. Computer werden eingesetzt, wenn in die Szene Leben kommen soll. Dafür wird das Aussehen und die Position von Objekten mit Hilfe des Computers berechnet. Inzwischen werden in manchen aktuellen Filmen für fast alle Szenen Computer eingesetzt, um Effekte einzubauen, die ohne Computer undenkbar wären.
Mit Hilfe der Rechenfähigkeit des Computers soll das Segelboot animiert werden. Etwas Theorie:
-
Im Strand-Szene-Programm wird der
draw()
-Block 60 mal pro Sekunde ausgeführt. Wenn sich nichts am Bild ändert, bekommt man davon nichts mit, aber das soll sich jetzt ändern. -
Für eine Ausführung des
draw()
-Blocks nennt man den Bildschirminhalt einen Frame. -
Die Frame-Rate ist die Anzahl von Frames pro Sekunde. Unser Programm hat also eine Frame-Rate von 60.
Das Segelboot soll sich im Lauf der Zeit über das Meer bewegen:
Idee:
-
Für die x-Koordinate des Segelboots setzen wir eine Variable
segeln_x
ein. -
Der Wert der Variable
segeln_x
wird in jedem Frame eins größer.
- Klicke auf folgenden Link um das animierte Segelboot zu laden: Animiertes Segelboot alleine auf dem Meer
Das Segelboot soll nicht nur einmal über das Meer segeln, sondern nach kurzer Zeit wieder auftauchen.
-
Sobald das Segelboot die Zeichenfläche verlassen hat, setzt man die Variable
segeln_x
auf einen Wert links außerhalb der Zeichenfläche, z.B. auf den Wertsegeln_x = -210
. -
Das erreicht man mit einem 'falls-mache-Block' aus der Kategorie 'Logik'. Dort findet man auch einen 'Ungleichungs-Block':
Die Geschwindigkeit des Segelboots kann man verändern, indem man die Variable segeln_x
im draw()
-Block pro Frame unterschiedlich verändert:
-
Setze den Block
erhöhe segeln_x um 1
imdraw()
-Block auf 10 und beobachte die Auswirkung auf die Animation. -
Setze den Block
erhöhe segeln_x um 1
imdraw()
-Block auf 0.1 und beobachte die Auswirkung auf die Animation.
Damit haben wir ein animiertes Segelboot: Animiertes Segelboot
- Animiere die Wolken.
- Animiere die Wolken so, dass sie sich unabhängig voneinander mit leicht verschiedenen Geschwindigkeiten bewegen.