10.2.2 Viele Wolken


Im letzten Kapitel wurde eine Strand-Szene gebaut:

strand01

Meist ist mehr als nur eine Wolke am Himmel.


Viele Wolken mit Hilfe von Variablen zeichnen

  • Öffne den p5js-Blockly-Editor indem du auf folgenden Link klickst: Editor öffnen und lade dein Strand-Programm.

oder

  • Klicke auf folgenden Link um ein funktionierendes Programm zu laden: Strand-Programm

Du solltest in der Zeichenfläche deines Editors die oben abgebildete Strandszene sehen.

  • Klicke mit der Maus auf das Zahnrad im Wolken-Block und schiebe zweimal einen Block Variable in den Block Parameter.

  • Ändere dann den Namen der Variablen in wolke_x und wolke_y:

  • Klicke auf 'Mathematik' und ziehe den obersten Zahlblock in den Editor. Setze einen Zahlblock mit dem Wert 100 bei wolke_x ein und einen Zahlblock mit dem Wert 60 bei wolke_y.

Du solltest folgendes sehen:

wolken01

Mit Hilfe der beiden Variablen wolke_x und wolke_y soll der Wolken-Block jetzt so verändert werden, dass beliebig viele Wolken in unterschiedlichen Positionen an den Himmel gezeichnet werden können.

Dazu soll für eine Wolke die Position der Ellipsen, aus welchen die Wolke aufgebaut ist, nicht wie bislang mit Werten angegeben werden, sondern aus den beiden Variablen wolke_x und wolke_y berechnet werden.

  • Ziehe aus 'Mathematik' den Rechenblock ins Programm und aus 'Variablen' die Blöcke wolke_x und wolke_y.

Du solltest folgendes sehen:

wolken02

  • Erstelle für jede Ellipse im Wolken-Block für den Wert x einen Rechenblock, so dass aus dem Variablen-Wert wolke_x = 100 durch eine Rechnung der im Moment notierte Wert berechnet wird.

  • Erstelle für jede Ellipse im Wolken-Block für den Wert y einen Rechenblock, so dass aus dem Variablen-Wert wolke_y = 60 durch eine Rechnung der im Moment notierte Wert berechnet wird.

Beispiel:

  • Bei der ersten Ellipse ersetzt man den x-Wert 93 durch den Rechenblock wolke_x - 7.
  • Bei der ersten Ellipse ersetzt man den y-Wert 80 durch den Rechenblock wolke_y + 20.

Damit wird der Wolken-Block wie folgt geändert:

wolken03

Wenn man jetzt auf 'Code ausführen' klickt, dann hat sich an der Strandszene nichts geändert. Doch...

In die Strand-Szene kann man jetzt einfach weitere Wolken einfügen, indem man weitere Wolken-Blöcke mit anderen Werten für wolke_x und wolke_y in den draw()-Block einfügt:

  • Klicke mit der rechten Maustaste auf den Wolken-Block, dann auf 'kopieren' und schiebe den neuen Block ans Ende des draw()-Blocks.

  • Füge beliebig viele neue Wolke-Blöcke ein und ändere die Werte für wolke_x und wolke_y.

wolken04

Die Strandszene nimmt langsam Form an:

wolken05