{"id":977,"date":"2026-05-31T10:39:44","date_gmt":"2026-05-31T10:39:44","guid":{"rendered":"https:\/\/gigers.com\/blog\/?p=977"},"modified":"2026-05-31T10:39:44","modified_gmt":"2026-05-31T10:39:44","slug":"gestenerkennung-mit-snap","status":"publish","type":"post","link":"https:\/\/gigers.com\/blog\/gestenerkennung-mit-snap\/","title":{"rendered":"Gestenerkennung mit Snap!"},"content":{"rendered":"

Die im Folgenden beschriebene Lektionenskizze basiert auf den „Grand Gestures“ von Jens M\u00f6nig, die in dem seit einigen Wochen verf\u00fcgbaren Kurs „Get Coding with Snap! – Building Up to AI<\/a>“ dokumentiert sind. F\u00fcr die Umsetzung werden 2 – 4 Lektionen ben\u00f6tigt.<\/p>\n

Gestenerkennung<\/h2>\n

Die Idee: Figuren, die mit einem Linienzug gezeichnet werden k\u00f6nnen (ohne Absetzen) sollen automatisch erkannt werden und jeweils eine passende Animation ausl\u00f6sen.<\/p>\n

Die eigentliche Programmierung besteht aus zwei Teilen: Der technische Aspekt konzentriert sich auf den Algorithmus zur Erkennung einer gezeichneten Figur, der kreative Aspekt darauf, einzelne Figuren entsprechend zu animieren.<\/p>\n

Die Programmierung<\/h2>\n

Die Programmierung kann abgesehen von wenigen Bl\u00f6cken mit den Sch\u00fclerinnen und Sch\u00fcler schrittweise durchgef\u00fchrt werden und umfasst keine besonders komplexen Schritte.<\/p>\n

Zeichenfunktion implementieren<\/h3>\n

Als erstes sollen die Sch\u00fclerinnen und Sch\u00fcler in der Lage sein, eigene Figuren zu zeichnen. Dazu sind folgende Programmierschritte notwendig.<\/p>\n

Im Bereich „B\u00fchne“ (stage) wird aufgrund des Ereignisses Mausklick eine Nachricht an das Objekt (sprite) versendet.<\/p>\n

\"Programmierung<\/p>\n

Diese Mitteilung wird vom Objekt (sprite) aufgegriffen.<\/p>\n

\"Die<\/p>\n

Um die Zeichnung anzufertigen, wird zuerst der Bildschirm gel\u00f6scht und dann folgt der „Stift“ von Snap den Bewegungen der Maus und hinterl\u00e4sst somit eine entsprechende Spur.<\/p>\n

Speichern einer Zeichnung<\/h3>\n

Im n\u00e4chsten Schritt werden die einzelnen Positionen der Figur in der Variable „sketch“ gespeichert.<\/p>\n

\"Die<\/p>\n

Wiedergeben einer Zeichnung<\/h3>\n

Im Starterpaket zu „Grand Gestures“ gibt es einen entsprechenden Block, mit dem die gezeichnete Figur wiedergegeben werden kann.<\/p>\n

\"Mit<\/p>\n

F\u00fcr die Sch\u00fclerinnen und Sch\u00fcler ist es aber eindr\u00fccklicher, wenn man die Funktionalit\u00e4t dieses Blockes mit ihnen Schritt f\u00fcr Schritt erarbeitet.<\/p>\n

\"Schrittweise<\/p>\n

Wenn man auf den im vorgegebenen Block vorhandenen warp-Block verzichtet, erscheint die Zeichnung n\u00e4mlich nicht auf einen Schlag auf dem Bildschirm, sondern wird in der gleichen Art, wie sie die Sch\u00fclerinnen und Sch\u00fcler gezeichnet haben, schrittweise auf dem Bildschirm wiedergegeben. Das ist f\u00fcr die Sch\u00fclerinnen und Sch\u00fcler ein erster Aha-Moment.<\/p>\n

„Normalisierung“ einer Zeichnung<\/h3>\n

In einem weiteren Schritt werden die Zeichnungen nun f\u00fcr den Vergleich untereinander vorbereitet und in einer weiteren Liste gespeichert, dabei spielt der folgende Block eine zentrale Rolle:<\/p>\n

\"Block<\/p>\n

Der Block „normalisiert“ die Zeichnung, indem er die vorher in unregelm\u00e4ssigen Abst\u00e4nden gemessenen Punkte regelm\u00e4ssig entlang der Linie verteilt. Dies ist sp\u00e4ter wichtig, um verschiedene Zeichnungen vergleichen zu k\u00f6nnen.<\/p>\n

Ein Vergleich zwischen der rohen und angepassten Zeichnung illustriert die Funktion:<\/p>\n

\"Nach<\/p>\n

links: Originalzeichnung; rechts: Zeichnung nach Anwendung des resample-Blocks<\/em><\/p>\n

Die Anzahl der Punkte kann passend zur Komplexit\u00e4t der gezeichneten Figuren einstellen.<\/p>\n

F\u00fcr die Sekundarstufe I empfiehlt es sich, den resample-Block zu Verf\u00fcgung zu stellen, da dessen Programmierung einige Zeit in Anspruch nimmt und vom eigentlichen Zweck des Programmierbeispiels eher ablenkt.<\/p>\n

Speichern und Erkennen verschiedener Zeichnungen<\/h3>\n

Durch die Erweiterung des bisherigen Blockes zum Zeichnen von Linien k\u00f6nnen unterschiedliche Zeichnungen gespeichert und erkannt werden.<\/p>\n

\"Das<\/p>\n

Der if-Block wird verwendet, damit f\u00fcr den Rest des Kernprogrammes m\u00f6glichst wenig Bl\u00f6cke ben\u00f6tigt werden. Wenn „recognize“ wahr ist, werden die gezeichneten Figuren gespeichert, wenn „recognize“ falsch ist, werden diese erkannt.<\/p>\n

Mit dem ask-Block wird nach dem Namen einer Figur gefragt, anschliessend werden die Punkte einer einzelnen Zeichnung zusammen mit der Bezeichnung „drawings“ gespeichert.<\/p>\n

Im else-Teil spielt der „recognize … in …“-Block die zentrale Rolle. Auch auf dessen Programmierung sollte auf der Sekundarstufe I verzichtet werden.<\/p>\n

\"Der<\/p>\n

Der Block misst die Distanz zwischen der aktuell gezeichneten Figur und den Figuren in der Liste „drawings“, indem er jeweils den Abstand von Punktepaaren vergleicht. Der Name der Figur mit dem insgesamt kleinsten Abstand wird dann per „broadcast“ verschickt.<\/p>\n

Um die Funktionsweise sichtbar zu machen, gibt es einen Zusatzblock, mit dem die Abst\u00e4nde der einzelnen Punktepaare als Vektoren dargestellt werden k\u00f6nnen.<\/p>\n

\"Block<\/p>\n

Der Vergleich zwischen einem Rechteck und einem Dreieck sieht dann beispielsweise so aus.<\/p>\n

\"Vergleich<\/p>\n

Animation der erkannten Zeichnungen<\/h3>\n

Da der Name der erkannten Zeichnung versendet wird, kann dieser genutzt werden, um eine Animation zu starten, wobei das Ger\u00fcst immer gleich aussieht.<\/p>\n

\"Animationsblock\"<\/p>\n

Damit das funktioniert, muss die Mitteilung im „when I receive“-Block entsprechend angepasst und die Animation selbst programmiert werden.<\/p>\n

Bl\u00f6cke zur Animation der Figuren findet man unter den Looks- und Motion-Bl\u00f6cken, es k\u00f6nnen aber auch Sounds und andere Effekte eingebaut werden.<\/p>\n

Als Starthilfe sind hier einige Animationsbl\u00f6cke. Diese kann man einfach verwenden, anpassen oder als Inspiration verwenden.<\/p>\n

\"Beispiele<\/p>\n

Das Starter-Programm<\/h3>\n

Das Starter-Programm enth\u00e4lt die Definitionen der Variablen und alle Bl\u00f6cke, die f\u00fcr die Programmierung der Aktivit\u00e4t ben\u00f6tigt werden: Gestenerkennung – Startdatei<\/a>.<\/p>\n

\"Starter<\/p>\n

Wenn man m\u00f6chte, dass die eigenen Zeichnungen nicht gel\u00f6scht werden, sollte man den Block „set drawings“ vom Startblock (Block mit gr\u00fcner Fahne) l\u00f6sen.<\/p>\n

Verwendung in Moodle<\/h2>\n

Moodle hilft bei der Organisation in zweifacher Hinsicht. Einerseits kann mit dem Plugin Snap! submissions<\/a> eine Aktivit\u00e4t angelegt werden, aus der Snap! direkt mit der entsprechenden Vorlage gestartet werden kann, andererseits k\u00f6nnen Sch\u00fclerinnen und Sch\u00fcler ihre Animationsbl\u00f6cke in einer geeigneten Moodleaktivit\u00e4t wie „Forum“ oder „Database“ miteinander austauschen.<\/p>\n

Erfahrungen aus dem Unterricht<\/h2>\n

F\u00fcr die Umsetzung werden auf der Sekundarstufe I mindestens zwei Lektionen ben\u00f6tigt. Legt man viel Wert auf den kreativen Teil, bei dem die Sch\u00fclerinnen und Sch\u00fcler die gezeichneten Figuren aufw\u00e4ndig animieren oder gar zu einer Geschichte verkn\u00fcpfen, sind 3 bis 4 Lektionen auf jeden Fall angemessen.<\/p>\n

Ausserdem empfiehlt es sich, den Sch\u00fclerinnen und Sch\u00fclern sp\u00e4testens am Ende der Lektion einen funktionierenden Zwischenstand der Programmierung zu Verf\u00fcgung zu stellen. In Moodle sollte man dabei beachten, dass die xml-Dateien mit der Option „download“ zu Verf\u00fcgung gestellt werden.<\/p>\n

Insgesamt vermittelt „Grand Gestures“ wichtige technische Grundlagen, bietet die Basis f\u00fcr eine kreative Nutzung des verwendeten Algorithmus und leistet eine gute \u00dcberleitung zu weitergehenden Verfahren aus dem Bereich der k\u00fcnstlichen Intelligenz.<\/p>\n","protected":false},"excerpt":{"rendered":"

Die im Folgenden beschriebene Lektionenskizze basiert auf den „Grand Gestures“ von Jens M\u00f6nig, die in dem seit einigen Wochen verf\u00fcgbaren Kurs „Get Coding with Snap! – Building Up to AI“ dokumentiert sind. F\u00fcr die Umsetzung werden 2 – 4 Lektionen ben\u00f6tigt. Gestenerkennung Die Idee: Figuren, die mit einem Linienzug gezeichnet werden k\u00f6nnen (ohne Absetzen) sollen … <\/p>\n

\u201eGestenerkennung mit Snap!\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-977","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/comments?post=977"}],"version-history":[{"count":9,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/977\/revisions"}],"predecessor-version":[{"id":1036,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/977\/revisions\/1036"}],"wp:attachment":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/media?parent=977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/categories?post=977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/tags?post=977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}