Warning: Constant FORCE_SSL_ADMIN already defined in /home/httpd/vhosts/gigers.com/httpsdocs/blog/wp-config.php on line 96 Mai 2021 – Lernen und Lehren

Snap! dokumentiert sich selbst

Wenn man Snap! verwenden möchte, um wie bei Logo eine Figur auf den Bildschirm zu zeichnen, brauchen Anfänger eine Weile, um den Zusammenhang zwischen den einzelnen Befehlen und der Auswirkung auf die Bewegungen zu verstehen. In der Regel erarbeiten sie sich dieses Verständnis dann im „Versuch und Irrtum“-Verfahren, was nicht nur viel Zeit in Anspruch nimmt, sondern je nach Komplexität der Aufgabe auch das Lernen verhindert.

Eine Möglichkeit hier die Einstiegshürden zu senken, sind sogenannte Cheatsheets, also Zusammenfassungen der wichtigsten Blöcke, oder Programme Cards, kurze Programmbeispiele. Beide eignen sich hervorragend für den Unterricht. Leider ist aber das Dokumentieren von Befehlsblöcken und das Zusammenstellen solcher Programmieranleitungen aufwändig.

Animation als Dokumentation

Für Snap! gibt es nun dank des Snap!-Nutzers pumpkinhead einige interessante neue Blöcke, die man zumindest für die Dokumentation einfacherer Programmieraufgaben verwenden kann. Dabei kann ein in Snap! geschriebenes Programm so ausgeführt werden, dass es gleichzeitig erklärt, welche Befehle es abarbeitet. Das Beispiel der Konstruktion eines Quadrats soll zeigen, wie dies aussieht.

Während Snap! ein Quadrat zeichnet, zeigt es, welche Befehle für jeden einzelnen Schritt benötigt werden.

In Snap! selbst setzt man folgende Blöcke dafür ein, um das Programm auszuführen.

Mit wenigen Blöcken kann eine Selbstdokumentation für Snap! erzeugt werden.

Die auszuführenden Blöcke werden zuerst als Liste abgespeichert und dann mit einem „for each“-Block schrittweise abgearbeitet. Ein Arbeitsschritt besteht darin, einen Befehl ausführen und ihn im Anschluss anzeigen zu lassen. Der „wait“-Block sorgt dafür, dass genügend Zeit für das Lesen der angezeigten Blöcke bleibt.

Wenn ein Programm (wie oben) Variablen enthält, muss man diese im Block „.. put after …“ noch einmal deklarieren, da die so ausgeführten Blöcke keinen direkten Zugriff auf die normalen Variablen haben. Damit geht auch die Einschränkung einher, dass die Werte von Variablen während der Ausführung des Scripts nicht geändert werden können, die Variablen werden also als Konstanten behandelt.

Snap! zeigt, wie man eine Figur zum Satz des Pythagoras zeichnen kann.

Die gezeigten Befehle dienen als Grundlage für einen rekursiven Block, mit dem ein sogenannten Pythagorasbaum gezeichnet werden kann.

Möchte man ein solches Beispiel nicht in Snap! direkt laufen lassen, kann man den Bildschirm mit einem geeigneten Programm aufzeichnen lassen und eine Videodatei zu Verfügung stellen oder aber die so erstellte Videodatei mit einem entsprechenden Webdienst in ein animiertes GIF umwandeln.

Ein einfaches Beispiel kann über den folgenden Link direkt in Snap! aufgerufen werden: Selbstdokumentation.

Anwendung im Unterricht

Im Unterricht kann das vorgestellte Verfahren auf zwei Arten verwendet werden. Einerseits wie beschrieben zur Dokumentation insbesondere von Bewegungsabläufen, andererseits kann die Lösung auch zum Finden von Fehlern in etwas längeren Programmen benutzt werden. Denn die Verknüpfung von schrittweiser Abarbeitung mit dem direkten Anzeigen des verantwortlichen Befehls nach der Ausführung, erlaubt eine Unmittelbarkeit, die sonst beim Programmieren kaum zu erleben ist. Falls Lernende diesen zweiten Weg beschreiten sollen, ist es von Vorteil, die entsprechende Umgebung vorzubereiten. Dazu gehört auch die Deklarierung allfälliger Variablen.

Computerkunst mit Snap! – Wiederholung und Zufall

Mit dem Computer erzeugte Kunst auf der Basis von sich wiederholenden Elementen, eignet sich für den Einstieg in die Programmierung, weil diese vergleichsweise einfach programmiert werden können. Sobald aber etwas höhere Anforderungen an die Ästhetik dieser Werke gestellt werden, scheitern Schülerinnen und Schüler der Sekundarstufe I schnell an Details. Aus diesem Grund werden hier in Snap! geschriebene Blöcke vorgestellt, welche als Starthilfe gedacht sind und hoffentlich zu visuell ansprechenden Ergebnissen führen.

Die Grundidee

Die Grundidee solcher Kunstwerke lässt sich am besten anhand von Diagonalen innerhalb eines Quadrates veranschaulichen, wobei die Ausrichtung solcher Diagonalen zufällig ausgewählt werden soll. Obwohl das Beispiel sehr einfach ist, es gibt nur die beiden Elemente / und \ entstehen bei genügend Wiederholungen interessante Muster. Schon bei vier Feldern entstehen 16 = 2 x 2 x 2 x 2 Muster.

Alle Möglichkeiten bei einem 4×4-Feld wenn Diagonalen als Elemente eingesetzt werden.

Viele Grundelemente können sogar in vier Richtungen gedreht werden, wodurch die Anzahl der Möglichkeiten bei vier Feldern auf 4 x 4 x 4 x 4 = 256 ansteigt.

Einzelne Elemente

Beim Entwerfen einzelner Elemente, aus denen später das Raster aufgebaut wird, lohnt es sich, zuerst von Hand auf Papier zu arbeiten. So kann schnell ausprobiert werden, ob eine Wiederholung solcher Elemente zu einem interessanten Muster führt.

Hat man ein interessantes Muster gefunden, kann man dies in Snap! dank der Turtlegrafik mit wenigen Befehlen programmieren.

Mit wenigen Befehlen können alle Figuren, deren Teilelemente Geraden sind, programmiert werden.

Schwierig ist allenfalls die Berechnung der Winkel und Streckenlängen für die einzelnen Teilelemente. Falls die Schülerinnen und Schüler beispielsweise den Satz des Pythagoras noch nicht kennen, kann man ihnen eine entsprechende Hilfe zu Verfügung stellen.

Diese Grafik erleichtert die korrekte Programmierung von Schrägen im Grundraster.

Ob die Besprechung von trigonometrischen Funktionen auf der Sekundarstufe I sinnvoll ist, hängt auch davon ab, wie viel Zeit zu Verfügung stehen. Zumindest die Berechnungen können die Lernenden aber durchführen, da die entsprechenden Funktionen auf den handelsüblichen Schultaschenrechnern zu Verfügung stehen.

Einpassen in ein Raster

Damit es später nicht zu Schwierigkeiten beim Einpassen der Elemente in ein Raster kommt, sollten von Anfang an Variablen für die entsprechenden Strecken in den Figuren verwendet werden. Ausserdem lohnt es sich, die einzelnen Befehlsschritte in einen eigenen Block zu verpacken. Am Beispiel der Diagonalen soll dies aufgezeigt werden:

Die Diagonale selbst, kann mit zwei Blöcken programmiert werden.

Für das Testen bereits vorhandener oder selbst geschriebener Figuren steht ein Block zu Verfügung mit dem man diese testen kann.

Die for-Schleife am Anfang des eigenen Blocks dreht die Figur in die zwei möglichen Positionen. Wenn es vier Positionen gibt, muss der Zufallszahlenblock entsprechend angepasst werden.

Damit der Block vor dem Einsatz in einem grösseren Raster überprüft werden kann, steht eine entsprechende Testumgebung zu Verfügung. Diese wird mit folgendem Block aufgerufen:

Dieser Block erlaubt es, einzelne Figuren bequem zu testen.

Beim Testen ist darauf zu achten, dass die Grösse der Quadratseite mit dem Parameter #1 übergeben wird. Die Grösse der Bildschirmausgabe kann mit size (verändert die Bühnengrösse) und border (verändert die Breite des Rahmens) entsprechend angepasst werden.

Funktioniert alles wie gewünscht, kann der getestete Block im Raster verwendet werden. Hierzu steht ebenfalls ein Block zu Verfügung, weil das richtige Setzen der Werte den Lernenden aufgrund des Koordinatensystems von Snap! oft Schwierigkeiten bereitet. Bei Snap! liegt der Nullpunkt nämlich in der Mitte des Bildschirms, was ein bequemes Arbeiten mit negativen Zahlen zulässt, im Falle eines Rasters für generative Kunst aber eher hinderlich ist.

Dieser Block übernimmt die Berechnung der Koordinaten für die einzelnen Teilflächen.

Dem Block muss die Anzahl der Quadrate in x- und y-Richtung und die Länge einer Quadratseite übergeben werden. Speichert man vorher die Dimensionen des Bildschirms und gibt an, wie viele Teilfelder man in die entsprechende Richtung haben möchte, werden die entsprechenden Werte (size and step) automatisch berechnet. Wie aus den gleichen Angaben für die x- und y-Dimension zu sehen ist, berechnet der Block im vorgestellten Programm jeweils ein quadratisches Kunstwerk.

Bei diesem Beispiel wurden 100 Diagonalen in jeweils einer der beiden möglichen Ausrichtungen gezeichnet.

Einfärben der Kunstwerke

Da nur aus Linien bestehende Beispiele manchmal etwas schlicht wirken, können die erzeugten Bilder mit einem entsprechenden Befehl eingefärbt werden. Dazu springt der Block an eine beliebige Stelle im Bild und wenn der dortige Pixel weiss ist, wird mit dem fill-Block die Umgebung bis zur Begrenzung (schwarze Linien) ausgemalt.

Der Block färbt eine Teilelemente einer Zeichnung mit einer beliebigen Farbe aus einer gegebenen Farbpalette ein.

Beim Einfärben ist unbedingt darauf zu achten, dass das entsprechende Objekt (Sprite) vorher versteckt wird, sonst werden womöglich einzelne Bildteile falsch eingefärbt.

Das bereits vorgestellte Beispiel wurde mit den Farben aus einer entsprechenden Palette eingefärbt.

Der Baukasten

Aktuell können in Programm bereits 15 Grundelemente (mit den entsprechenden Drehungen) eingesetzt werden. Eine Übersicht der verschiedenen Elemente kann hier als PDF heruntergeladen werden:

Vorgefertigte Elemente (PDF)

Zwei weitere Beispiele sollen zeigen, was mit den vorgefertigten Elementen möglich ist.

Farbige Quadrate unterschiedlicher Grösse fügen sich zu einem Gesamtbild zusammen.

Bei diesem Beispiel wurde darauf verzichtet, das Bild nachträglich einzufärben, da der Befehl Nr. 4 bereits farbige Quadrate produziert.

Dieses Bild entstand durch das Weglassen von Teilstrecken in einem regelmässigen Muster.

Der Block Nr. 6 zeichnet Rhomben, deren Seiten zufallsgesteuert erzeugt werden. Je kleiner der Wert (hier: 0.7), desto mehr Lücken entstehen im Bild, wodurch grössere zusammenhängende Flächen erzeugt werden.

Kombination von Blöcken

Der „draw grid“-Block ist so programmiert, dass ihm auch mehrere Blöcke in einer Liste übergeben werden können. Pro Teilquadrat wird dann wieder jeweils einer dieser Blöcke zufällig ausgewählt. Damit erhöht sich die Vielfalt der mit dem Programm generierbaren Kunstwerke weit über die blosse Einzelverwendung der 15 vorgegebenen Blöcke. Während einige Kombinationen durch grosse zusammenhängende Flächen eher langweilig wirken, führen andere Kombinationen zu äusserst interessanten unregelmässigen Mustern.

Kombination der Blöcke 6 (mit einer zufälligen Wahrscheinlichkeit zwischen 0.7 und 1.0) und 15.

Während der Block 6 die schon erwähnten Rhomben mit fehlenden Seiten generiert, erzeugt der Block 15 eine Pfeilfigur.

Für dieses Bild wurden die Blöcke 5 (mit einer zufälligen Wahrscheinlichkeit zwischen 0.7 und 1.0) und 10 kombiniert.

Das Programm

Das Programm kann unter folgendem Link aufgerufen werden: Repeating Elements. Wird es über die grüne Flagge gestartet, generiert es automatisch ein Diagonalenbild. Möchte man weitere Beispiele erzeugen, muss man in den Editiermodus wechseln. Dort präsentiert das Programm 6 verschiedene Objekte:

  • Demonstration erzeugt ein Diagonalenbild, wobei die Anzahl der Felder über „set step“ und die Auflösung der Grafik über „set  value: Stage size“ gesteuert werden kann.
  • Experiments erlaubt die Durchführung eigener Experimente, wobei einer der 15 vorgefertigten Blöcke aus dem „Motion“-Bereich verwendet werden kann.
  • Testing ermöglicht wie schon beschrieben das Ausprobieren neuer Blöcke, um sicherzustellen, dass diese wunschgemäss funktionieren.
  • Blocks erklärt die Verwendung einiger der im Programm verwendeten Blöcke.
  • Tricks gibt einige Tipps zur Verwendung des Programms.
  • Examples erzeugt zufallsgesteuert ein Kunstwerk, indem es bis zu vier verschiedene Elemente kombiniert. Welche Elemente jeweils verwendet wurden, kann man über die Variable „elements in use“ abfragen.
Per Zufall wurden die Blöcke 6, 9 und 13 ausgewählt, um dieses Bild zu erzeugen.