{"id":622,"date":"2021-05-02T20:57:26","date_gmt":"2021-05-02T20:57:26","guid":{"rendered":"https:\/\/gigers.com\/blog\/?p=622"},"modified":"2024-06-24T17:33:33","modified_gmt":"2024-06-24T17:33:33","slug":"computerkunst-mit-snap-wiederholung-und-zufall","status":"publish","type":"post","link":"https:\/\/gigers.com\/blog\/computerkunst-mit-snap-wiederholung-und-zufall\/","title":{"rendered":"Computerkunst mit Snap! – Wiederholung und Zufall"},"content":{"rendered":"

Mit dem Computer erzeugte Kunst auf der Basis von sich wiederholenden Elementen, eignet sich f\u00fcr den Einstieg in die Programmierung, weil diese vergleichsweise einfach programmiert werden k\u00f6nnen. Sobald aber etwas h\u00f6here Anforderungen an die \u00c4sthetik dieser Werke gestellt werden, scheitern Sch\u00fclerinnen und Sch\u00fcler der Sekundarstufe I schnell an Details. Aus diesem Grund werden hier in Snap! geschriebene Bl\u00f6cke vorgestellt, welche als Starthilfe gedacht sind und hoffentlich zu visuell ansprechenden Ergebnissen f\u00fchren.<\/p>\n

Die Grundidee<\/h2>\n

Die Grundidee solcher Kunstwerke l\u00e4sst sich am besten anhand von Diagonalen innerhalb eines Quadrates veranschaulichen, wobei die Ausrichtung solcher Diagonalen zuf\u00e4llig ausgew\u00e4hlt werden soll. Obwohl das Beispiel sehr einfach ist, es gibt nur die beiden Elemente \/ und \\ entstehen bei gen\u00fcgend Wiederholungen interessante Muster. Schon bei vier Feldern entstehen 16 = 2 x 2 x 2 x 2 Muster.<\/p>\n

\"\"
Alle M\u00f6glichkeiten bei einem 4×4-Feld wenn Diagonalen als Elemente eingesetzt werden.<\/figcaption><\/figure>\n

Viele Grundelemente k\u00f6nnen sogar in vier Richtungen gedreht werden, wodurch die Anzahl der M\u00f6glichkeiten bei vier Feldern auf 4 x 4 x 4 x 4 = 256 ansteigt.<\/p>\n

Einzelne Elemente<\/h2>\n

Beim Entwerfen einzelner Elemente, aus denen sp\u00e4ter 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\u00fchrt.<\/p>\n

Hat man ein interessantes Muster gefunden, kann man dies in Snap! dank der Turtlegrafik mit wenigen Befehlen programmieren.<\/p>\n

\"\"
Mit wenigen Befehlen k\u00f6nnen alle Figuren, deren Teilelemente Geraden sind, programmiert werden.<\/figcaption><\/figure>\n

Schwierig ist allenfalls die Berechnung der Winkel und Streckenl\u00e4ngen f\u00fcr die einzelnen Teilelemente. Falls die Sch\u00fclerinnen und Sch\u00fcler beispielsweise den Satz des Pythagoras noch nicht kennen, kann man ihnen eine entsprechende Hilfe zu Verf\u00fcgung stellen.<\/p>\n

\"\"
Diese Grafik erleichtert die korrekte Programmierung von Schr\u00e4gen im Grundraster.<\/figcaption><\/figure>\n

Ob die Besprechung von trigonometrischen Funktionen auf der Sekundarstufe I sinnvoll ist, h\u00e4ngt auch davon ab, wie viel Zeit zu Verf\u00fcgung stehen. Zumindest die Berechnungen k\u00f6nnen die Lernenden aber durchf\u00fchren, da die entsprechenden Funktionen auf den handels\u00fcblichen Schultaschenrechnern zu Verf\u00fcgung stehen.<\/p>\n

Einpassen in ein Raster<\/h2>\n

Damit es sp\u00e4ter nicht zu Schwierigkeiten beim Einpassen der Elemente in ein Raster kommt, sollten von Anfang an Variablen f\u00fcr 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:<\/p>\n

\"\"
Die Diagonale selbst, kann mit zwei Bl\u00f6cken programmiert werden.<\/figcaption><\/figure>\n

F\u00fcr das Testen bereits vorhandener oder selbst geschriebener Figuren steht ein Block zu Verf\u00fcgung mit dem man diese testen kann.<\/p>\n

Die for-Schleife am Anfang des eigenen Blocks dreht die Figur in die zwei m\u00f6glichen Positionen. Wenn es vier Positionen gibt, muss der Zufallszahlenblock entsprechend angepasst werden.<\/p>\n

Damit der Block vor dem Einsatz in einem gr\u00f6sseren Raster \u00fcberpr\u00fcft werden kann, steht eine entsprechende Testumgebung zu Verf\u00fcgung. Diese wird mit folgendem Block aufgerufen:<\/p>\n

\"\"
Dieser Block erlaubt es, einzelne Figuren bequem zu testen.<\/figcaption><\/figure>\n

Beim Testen ist darauf zu achten, dass die Gr\u00f6sse der Quadratseite mit dem Parameter #1 \u00fcbergeben wird. Die Gr\u00f6sse der Bildschirmausgabe kann mit size (ver\u00e4ndert die B\u00fchnengr\u00f6sse) und border (ver\u00e4ndert die Breite des Rahmens) entsprechend angepasst werden.<\/p>\n

Funktioniert alles wie gew\u00fcnscht, kann der getestete Block im Raster verwendet werden. Hierzu steht ebenfalls ein Block zu Verf\u00fcgung, weil das richtige Setzen der Werte den Lernenden aufgrund des Koordinatensystems von Snap! oft Schwierigkeiten bereitet. Bei Snap! liegt der Nullpunkt n\u00e4mlich in der Mitte des Bildschirms, was ein bequemes Arbeiten mit negativen Zahlen zul\u00e4sst, im Falle eines Rasters f\u00fcr generative Kunst aber eher hinderlich ist.<\/p>\n

\"\"
Dieser Block \u00fcbernimmt die Berechnung der Koordinaten f\u00fcr die einzelnen Teilfl\u00e4chen.<\/figcaption><\/figure>\n

Dem Block muss die Anzahl der Quadrate in x- und y-Richtung und die L\u00e4nge einer Quadratseite \u00fcbergeben werden. Speichert man vorher die Dimensionen des Bildschirms und gibt an, wie viele Teilfelder man in die entsprechende Richtung haben m\u00f6chte, werden die entsprechenden Werte (size and step) automatisch berechnet. Wie aus den gleichen Angaben f\u00fcr die x- und y-Dimension zu sehen ist, berechnet der Block im vorgestellten Programm jeweils ein quadratisches Kunstwerk.<\/p>\n

\"\"
Bei diesem Beispiel wurden 100 Diagonalen in jeweils einer der beiden m\u00f6glichen Ausrichtungen gezeichnet.<\/figcaption><\/figure>\n

Einf\u00e4rben der Kunstwerke<\/h2>\n

Da nur aus Linien bestehende Beispiele manchmal etwas schlicht wirken, k\u00f6nnen die erzeugten Bilder mit einem entsprechenden Befehl eingef\u00e4rbt 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.<\/p>\n

\"\"
Der Block f\u00e4rbt eine Teilelemente einer Zeichnung mit einer beliebigen Farbe aus einer gegebenen Farbpalette ein.<\/figcaption><\/figure>\n

Beim Einf\u00e4rben ist unbedingt darauf zu achten, dass das entsprechende Objekt (Sprite) vorher versteckt wird, sonst werden wom\u00f6glich einzelne Bildteile falsch eingef\u00e4rbt.<\/p>\n

\"\"
Das bereits vorgestellte Beispiel wurde mit den Farben aus einer entsprechenden Palette eingef\u00e4rbt.<\/figcaption><\/figure>\n

Der Baukasten<\/h2>\n

Aktuell k\u00f6nnen in Programm bereits 15 Grundelemente (mit den entsprechenden Drehungen) eingesetzt werden. Eine \u00dcbersicht der verschiedenen Elemente kann hier als PDF heruntergeladen werden:<\/p>\n

Vorgefertigte Elemente<\/a> (PDF)<\/p>\n

Zwei weitere Beispiele sollen zeigen, was mit den vorgefertigten Elementen m\u00f6glich ist.<\/p>\n

\"\"
Farbige Quadrate unterschiedlicher Gr\u00f6sse f\u00fcgen sich zu einem Gesamtbild zusammen.<\/figcaption><\/figure>\n

Bei diesem Beispiel wurde darauf verzichtet, das Bild nachtr\u00e4glich einzuf\u00e4rben, da der Befehl Nr. 4 bereits farbige Quadrate produziert.<\/p>\n

\"\"
Dieses Bild entstand durch das Weglassen von Teilstrecken in einem regelm\u00e4ssigen Muster.<\/figcaption><\/figure>\n

Der Block Nr. 6 zeichnet Rhomben, deren Seiten zufallsgesteuert erzeugt werden. Je kleiner der Wert (hier: 0.7), desto mehr L\u00fccken entstehen im Bild, wodurch gr\u00f6ssere zusammenh\u00e4ngende Fl\u00e4chen erzeugt werden.<\/p>\n

Kombination von Bl\u00f6cken<\/h2>\n

Der „draw grid“-Block ist so programmiert, dass ihm auch mehrere Bl\u00f6cke in einer Liste \u00fcbergeben werden k\u00f6nnen. Pro Teilquadrat wird dann wieder jeweils einer dieser Bl\u00f6cke zuf\u00e4llig ausgew\u00e4hlt. Damit erh\u00f6ht sich die Vielfalt der mit dem Programm generierbaren Kunstwerke weit \u00fcber die blosse Einzelverwendung der 15 vorgegebenen Bl\u00f6cke. W\u00e4hrend einige Kombinationen durch grosse zusammenh\u00e4ngende Fl\u00e4chen eher langweilig wirken, f\u00fchren andere Kombinationen zu \u00e4usserst interessanten unregelm\u00e4ssigen Mustern.<\/p>\n

\"\"
Kombination der Bl\u00f6cke 6 (mit einer zuf\u00e4lligen Wahrscheinlichkeit zwischen 0.7 und 1.0) und 15.<\/figcaption><\/figure>\n

W\u00e4hrend der Block 6 die schon erw\u00e4hnten Rhomben mit fehlenden Seiten generiert, erzeugt der Block 15 eine Pfeilfigur.<\/p>\n

\"\"
F\u00fcr dieses Bild wurden die Bl\u00f6cke 5 (mit einer zuf\u00e4lligen Wahrscheinlichkeit zwischen 0.7 und 1.0) und 10 kombiniert.<\/figcaption><\/figure>\n

Das Programm<\/h2>\n

Das Programm kann unter folgendem Link aufgerufen werden: Repeating Elements<\/a>. Wird es \u00fcber die gr\u00fcne Flagge gestartet, generiert es automatisch ein Diagonalenbild. M\u00f6chte man weitere Beispiele erzeugen, muss man in den Editiermodus wechseln. Dort pr\u00e4sentiert das Programm 6 verschiedene Objekte:<\/p>\n