{"id":225,"date":"2019-10-01T15:24:17","date_gmt":"2019-10-01T15:24:17","guid":{"rendered":"http:\/\/gigers.com\/blog\/?p=225"},"modified":"2024-06-24T17:33:04","modified_gmt":"2024-06-24T17:33:04","slug":"fotofilter-mit-snap","status":"publish","type":"post","link":"https:\/\/gigers.com\/blog\/fotofilter-mit-snap\/","title":{"rendered":"Fotofilter mit Snap!"},"content":{"rendered":"<p>Die <a href=\"https:\/\/www.raspberrypi.org\" target=\"_blank\" rel=\"noopener noreferrer\">Raspberry Pi Foundation<\/a> bietet \u00fcber <a href=\"https:\/\/www.futurelearn.com\" target=\"_blank\" rel=\"noopener noreferrer\">FutureLearn<\/a> interessante Kurse zum Bereich &#8222;Medien und Informatik&#8220; an. Einer dieser Kurse, &#8222;<a href=\"https:\/\/www.futurelearn.com\/courses\/representing-data-with-images-and-sound\" target=\"_blank\" rel=\"noopener noreferrer\">Representing Data with Images and Sound: Bringing Data to Life<\/a>&#8220; greift unter anderem das Thema Foto-Filter auf und bietet dazu auch einige interessante Code-Beispiele mit <a href=\"https:\/\/www.python.org\" target=\"_blank\" rel=\"noopener noreferrer\">Python<\/a>, welche die F\u00e4higkeiten von Anf\u00e4ngerinnen und Anf\u00e4ngern wohl teilweise \u00fcbersteigen. Eine Umsetzung mit Snap! erleichtert nicht nur die Programmierung, durch die Verwendung der Webcam ist auch das Einbinden von Bilddateien wesentlich einfacher.<\/p>\n<figure id=\"attachment_228\" aria-describedby=\"caption-attachment-228\" style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-228\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_stage_picture.png\" alt=\"\" width=\"960\" height=\"720\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_stage_picture.png 960w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_stage_picture-300x225.png 300w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_stage_picture-768x576.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption id=\"caption-attachment-228\" class=\"wp-caption-text\">In Snap! programmierte Farbfilter. Das Originalbild befindet sich links oben.<\/figcaption><\/figure>\n<h2>Programmierung in Snap!<\/h2>\n<p>Ein geeignetes Bild kann man in Snap! mittels der Zusatzbibliothek &#8222;Pixels&#8220; leicht \u00fcber die Webcam aufnehmen.<\/p>\n<figure id=\"attachment_226\" aria-describedby=\"caption-attachment-226\" style=\"width: 746px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-226\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_script_snap_picture.png\" alt=\"\" width=\"746\" height=\"288\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_script_snap_picture.png 746w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_script_snap_picture-300x116.png 300w\" sizes=\"auto, (max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><figcaption id=\"caption-attachment-226\" class=\"wp-caption-text\">In Snap! kann man einem Objekt (Sprite) ein Bild der Webcam als Kost\u00fcm zuweisen.<\/figcaption><\/figure>\n<p>Der abgebildete Programmcode verschiebt zus\u00e4tzlich das aufgenommene Bild in die linke obere Ecke.<\/p>\n<p>Ein zweites Objekt liest nun die Pixel vom Bildschirm ab, rechnet diese um und bildet das Ergebnis an einer anderen Stelle des Bildschirms ab. Der folgende Programmcode erzeugt drei Abbildungen:<\/p>\n<ul>\n<li>Graustufenbild: Alle drei Farbkan\u00e4le (Rot, Gr\u00fcn, Blau) werden auf den Wert des Rotkanals gesetzt;<\/li>\n<li>Negativbild: F\u00fcr alle drei Farben wird die neue Farbe berechnet, indem der Farbwert des Kanals von 255 subtrahiert wird.<\/li>\n<li>Rotierende Farben: Jeder Farbwert wird mit einem Faktor multipliziert. Damit kein Wert gr\u00f6sser 255 entsteht, wird das Produkt anschliessend modulo 255 gerechnet, d.h., es handelt sich um den Rest nach einer Division durch 255.<\/li>\n<\/ul>\n<p>Im Wesentlichen besteht das Programm aus zwei verschachtelten Schlaufen, die daf\u00fcr sorgen, dass jeder Pixel ausgelesen wird. In der inneren Schlaufe wird der Farbwert ausgelesen, umgerechnet und ein entsprechender Pixel an der richtigen Stelle geschrieben.<\/p>\n<figure id=\"attachment_227\" aria-describedby=\"caption-attachment-227\" style=\"width: 525px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-227\" src=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_script_change_picture-882x1024.png\" alt=\"\" width=\"525\" height=\"610\" srcset=\"https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_script_change_picture-882x1024.png 882w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_script_change_picture-258x300.png 258w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_script_change_picture-768x892.png 768w, https:\/\/gigers.com\/blog\/wp-content\/uploads\/2019\/10\/pixels_script_change_picture.png 1140w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><figcaption id=\"caption-attachment-227\" class=\"wp-caption-text\">Das Hauptprogramm rechnet die ausgelesenen Farbwerte in drei Varianten um und schreibt die so berechneten Bilder auf den Bildschirm.<\/figcaption><\/figure>\n<p>Das verwendete Verfahren ist zwar sehr langsam, daf\u00fcr aber recht anschaulich. Dieses kann gut anhand eines kleinen Bildes von Hand nachvollzogen werden, da die neuen Bilder zeilenweise auf dem Bildschirm erscheinen.<\/p>\n<h2>Verwendung im Unterricht<\/h2>\n<p>Foto-Filter geh\u00f6ren zum Alltag von Jugendlichen und werden von diesen auch gerne genutzt. Nebst dem technischen Aspekt (Medien und Informatik) kann das Beispiel auch im Kunstunterricht (Bildnerisches Gestalten) verwendet werden. F\u00fcr ansprechende Farbfilter sind dabei unter Umst\u00e4nden schon recht komplexe Umrechnungen notwendig.<\/p>\n<p>Haben die Sch\u00fclerinnen und Sch\u00fcler das Prinzip einmal begriffen, l\u00e4dt die Aktivit\u00e4t zu umfangreichen Experimenten ein.<\/p>\n<h2>Quellen<\/h2>\n<p>Representing Data with Images and Sound: Bringing Data to Life: <a href=\"https:\/\/www.futurelearn.com\/courses\/representing-data-with-images-and-sound\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.futurelearn.com\/courses\/representing-data-with-images-and-sound<\/a><\/p>\n<p>Python: <a href=\"https:\/\/www.python.org\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.python.org<\/a><\/p>\n<p>Raspberry Pi Foundation: <a href=\"https:\/\/www.raspberrypi.org\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.raspberrypi.org<\/a><\/p>\n<p>Snap-Programmierumgebung: <a href=\"https:\/\/snap.berkeley.edu\/snap\/snap.html\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/snap.berkeley.edu\/snap\/snap.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Raspberry Pi Foundation bietet \u00fcber FutureLearn interessante Kurse zum Bereich &#8222;Medien und Informatik&#8220; an. Einer dieser Kurse, &#8222;Representing Data with Images and Sound: Bringing Data to Life&#8220; greift unter anderem das Thema Foto-Filter auf und bietet dazu auch einige interessante Code-Beispiele mit Python, welche die F\u00e4higkeiten von Anf\u00e4ngerinnen und Anf\u00e4ngern wohl teilweise \u00fcbersteigen. Eine &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/gigers.com\/blog\/fotofilter-mit-snap\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eFotofilter 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-225","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/225","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=225"}],"version-history":[{"count":2,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/225\/revisions"}],"predecessor-version":[{"id":230,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/225\/revisions\/230"}],"wp:attachment":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/media?parent=225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/categories?post=225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/tags?post=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}