10.2.4 Segelboot

Im letzten Kapitel wurde die Strand-Szene verbreitert:

mehrplatz05

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

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:

frames

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.

segelschiff03

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 Wert segeln_x = -210.

  • Das erreicht man mit einem 'falls-mache-Block' aus der Kategorie 'Logik'. Dort findet man auch einen 'Ungleichungs-Block':

segelschiff04

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 im draw()-Block auf 10 und beobachte die Auswirkung auf die Animation.

  • Setze den Block erhöhe segeln_x um 1 im draw()-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.