Dieser Beitrag ist ein Entwurf zum Workshop „Zahlen, Daten und Medien“ am Open Education Day vom 24. April 2021. Er dient als Arbeitsgrundlage und Dokumentation und wird nach der Durchführung noch einmal überarbeitet.
Ausschreibung des Workshops
Mit Hilfe der blockbasierten Programmierumgebung Snap! (https://snap.berkeley.edu) lernen die Teilnehmenden Möglichkeiten kennen, wie informatische Kenntnisse in den Bereichen Zahlen, Daten (Visualisierungen) und Medien (Musik, Grafik und Video) mit Lernenden der Sekundarstufe I auf eine motivierende Weise umgesetzt werden können (siehe auch https://gigers.com/blog/?s=snap). Die vorgestellten Beispiele können von den Teilnehmenden ausprobiert und erweitert werden, dabei sollen theoretische Kenntnisse, praktische Anwendung und kreative Umsetzung verknüpft werden.
Snap! ist eine Programmiersprache, welche nach dem Prinzip „low floor – high ceiling“ entwickelt wurde, damit ermöglicht sie einerseits einen leichten Einstieg, erlaubt aber auch die Umsetzung fortgeschrittener Programmiertechniken. In den USA wird Snap! u.a. im Leistungskurs „The Beauty and Joy of Computing“ (https://bjc.edc.org) eingesetzt und mit „Informatik mit Snap!“ (http://ddi-mod.uni-goettingen.de/InformatikMitSnap.pdf) existiert auch ein deutsches Lehrmittel für die Hochschulstufe.
Planung für den Workshop
Geplant ist eine Aufteilung des Workshops in drei Abschnitte:
- Zahlen und Daten
Am Beispiel eines Datensatzes wird gezeigt, wie Informationen in Snap! visualisiert werden können. Wenn möglich werden noch weitere Beispiele gezeigt. - Töne erzeugen und Geräusche visualisieren
Aus ein paar Zahlen entstehen Töne und über das Mikrofon werden Geräusche visualisiert. - Grundlagen der Bildbearbeitung
Bilder sagen mehr als tausend Worte und bestehen meist aus noch mehr Zahlen. Diese werden mit den in den ersten beiden Teilen erarbeiteten Techniken bearbeitet.
Wie viel davon in den 90 Minuten Workshop umgesetzt werden kann, wird sich zeigen. Alle Beispiele werden aber in den folgenden Abschnitten detailliert dokumentiert.
Teil 1: Zahlen und Daten
Am Beispiel eines Datensatzes zu Wolkenkratzern (via Corgis-Edu) wird gezeigt, wie man mit vorhandenen und selbstgeschriebenen Blöcken (stehen zu Verfügung) einen Blick in grössere Datensätze werfen kann.
Link: Vorlage Wolkenkratzer
Mit einigen Blöcken wird der Datensatz darauf untersucht, aus welchen Materialien die Wolkenkratzer gebaut wurden und wie häufig die entsprechenden Materialien zum Einsatz kamen. Dazu werden folgende Blöcke verwendet:
Bei den grauen Blöcken handelt es sich um zusätzliche Blöcke, die orangen Blöcke stehen nach dem Import der Bibliotheken „Frequency Distribution Analysis“ und „List utilities“ zu Verfügung.
Im Workshop dient diese erste Übung auch dazu, mit ersten Merkmalen der Snap!-Entwicklungsumgebung vertraut zu werden. Mehr dazu ist im Beitrag „Interaktive Erklärungen mit H5P Image Hotspots“ zu erfahren.
Im nächsten Schritt geht es darum, die Wolkenkratzer auf einer Weltkarte zu visualisieren. Die Programmierung dieses Beispiels erfolgt in den folgenden Schritten:
- Weltkarte als Hintergrund festlegen;
- Den eigenen Standort anzeigen;
- Wolkenkratzer auf der Weltkarte eintragen;
- Einzelne Wolkenkratzer gestalten.
Im Gegensatz zu den im Workshop durchgeführten „Live Coding“ werden hier bei der schriftlichen Dokumentation schon die fertigen Blöcke dargestellt. Auf einen schrittweisen Aufbau der einzelnen Befehlsblöcke wird hier also verzichtet.
Weltkarte als Hintergrund festlegen
Die Befehle zur Darstellung der Weltkarte werden aus der Bibliothek „World Map“ importiert. Anschliessend kann die Weltkarte auf der Bühne dargestellt werden.
Folgende Parameter können für die Karte gesetzt werden:
- style: bestimmt das Aussehen der Karte;
- zoom: bestimmt, wie gross der Ausschnitt der gezeigten Karte ist, wobei bei 0 die ganze Welt und bei 15 die Nachbarschaft gezeigt werden;
- set to: bestimmt das Zentrum der Karte (die Voreinstellung 0, 0 ist meistens nicht optimal)
Anschliessend muss sich die Bühne mit „switch to costume“ die entsprechende Karte noch überwerfen.
Das Setzen dieser Blöcke belohnt einem mit einem Hintergrund, der etwa so aussieht:
Mehr zu den Möglichkeiten der Bibliothek „World Map“ ist im Beitrag „Landkarten mit Snap!“ beschrieben.
Damit das Programm letztlich funktioniert, muss später noch folgender Block hinzugefügt werden:
Damit kann die Karte auf den Befehl von anderen Objekten hin angepasst werden, wobei hier das Werkzeug der Mitteilungen verwendet wird. Bei komplexeren Programmen können damit Abläufe einfach gesteuert werden.
Das ist aber erst möglich, nachdem der nächste Teil des Programms geschrieben wurde.
Den eigenen Standort anzeigen
Damit der eigene Standort auf der Karte angezeigt werden müssen erst einmal die entsprechenden Koordinaten (Länge und Breite) bekannt sein. Am schnellsten findet man diese mit Google Maps, indem man auf der Karte am gewünschten Ort einen Rechtsklick mit der Maus ausführt. Dabei muss man allerdings beachten, dass die Reihenfolge bei Google Maps und Snap! nicht gleich ist.
Die oben abgebildeten Blöcke werden nicht mehr im Bühnenbereich ausgeführt, sondern in einem eigenen Objekt.
Dabei werden folgende Befehle abgearbeitet:
- den Bildschirm löschen;
- die Stiftdicke auf 30 setzen;
- zur gewünschten Koordinate gehen;
- den Stift auf das Papier setzen;
- einen Kreis zeichnen;
- den Stift von Papier abheben.
Die unteren vier Blöcke dienen dazu den Ausschnitt der Karte anzupassen, denn wenn man in der Schweiz lebt, ist der Standort auf einer Weltkarte nicht besonders aussagekräftig. Je nach Genauigkeit der eingegebenen Koordinaten kann man den eigenen Standort so auch metergenau auf der Karte eintragen lassen und die nähere Nachbarschaft virtuell bewundern.
Wolkenkratzer auf der Karte eintragen
Während bei Menschen bei mehrfacher Ausführung der gleichen Tätigkeit schnell einmal Langeweile auftauchen kann, sind solche repetitive Aufgaben das Spezialgebiet von Computern. Und deshalb gilt hier: Was einmal gelungen ist, kann nun viele Male ausgeführt werden.
Im Wesentlichen werden hier die gleichen Befehle wie bei der Eintragung des Einzelstandorts verwendet, nur wird jetzt mit einer „forEach“-Schleife durch eine Liste iteriert. Die etwas komplexeren Befehle ergeben sich aus der von den Eigenschaften der einzelnen Objekte abhängigen unterschiedlichen Darstellung der Wolkenkratzer auf der Karte.
Einzelne Wolkenkratzer gestalten
Um insbesondere die Farbgebung noch etwas besser zu verstehen, lohnt es sich auch hier, zuerst wieder einige Experimente durchzuführen. Die folgenden Blöcke leisten genau dies:
Um die Farbe anzupassen, kommt eine Variante des HSV-Farbmodels zum Einsatz, wobei mit dem H-Wert (hue) der Farbwert selbst beeinflusst wird. In Snap! wird dafür ein Bereich von 0 bis 100 verwendet.
Hat man die Koordinaten für die Karten entsprechend eingestellt, kann man sich nur beispielsweise die Wolkenkratzer in New York anzeigen lassen.
Weitere Beispiele für Visualisierungen
Ohne weiter auf die Programmierung einzugehen, sollen hier noch die Resultate weiterer Visualisierungen gezeigt werden, die mit Snap? erzeugt wurden. Siehe dazu auch „Höhenmodell mit Snap„.
Link: Births and Deaths in Switzerland
Link: CO2-Konzentrationen
Weitere Datensätze
Wenn man selbst mit weiteren Datensätzen experimentieren möchte, sind folgende Webseiten empfehlenswert:
- https://corgis-edu.github.io/corgis/csv/ (gut für den Unterricht geeignet)
- https://opendata.swiss/de/ (Daten aus der Schweiz)
- https://github.com/awesomedata/awesome-public-datasets (grosse Sammlung von Datensätzen)
Es kann sich aber auch lohnen, zusammen mit den Lernenden selbst Daten zu erheben, z.B. zum Schulweg, Medienkonsum etc.
Musikalische Experimente mit Snap!
In diesem Teil des Workshops wird zuerst gezeigt, wie aus Zahlen Töne entstehen können und dann soll das Mikrofon zum Einsatz kommen, um Geräusche zu visualisieren.
Von der Zahl zum Ton
In Snap! werden Musikdateien als Listen mit Zahlen zwischen -1 und 1 repräsentiert, wobei pro Sekunde in der Regel mehr als 40’000 Zahlen benötigt werden. Im Gegensatz zu den im Teil „Zahlen und Daten“ verwendeten Daten des Workshops, sind die Datensätze nun zwar einfacher strukturiert, dafür aber wesentlich grösser.
In einem ersten Schritt soll untersucht werden, was passiert, wenn einfach genügend viele Zufallszahlen erzeugt und diese dann abgespielt werden.
Das entstehende Weisse Rauschen unterscheidet sich von einem Ton dadurch, dass keinerlei Ordnung zu erkennen ist. Visualisieren lässt sich dies mit einem Block aus der Bibliothek „Audio Comp“.
Ordnung kann man auch als Wiederholung von bestimmten Mustern verstehen. Aus der Unordnung entsteht also Ordnung, indem wir einen kleinen Teil der Unordnung mehrfach wiederholen.
Die folgenden Befehle zeigen die Schritte auf, die zum Ziel führen.
Der Ablauf wird in den oben gezeigten Blöcken wieder verdichtet dargestellt. Im Wesentlichen wird aber einfach ein Zahlenblock von 441 Zahlen 100-mal wiederholt. Die Blöcke „columns of“ und „flatten of“ werden nur benötigt, damit Snap! jeweils eine Liste im erwarteten Format vorfindet.
Nachdem es gelungen ist, einen äusserst reichen Ton zu generieren, kann man sich noch Gedanken darüber machen, wie die Tonhöhe und Tondauer angepasst werden können. Die Tondauer wird einfach durch die Anzahl aller Zahlen bestimmt und diese wiederum ist abhängig von der Länge des „Chaos“ und der Anzahl der Repetitionen. Wenn also die Zahl der Repetitionen vergrössert oder verkürzt wird, verändert sich auch die Tondauer.
Für die Tonhöhe ist die Zahl der Repetitionen innerhalb eines Zeitintervals (beispielsweise in Hertz gemessen) ausschlaggebend und diese wird durch die Länge des „Chaos“ bestimmt.
Wenn also in der „sound“-Variable nur wenige Zahlen gespeichert werden, dann führt dies innerhalb einer Sekunde zu vielen Wiederholungen und damit zu einer grossen Frequenz und einem hohen Ton.
Damit ist es nun möglich, Töne beliebiger Länge und Frequenz zu erzeugen. Allerdings ist die Nutzung noch nicht besonders komfortabel. In einem nächsten Schritt müsste die Schnittstelle für die Benutzer durch Abstraktion vereinfacht werden. Aus Zeitgründen wird darauf im Workshop aber verzichtet, denn nun sollen mit dem Mikrofon gemessene Geräusche visualisiert werden.
Geräusche Visualisieren
Damit die Aufnahme mit einem Mikrofon in Snap! gelingt, muss die Aufnahme über die Webseite im Browser erlaubt werden. Da die entsprechenden Schritte sich von Browser zu Browser unterscheiden, sucht man bei Problemen am besten mit einer Suchmaschine nach einer entsprechenden Anleitung. Dabei helfen die Begriffe „Mikrofon“, „Browser“ und „erlauben“, „zulassen“ oder „freigeben“.
Ob das Mikrofon in Snap! wie gewünscht funktioniert, kann man mit folgendem kleinen Programm überprüfen:
Der „microphone“-Block kann ganz unterschiedliche Informationen zurückliefern. Damit ist es beispielweise möglich, mit wenigen Befehlen ein Spektrum zu erzeugen, wobei hier wieder das fertige Programm abgebildet wird.
Dieses so programmierte Spektrum kann nun benutzt werden, um herauszufinden, wie der Klang verschiedener Instrumente oder aber die Vokalfärbung bei der menschlichen Stimme zustande kommt. Bei den sichtbar werdenden Spitzen im rechten Bereich des Spektrums handelt es sich um Obertöne, die verantwortlich für die Klangfarbe sind.
Das gleiche Phänomen konnte man schon aus den mithilfe von Zufallszahlen generierten Tönen erleben, auch diese verdanken ihre Klangfarbe dem Obertonreichtum.
Sonagramm
Das Spektrum zeigt immer nur eine Momentaufnahme. Wenn man die Daten auch über einen längeren Zeitraum aufzeichnen möchte, eignet sich dafür das Sonagramm. Dort werden die Lautstärken der einzelnen Frequenzen nicht mehr als Balken dargestellt, sondern in Farbwerte umgesetzt.
Solche Farbstreifen kann man nun um 90° drehen, schmaler gestalten und nacheinander aufzeichnen. Dazu muss das bisher bestehende Programm umgeschrieben werden.
Da der „microphone“-Block jeweils 512 Werte liefert, lohnt es sich, die Ausgabegrösse der Bühne noch anzupassen. Dies funktioniert über die die Einstellungen der Snap!-Umgebung.
Grundlagen der Bildbearbeitung
Im dritten Teil des Workshops geht es um die Grundlagen der Bildbearbeitung. Bei hilft der Umstand, dass auch Grafiken in Snap! nur aus Zahlen bestehen. Für die folgenden Schritte kann entweder ein eigenes Bild verwendet werden, welches man einfach auf die Oberfläche zieht oder man steigt über die zu Verfügung gestellte Datei ein.
Link: Bildbearbeitung (enthält nur ein Bild)
Fotofilter programmieren
Snap! verfügt mit den Hyperblocks über ein sehr mächtiges Werkzeug, um grosse Datenmengen effizient zu bearbeiten. Hyperblocks erlauben es nämlich, eine arithmetische Funktion über alle Elemente einer Liste auszuführen, ohne dass dafür erste eine Schleife programmiert werden muss.
Mit den Hyperblocks und dem schon von den Audiodateien bekannten map-Block können bereits verschiedene Grafikfilter programmiert werden.
Den Zufall einbeziehen
Im letzten Teil zur Grafikbearbeitung wird ein Wechsel von Berechnungen hin zur Arbeit mit dem Zufall vollzogen. Gleichzeitig erfolgt ein Wechsel von der Zahlen- auf die Bildebene. Damit wird gezeigt, dass bei Snap! unterschiedliche Zugänge zu einem Thema möglich sind.
Als Grundlage dient wieder das Katzenbild. Dieses soll in ein impressionistisches Gemälde umgestaltet werden, indem an zufälligen Orten im Bild der Farbwert ausgelesen und dann an der gleichen Stelle ein Farbklecks gemalt wird.
Auch hier wird wieder die Endfassung gezeigt, welche im Workshop schrittweise mit verschiedenen Varianten aufgebaut wird.
Für weitere Beispiele und Details der Programmierung siehe auch „Künstlerische Bildeffekte mit Snap!“
Rückblick auf den Workshop
Ursprünglich hatten sich etwa 25 Personen zum Workshop angemeldet. Die meisten äussersten sich während des Workshops weder schriftlich noch mündlich. Wer sich meldete, gab an, noch über wenig bis keine Erfahrung mit Snap! zu verfügen. Am Schluss des Workshops gaben vier Teilnehmende schriftlich an, sie könnten sich vorstellen, Snap! im Unterricht zu verwenden.
Die Befürchtung, zu wenig Material dokumentiert zu haben, erfüllte sich nicht. Im Gegenteil: Insgesamt konnte aus Zeitgründen nur etwa die Hälfte der geplanten Beispiele demonstriert werden.
Nachtrag vom 11. Mai 2021: Die Organisatoren des Open Education Days haben die Videoaufzeichnung online gestellt.
Weitere Ressourcen rund um Snap!
Erste Anlaufstelle zu allen Fragen rund um Snap! ist die offizielle Webseite.
Es lohnt sich, auf der Seite ganz nach unten zu gehen, denn dort finden sich die Links zu ausgewählten Beispielen und einer hervorragenden und regelmässig aktualisierten Dokumentation zur Programmiersprache Snap!.
Online-Kurse
Zu Snap! gibt es unterdessen eine Reihe von hervorragenden Onlinekursen über die MOOC-Plattform openSAP:
- Build your own Snap! Workshop (Jadga Huegle und Jens Mönig) zeigt auf, wie Snap! in der Arbeit mit Kindern und Jugendlichen verwendet werden kann.
- Programmieren mit Snap! (Jadga Huegle und Jens Mönig) bietet eine gute Einführung in Snap! und Grundlagen der Informatik für Kinder und Jugendliche.
- Informatik für Einsteiger (Eckart Modrow, Verfasser des gleichnamigen Buches) führt mit Snap! in die Informatik ein und richtet sich an ältere Jugendliche oder Erwachsene.
- From Media Computation to Data Science (Jadga Huegle und Jens Mönig) erklärt die Verarbeitung und Repräsentation von Daten mithilfe von Snap! Dieser Kurs hat den Workshop „Zahlen, Daten und Medien“ wesentlich angeregt.
- Die Welt der KI entdecken (Stefan Seegerer und Tilman Michaeli) führt in die Thematik der künstlichen Intelligenz ein und nutzt Snap! für praktische Beispiele.
Snap!Con
Seit dem Ausbruch der COVID-19 Pandemie findet die Snap!Con und daran angebundene Veranstaltungen (auch) online statt. Die nächste Snap!Con dauert fünf Tage und wird vom 29. Juli bis 1. August 2021 durchgeführt. Meist bietet die Snap!Con eine Mischung von Beiträgen, die von Anfängerveranstaltungen bis zum Austausch von Experten reichen. Allen ist gemeinsam, dass die Teilnehmenden sich darüber austauschen, wie die Programmierung (und der Unterricht) mit Snap! verbessert werden kann.
YouTube-Videos
Auf YouTube finden sich hervorragende Videos zu Snap! Diese sind teilweise im Rahmen von Snap!Con-Beiträgen entstanden. Da der Begriff „Snap“ auch im anderen Zusammenhang häufig verwendet wird, lohnt es sich, nach „Snap!Con“ oder „Jens Mönig“ zu suchen.
Wer kein Problem mit Englisch hat, dem seien die folgenden zwei längeren Vorträge von Jens Mönig empfohlen:
- In The music comes out of the piano räumt Jens Mönig mit der Vorstellung auf, Informatik könne nur durch maximale Abstraktion und möglichst weit weg von Computern unterrichtet werden.
- In No code, no limit zeigt Jens Mönig, wie mit Snap! Algorithmen einfach umgesetzt werden können.
Eine ganze Reihe von Personen, die sich stark für und rund um Snap! organisieren, berichten regelmässig über ihre Arbeit auf Twitter. Folgende Twitteraccounts sollte man bei Interesse deshalb regelmässig konsultieren:
Jens Mönig: https://twitter.com/moenig ist hauptverantwortlich für die Programmierung von Snap! und freut sich über alle Beiträge zum Thema.
Jagda Hüegle: https://twitter.com/jadga_h überlegt sich unermüdlich, wie Snap! in und ausserhalb des Unterrichts eingesetzt werden kann.
Bernat Romagosa: https://twitter.com/bromagosa engagiert sich allgemein für blockbasierte Sprachen und findet immer wieder verblüffende Anwendungen dafür.
Joachim Wedekind: https://twitter.com/jowede beschäftigt sich vor allem mit Computerkunst und optischen Illusionen.
Moodle und Snap!
Dank der Arbeit von Joan Guillén kann Snap! nahtlos in Moodle integriert werden. Das entsprechende Plugin findet sich unter https://moodle.org/plugins/assignsubmission_snap .