3. Dezember: Christmas Star

Vier virtuelle Sterne

Heute kannst du einen Weihnachtsstern basteln und zugleich etwas Programmieren lernen. Da das Studium an der HTW Berlin in diesem Semester online stattfindet, hat der Studiengang Ingenieurinformatik eine Bastelanleitung für einen virtuellen Stern bereitgestellt.

Achtung Gewinnspiel! Wem es gelingt, das Programm aus der Anleitung mit unter 20 Befehlen noch cooler zu machen (bunte Sterne, schönere Sterne, viele Sterne, …), kann seine Lösung in Form einer XML-Datei bis zum 13.12.2020 per Mail mit dem Betreff "Christmas Star" an Frank.Burghardt@htw-berlin.de und Mohammad.Abuosba@HTW-Berlin.de senden. Unter den Lösungen werden drei kleine Überraschungspakete verlost. Hier geht's zu den Teilnahmebedingungen. Die schönsten Sterne werden auf dieser Webseite veröffentlicht.

Grundlagen

Besuche die Webseite snap.berkeley.edu/snap/snap.html. Dort findest du eine grafische Programmierumgebung ("Scratch"). Du schiebst dabei alle notwendigen Befehle des Programms wie Puzzle-Bausteine zusammen. Die Puzzle-Bausteine findest du auf der linken Seite. Oben links findest du eine Paletten-Auswahl, in der du zwischen verschiedenen Befehlskategorien wechseln kannst.

Für dein Weihnachtsstern-Projekt brauchst du nur die

  • blauen Bewegungsfehle (Motion - zur Bewegung des Cursors im weißen Anzeigefeld),
  • grünen Zeichenbefehle (Pen - das ist dein Malstift),
  • hellbraunen Steuerbefehle (Control - für die Programmsteuerung),
  • orangenen Variablenanweisungen (Variables - die brauchst du, um die Drehungen zu zählen).
Paletten-Auswahl
Paletten-Auswahl

Deine erste Linie

Suche dir die notwendigen Befehle als Puzzlebausteine heraus und ziehe sie auf die Programmierfläche in der Mitte, sodass du dort ein Programm wie in der Abbildung erhältst. Die Puzzlebausteine müssen stets "einrasten". Du kannst diese aber auch wieder auseinanderziehen, wenn du etwas ändern möchtest. Einen Puzzlebaustein kannst du löschen, indem du ihn wieder in die linke Spalte schiebst.

Bitte lege folgende Puzzleteile an und nehme die entsprechenden Änderungen bei den Befehlen vor:

  • Mit "when ... clicked" definierst du, dass das Programm startet, wenn du rechts oben auf das grüne Fähnchen klickst.
  • Mit "set pen color to" kannst du die Farbe ändern, mit "set pen size to" die Strichstärke. Mit "pen down" wird der Bleistift auf einen weißen Hintergrund gesetzt.
  • Mit "point in direction 90" wird der Cursor auf 90 Grad orientiert und wird auf den Mittelpunkt der Zeichenfläche bewegt. Mit "move 150 steps" bewegt sich der Cursor 150 Pixel (nach rechts) und dreht sich mit "turn 90 degrees" um 90 Grad, um dann später in diese Richtung weiter zu laufen.

Nach einem Klick auf die grüne Flagge oben rechts solltest du eine blaue Linie auf dem Zeichenblatt sehen. Nach diesem Prinzip kannst du einen Stern deiner Wahl konstruieren. Dazu musst du natürlich nicht um 90 Grad drehen, sondern kleinere Winkel nehmen. Dieser Stern würde sich dann aber noch nicht bewegen.

Tipp: Ziehe dir den „Clear“-Befehl (Puzzle-Baustein) aus der grünen Pen-Palette in die Arbeitsfläche an eine beliebige Stelle. Dieser Baustein fungiert nun wie ein Button. Beim Raufklicken auf diesen Baustein wird alles wieder gelöscht.

Programm zum Zeichnen einer blauen Linie
Programm zum Zeichnen einer blauen Linie

Dein erster Stern

Du ergänzt nun Steuerbefehle wie Schleifen oder Loops, um den Stern noch schöner zu machen.

Zunächst zeichnest du ein Zehneck. Das bedeuten die einzelnen Befehle:

  • Du fügst aus der hellbraunen Control-Palette eine for-Schleife ein, damit die unteren beiden blauen Befehle zehnmal hintereinander ausgeführt werden. Gegenüber der einfachen manuellen Programmierung sparst du so 17 Befehle ein, um diese Figur zu malen!
  • Die Variable "i" ist zum Zählen da, wie oft die Schleife bereits durchlaufen wurde. Gleichzeitig erhöht sich der Wert von „i“ bei jedem Durchlauf um 1.
  • Die Anzahl der Schritte im move-Befehl in der for-Schleife setzt du auf 50. Den Winkel änderst du auf 36 Grad.
Programm zum Zeichnen eines Zehnecks
Programm zum Zeichnen eines Zehnecks

Wenn du auf das grüne Fähnchen rechts oben klickst, wirst du ein blaues Zehneck sehen.

Zehneck

Nun fügst du aus der Variablen-Palette noch eine neue Variable "w" (wie Winkel) ein. Wenn du auf den Button "Make a Variable" tippst, erscheint eine neue Ellipse. Die Variable nennst du "w". In Variablen kann man sich jederzeit irgendwelche Daten merken, hier den aktuellen Drehwinkel. Damit die Anzeige des Wertes der Variable von der Arbeitsfläche verschwindet, nimmst du das Häkchen davor weg.

Programmierung des Drehwinkels
Programmierung des Drehwinkels

Nun nimm folgende Änderungen im Programm vor:

  • In der for-Schleife änderst du die Zahl der Durchläufe von 10 auf 180.
  • Die Schrittlänge im move-Befehl machst du dynamisch. Dazu ziehst du das orangene "i" aus der for-Schleife in den move-Befehl.
  • Auch der Drehwinkel wird dynamisch. Aus der Variablenpalette ziehst du die Variable "w" in den "turn"-Befehl.
  • Hinter die for-Schleife setzt du einen neuen Befehl aus der Variablen-Palette. Mit dem change-Befehl wird bei jeder Ausführung des Befehls der aktuelle Wert von "w" um 0.05 erhöht. Achte bitte darauf, dass du einen Punkt statt ein Komma setzt.
  • Führe eine zweite unendliche Schleife ein (forever).
  • Setze vor die innere for-Schleife noch den clear-Befehl. Damit beginnt die Dynamik und das Zeichnen in der äußeren Schleife jedes Mal von vorn.
  • Ziehe die Variable w aus der Variablenpalette herein. Achtung: Der change-Befehl ist außerhalb der inneren Schleife. Die Variable "w" kannst du über das Pfeilsymbol auswählen. Den Wert bitte auf 25 setzen.
  • Achte auf die korrekte Verschachtelung der Befehle.

Beim Klicken auf das grüne Fähnchen solltest du einen schönen Weihnachtsstern sehen.

Programm für einen Stern
Programm für einen Stern

Drehender Stern

Um den Stern zu animieren, fügst du den warp-Befehl in der hellbraunen-Steuerbefehl Palette (Control) ein.

Bitte nimm folgende Änderungen vor:

  • Der warp-Befehl umklammert die innere for-Schleife.
  • Modifiziere die Änderungsrate auf 0.05 (Punkt statt Komma).

Du kannst dir das Ergebnis dieser 13 Befehle minutenlang ansehen und immer wieder staunen. Es entstehen ständig neue interessante Figuren!

Programm für einen drehenden Stern
Programm für einen drehenden Stern

Zum Schluss noch eine vereinfachte Erklärung, wie das Programm funktioniert: Am Anfang wird versucht, einen relativ großen Kreis zu zeichnen. Weil in jeder Loop-Iteration der Winkel verändert wird, entsteht daraus eine Spirale. Wenn die Winkel einen bestimmten Wert übersteigen, entstehen größere "Ecken", was zu sogenannten Spirographen und dann zu Sternen führt. Wenn "w" den Wert 360 erreicht hat, geht alles wieder von vorn los.