{"id":414,"date":"2020-09-30T20:40:12","date_gmt":"2020-09-30T20:40:12","guid":{"rendered":"https:\/\/gigers.com\/blog\/?p=414"},"modified":"2024-06-24T17:33:19","modified_gmt":"2024-06-24T17:33:19","slug":"kuenstlerische-bildeffekte-mit-snap","status":"publish","type":"post","link":"https:\/\/gigers.com\/blog\/kuenstlerische-bildeffekte-mit-snap\/","title":{"rendered":"K\u00fcnstlerische Bildeffekte mit Snap!"},"content":{"rendered":"

Im Kurs „From Media Computation to Data Science“ stellen Jens M\u00f6nig und Jadga Huegle verschiedene Aspekte der Datenverarbeitung anhand von Bild und Musik vor. Unter anderem zeigen sie, wie ein Foto mit wenigen Snap!-Befehlen in ein kleines Kunstwerk im Stil des Pointilismus verwandelt werden kann.<\/p>\n

Pointilismus<\/h2>\n

Dazu werden die Werte einzelner Pixel eines Fotos ausgelesen und anschliessend an der Originalstelle ein kleiner Kreis (Konfetti) gezeichnet. Je nach Gr\u00f6sse und Transparenz dieser Kreise entstehen so bereits interessante Bildeffekte.<\/p>\n

\"\"
Ein Foto wird durch das Auftragen von transparenten Kreisen im Stil des Pointilismus dargestellt.<\/figcaption><\/figure>\n

Um ein solches Bild zu erzeugen, braucht man nur wenige Befehle, die viele Male wiederholt werden.<\/p>\n

\"\"
Zentraler Befehlsblock zum Erzeugen von Bildern im Stil des Pointilismus<\/figcaption><\/figure>\n

Innerhalb einer Schlaufe werden die folgenden Befehle abgearbeitet:<\/p>\n

    \n
  1. Der Zeichenstift wird vom Bild entfernt und \u00fcber einem zuf\u00e4lligen Pixel platziert.<\/li>\n
  2. Die Farbwerte des Pixels werden im HSV-Farbmodell ausgelesen.<\/li>\n
  3. Der Stift wird auf die Zeichenfl\u00e4che gesetzt und zeichnet dort einen Punkt mit vorher gew\u00e4hlter Gr\u00f6sse.<\/li>\n<\/ol>\n

    Farbstiftzeichnung<\/h2>\n

    W\u00e4hrend die erste Variante eher an ein Aquarell erinnert, kann die Kreisform auch durch Striche ersetzt werden, wodurch der Eindruck einer Farbstiftzeichnung entsteht.<\/p>\n

    \"\"
    Die Ausrichtung der einzelnen Striche kann \u00fcber einen Richtungsparameter beeinflusst werden.<\/figcaption><\/figure>\n

    Diesen Effekt erzielt man in der Programmierung dadurch, dass man die Spitze des Stifts verkleinert und den Stift eine gewisse Strecke \u00fcber die Zeichenfl\u00e4che streichen l\u00e4sst.<\/p>\n

    \"\"
    Mit nur wenigen \u00c4nderungen werden aus Punkten Farbstriche.<\/figcaption><\/figure>\n

    Gegen\u00fcber dem urspr\u00fcnglichen Block (hier mit der umschliessenden Schlaufe dargestellt), ver\u00e4ndert sich nur die Strichdicke und die L\u00e4nge der Striche (von 0 auf 5 gesetzt), wobei alle Striche im 45\u00b0 Winkel gezeichnet werden.<\/p>\n

    Der Farbton steuert die Richtung<\/h2>\n

    Interessant wird es, wenn man die Richtung der einzelnen Striche vom Farbton eines Pixels abh\u00e4ngig macht. Dadurch entstehen an Farb\u00fcberg\u00e4ngen interessante Effekte.<\/p>\n

    \"\"
    Bei diesem Bild entstehen insbesondere im Hintergrund interessante Strukturen.<\/figcaption><\/figure>\n

    Dieser Effekt wirkt bei Fotos mit kr\u00e4ftigen Farben besonders gut.<\/p>\n

    \"\"
    Die kr\u00e4ftigen Farben des Pfaffenh\u00fctchens in Verbindung mit den gr\u00fcnen Bl\u00e4ttern und dem blauen Himmel akzentuieren die verschiedenen Strichrichtungen.<\/figcaption><\/figure>\n

    Ordnung und Zufall<\/h2>\n

    Um noch etwas mehr Dynamik in solche Bilder zu bringen, kann man die Strichrichtung zus\u00e4tzlich innerhalb von bestimmten Grenzen zuf\u00e4llig von der durch den Farbton gegebenen Richtung abweichen lassen.<\/p>\n

    \"\"
    Oft wirkt die Kombination von Ordnung und Chaos besonders reizvoll.<\/figcaption><\/figure>\n

    Die Programmierung<\/h2>\n

    Die gesamte Programmierung f\u00fcr einen solchen Effekt, besteht aus drei Befehlsbl\u00f6cken f\u00fcr den Hintergrund, die Verwaltung der Bilddateien und den eigentlichen k\u00fcnstlerischen Filter.<\/p>\n

    Zuerst wird der Hintergrund auf weiss gesetzt, wobei bei einigen Bildern ein schwarzer oder farbiger Hintergrund besser wirken mag. Ausserdem werden m\u00f6glicherweise fr\u00fcher gesetzte Grafikeinstellungen zur\u00fcckgesetzt.<\/p>\n

    \"\"
    F\u00fcr die Einrichtung der Umgebung werden nur wenige Befehle verwendet.<\/figcaption><\/figure>\n

    Gleichzeitig wird eines von mehreren Bildern zuf\u00e4llig ausgew\u00e4hlt.<\/p>\n

    \"\"
    Einem Objekt (Sprite) k\u00f6nnen in Snap! mehrere Kost\u00fcme zugeordnet werden. Eines davon wird zuf\u00e4llig ausgew\u00e4hlt.<\/figcaption><\/figure>\n

    Der eigentliche k\u00fcnstlerische Filter unterscheidet sich von den bereits vorgestellten wieder nur durch kleine Anpassungen.<\/p>\n

    \"\"
    Der Filter selbst kann mithilfe verschiedener Parameter angepasst werden.<\/figcaption><\/figure>\n

    Kreative Freiheit durch Parameter<\/h2>\n

    Durch das Anpassen der verschiedenen Parameter (Transparenz, Anzahl, Dicke und L\u00e4nge der einzelnen Striche) k\u00f6nnen beliebige Fotografien dem eigenen Stilempfinden angepasst werden.<\/p>\n

    \"\"
    Mit jeder Generation von Snap! entpuppt sich die blockbasierte Programmierumgebung als universelleres Werkzeug, mit dem Konzepte der Informatik in ansprechender Weise veranschaulicht werden k\u00f6nnen.<\/figcaption><\/figure>\n

    Quelle aller Originalfotos: Ernst Giger<\/p>\n","protected":false},"excerpt":{"rendered":"

    Im Kurs „From Media Computation to Data Science“ stellen Jens M\u00f6nig und Jadga Huegle verschiedene Aspekte der Datenverarbeitung anhand von Bild und Musik vor. Unter anderem zeigen sie, wie ein Foto mit wenigen Snap!-Befehlen in ein kleines Kunstwerk im Stil des Pointilismus verwandelt werden kann. Pointilismus Dazu werden die Werte einzelner Pixel eines Fotos ausgelesen … <\/p>\n

    \u201eK\u00fcnstlerische Bildeffekte 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-414","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/414","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=414"}],"version-history":[{"count":6,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/414\/revisions"}],"predecessor-version":[{"id":431,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/posts\/414\/revisions\/431"}],"wp:attachment":[{"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/media?parent=414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/categories?post=414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gigers.com\/blog\/wp-json\/wp\/v2\/tags?post=414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}