{"id":375,"date":"2020-07-30T21:17:09","date_gmt":"2020-07-30T21:17:09","guid":{"rendered":"http:\/\/gigers.com\/blog\/?p=375"},"modified":"2024-06-24T17:33:19","modified_gmt":"2024-06-24T17:33:19","slug":"einfacher-programmieren-mit-snap-6-1","status":"publish","type":"post","link":"https:\/\/gigers.com\/blog\/einfacher-programmieren-mit-snap-6-1\/","title":{"rendered":"Einfacher Programmieren mit Snap 6.1"},"content":{"rendered":"<p>Anl\u00e4sslich der SnapCon 2020 ver\u00f6ffentliche Jens M\u00f6nig die Version 6.1.0 von Snap!, welche nun eine Darstellung erlaubt, die sich eng an das textbasierte Programmieren anlehnt. In den Systemeinstellungen kann \u00fcber den Men\u00fcpunkt &#8222;Fade blocks&#8220;, die farbenfrohe Umrandung einzelner Befehlsbausteine reduziert werden.<\/p>\n<figure id=\"attachment_376\" aria-describedby=\"caption-attachment-376\" style=\"width: 580px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-376\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/quadrat1.png\" alt=\"\u00dcbliche Darstellung von Snap!\" width=\"580\" height=\"348\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/quadrat1.png 580w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/quadrat1-300x180.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption id=\"caption-attachment-376\" class=\"wp-caption-text\">Die \u00fcbliche Darstellung von Snap! ist bewusst farbenfroh, damit die verschiedenen Bl\u00f6cke gut voneinander unterschieden werden k\u00f6nnen.<\/figcaption><\/figure>\n<figure id=\"attachment_377\" aria-describedby=\"caption-attachment-377\" style=\"width: 580px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-377\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/quadrat2.png\" alt=\"Neue Darstellung von Snap!\" width=\"580\" height=\"348\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/quadrat2.png 580w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/quadrat2-300x180.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption id=\"caption-attachment-377\" class=\"wp-caption-text\">Mit der neuen Einstellung lassen sich die Umrandungen der Bl\u00f6cke komplett ausblenden. Damit wird die &#8222;Textstruktur&#8220; von Snap ! sichtbar.<\/figcaption><\/figure>\n<p>Selbstverst\u00e4ndlich k\u00f6nnen \u00fcber den entsprechenden Regler auch beliebige Zwischenstufen eingestellt werden.<\/p>\n<h2>Hyperblocks<\/h2>\n<p>Wichtiger als diese oberfl\u00e4chliche Gestaltung sind aber die \u00c4nderungen unter der Haube. So verf\u00fcgt Snap! nun \u00fcber sogenannte Hyperblocks, welche einerseits den Umgang mit gr\u00f6sseren Datenmengen (Bildern, Musik, Datens\u00e4tzen) vereinfachen und Snap! in Bezug auf diese Anforderungen auch viel schneller machen.<\/p>\n<p>Am Beispiel eines Bildes mit invertierten Farben soll gezeigt werden, was genau damit gemeint ist. Die Vereinfachung eines solchen Programms erfolgt in drei Schritten:<\/p>\n<ol>\n<li>Klassische Programmierung mit for-Schlaufen<\/li>\n<li>Programmierung mit dem map()-Befehl von Snap!<br \/>\nDen gleichen Befehl findet man in etwas unterschiedlichen Varianten auch in der statistischen Programmiersprache R, wo er zu einem \u00fcbersichtlicheren Code f\u00fchrt.<\/li>\n<li>Die Programmierung mit Hyperblocks<\/li>\n<\/ol>\n<h3>Klassische Programmeriung mit for-Schlaufen<\/h3>\n<p>Werden in Snap! for-Schlaufen verwendet, um mehrdimensionale Datens\u00e4tze zu bearbeiten, kann es schnell un\u00fcbersichtlich werden. Bilddateien werden in Snap! als Liste von Listen mit den vier Elementen R-, G-, B- und Alphakanal dargestellt. Um alle Pixel zu \u00e4ndern, m\u00fcssen zuerst die einzelnen Pixellisten aufgerufen und diese dann in einer verschachtelten for-Schlaufe bearbeitet werden. Durch die vielen Programmschritte steigt die Gefahr von Programmierfehlern und das Programm braucht auch ziemlich viel Zeit, um das neue Bild zu berechnen.<\/p>\n<figure id=\"attachment_385\" aria-describedby=\"caption-attachment-385\" style=\"width: 952px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-385\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/for-Schlaufe.png\" alt=\"Variante mit for-Schlaufe\" width=\"952\" height=\"936\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/for-Schlaufe.png 952w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/for-Schlaufe-300x295.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/for-Schlaufe-768x755.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-385\" class=\"wp-caption-text\">F\u00fcr Programmieranf\u00e4nger sind verschachtelte for-Schlaufen meist nur mit grosser M\u00fche nachzuvollziehen.<\/figcaption><\/figure>\n<h3>Progammierung mit dem map()-Befehl<\/h3>\n<p>Mit dem map()-Befehl wird das Programm nicht nur wesentlich \u00fcbersichtlicher, es lauft auch um ein Vielfaches schneller als bei der for-Variante.<\/p>\n<figure id=\"attachment_380\" aria-describedby=\"caption-attachment-380\" style=\"width: 1006px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-380\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/map_befehl.png\" alt=\"Variante mit map-Befehl\" width=\"1006\" height=\"708\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/map_befehl.png 1006w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/map_befehl-300x211.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/map_befehl-768x541.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-380\" class=\"wp-caption-text\">Die Variante mit dem map()-Befehl l\u00e4sst schon wesentlich deutlicher erkennen, was das Snap!-Programm eigentlich tut.<\/figcaption><\/figure>\n<p>Allerdings ist die Anwendung des map()-Befehls konzeptionell anspruchsvoller, weil die Datenstruktur hier bereits weiter abstrahiert wurde. In der Regel braucht es etwas \u00dcbung, bis eine solche Umsetzung problemlos gelingt.<\/p>\n<p>Nachtrag vom 31.7.2020: Der Snap!-Entwickler bh schlug vor, den map()-Block wie folgt zu vereinfachen:<\/p>\n<figure id=\"attachment_388\" aria-describedby=\"caption-attachment-388\" style=\"width: 690px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-388\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/map_function_simplified.png\" alt=\"vereinfachter map-Block\" width=\"690\" height=\"113\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/map_function_simplified.png 690w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/map_function_simplified-300x49.png 300w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><figcaption id=\"caption-attachment-388\" class=\"wp-caption-text\">Mit der Verwendung von lokalen Variablen kann der map()-Block noch einmal eleganter und effizienter verwendet werden.<\/figcaption><\/figure>\n<h3>Programmierung mit Hyperblocks<\/h3>\n<p>Die Verwendung von Hyperblocks abstrahiert die zugrunde liegenden Prozesse, ist aber konzeptionell einfacher zu verstehen als die weiter oben vorgestellten Methoden. Jens M\u00f6nig spricht im Zusammenhang mit Hyperblocks bezeichnenderweise von einer &#8222;fast naiven&#8220; Programmierung.<\/p>\n<figure id=\"attachment_381\" aria-describedby=\"caption-attachment-381\" style=\"width: 850px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-381\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/hyperblocks.png\" alt=\"Variante mit Hyperblocks\" width=\"850\" height=\"228\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/hyperblocks.png 850w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/hyperblocks-300x80.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/hyperblocks-768x206.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-381\" class=\"wp-caption-text\">Der Vergleich mit der for-Variante zeigt deutlich, wie m\u00e4chtig Snap! durch die Hyperblocks geworden ist.<\/figcaption><\/figure>\n<p>Die wenigen Zeilen sind nicht nur wesentlich einfacher zu lesen, auch die Programmausf\u00fchrung wird dadurch noch einmal wesentlich beschleunigt. Damit erf\u00fcllen die Hyperblocks die urspr\u00fcnglichen Zielsetzungen, Snap! f\u00fcr die Verwendung mit gr\u00f6sseren Datenmengen fit zu machen gleich zweifach: Ein einfacher zu lesender Programmcode geht mit einer f\u00fcr Multimedia-Experimente nun gen\u00fcgend schnellen Programmausf\u00fchrung Hand in Hand.<\/p>\n<h2>Verwendung im Unterricht<\/h2>\n<p>Sch\u00fclerinnen und Sch\u00fcler fertigen mit ihren Smartphones t\u00e4glich neue Bilder an und verwenden dabei gerne auch Farbfilter. Deren Funktionsweise kann nun mit dem RGB-Farbmodell und wenigen Zeilen Code in Snap! einfach nachvollzogen werden. Die Invertierung eines Bildes ist nur eine M\u00f6glichkeit der Bildverfremdung, welche mit dem gezeigten kurzen Code m\u00f6glich wird. Durch das Setzen der Parameter in liste1 k\u00f6nnen weitere Farbeffekte erzielt werden.<\/p>\n<figure id=\"attachment_382\" aria-describedby=\"caption-attachment-382\" style=\"width: 940px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-382\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/farbfilter.png\" alt=\"Farbfilter\" width=\"940\" height=\"315\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/farbfilter.png 940w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/farbfilter-300x101.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2020\/07\/farbfilter-768x257.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-382\" class=\"wp-caption-text\">Das Originalbild (links) wird invertiert (Mitte) und durch die Anpassung der Parameter farblich weiter ver\u00e4ndert (rechts).<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Anl\u00e4sslich der SnapCon 2020 ver\u00f6ffentliche Jens M\u00f6nig die Version 6.1.0 von Snap!, welche nun eine Darstellung erlaubt, die sich eng an das textbasierte Programmieren anlehnt. In den Systemeinstellungen kann \u00fcber den Men\u00fcpunkt &#8222;Fade blocks&#8220;, die farbenfrohe Umrandung einzelner Befehlsbausteine reduziert werden. Selbstverst\u00e4ndlich k\u00f6nnen \u00fcber den entsprechenden Regler auch beliebige Zwischenstufen eingestellt werden. Hyperblocks Wichtiger als &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/gigers.com\/blog\/einfacher-programmieren-mit-snap-6-1\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eEinfacher Programmieren mit Snap 6.1\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-375","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/375","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=375"}],"version-history":[{"count":5,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/375\/revisions"}],"predecessor-version":[{"id":389,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/375\/revisions\/389"}],"wp:attachment":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/media?parent=375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/categories?post=375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/tags?post=375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}