Intro

Als komplette Anfängerin was das Programmieren angeht, hat mir der Kurs in den ersten Stunden einen guten Einstieg in die Welt des Creative Coding mithilfe der P5js-library (https://p5js.org)) gegeben. Dieser gelang durch viele Anleitungen, Beispiele, kleinen Projekten und vor allem aufgrund von ständigem Herum- und Ausprobieren. 

Die große Anzahl an Möglichkeiten hat mich sofort gepackt, und dadurch habe ich mich noch intensiver mit P5js auseinandergesetzt. So konnte ich mithilfe weiterer Tutorials und der „learn to code with p5js“-Seite (https://www.p5js.gym-wst.de/de/p5jsgrundlagen) mehr Möglichkeiten und Funktionen kennenlernen.

So bin ich irgendwann auf die Noise-Funktion gestoßen und war direkt von der Idee der „Natürlichen Zufälligkeit“ begeistert.

Bei einer näheren Auseinandersetzung mit dem Perlin Noise, bin ich auf die sogenannten Flow Fields gestoßen und wollte lernen ein eigenes zu programmieren und vor allem auch komplett zu verstehen.

Inspiration

Als Inspirationsquelle dienten mir das Internet und die sozialen Medien, wie zum Beispiel Pinterest und YouTube. Ich habe viel Zeit in die Recherche gesteckt und mir die für mich ansprechendsten Flow Fields herausgesucht. Die Auswahl war riesig.

Prozess

Meinen Code habe ich mithilfe des „Live Stream #46 Perlin Noise and Flow Fields“ von „The Coding Train“ geschrieben.

Perlin Noise ist eine Funktion, die eine weiche und organische Zufälligkeit generiert => „smooth randomness“.

Die Funktion wurde von Ken Perlin entwickelt, um Oberflächen- und Volumendarstellungen von natürlichen Elementen zu modellieren ( z. B. Holz, Marmor oder Metall ).

Sie wird häufig in der Bildsynthese genutzt, um natürliche Phänomene wie Wolken oder Landschaften zu simulieren (z. B. das Terrain von Minecraft).

Diese zwei Bilder zeigen Pixel deren Füllfarbe einmal durch random() und beim zweiten durch die Funktion noise() definiert werden.

In diesen drei Bildern wird der Aufbau des Flowfields gezeigt.

In jedes Quadrat  (Pixel) wird eine Linie gezeichnet, deren Winkel durch die Noise-Funktion bestimmt wird.

Durch die Variable Zoff wird das entstandene FlowField „dreidimensional“. Das zeigt sich darin, das es sich innerhalb der Draw-Schleife weiter verändert und bewegt.

Der nächste Schritt bestand darin Partikel zu generieren, die sich durch den Canvas bewegen.

Dabei war es besonders schwierig, dass diese nicht nur einmal durch den Canvas fliegen und ihn dann wieder verlassen (2. Bild).

Die Lösung bestand darin, die Partikel (sobald sie den Canvas verließen), auf der anderen Seite wieder auftauchen zu lassen (3 Bild).

Als nächstes sollten die Partikel nicht nur durch den Canvas fliegen, sondern sich dabei an dem FlowField orientieren.

Dabei fiel auf, dass die Partikel immer schneller wurden, bis sie gar nicht mehr zu sehen waren. Aus diesem Grund legte ich eine maximale Geschwindigkeit fest.

Um den FlowFields, die mir als Inspiration dienten näher zu kommen, musste das FlowField  „unsichtbar“ gemacht und weitere Partikel hinzugefügt werden.

Der letzte Schritt bestand darin, die einzelnen Positionen, die ein Partikel jeweils „hinterlässt“, durch eine Linien zu verbinden.

Probleme

Die meisten Probleme hatte ich damit, dass die Partikel dem Flowfield folgen sollten. Dabei blieb das Go Live Fenster im Browser meistens einfach nur weiß und ich konnte die Fehlerquellen nicht finden. 

Um festzustellen, wo die Probleme lagen, hat mir der Webeditor von P5js sehr geholfen. Er konnte einem die möglichen Fehlerpunkte nennen und auch Lösungsvorschläge geben.

Endprodukt

Nach der Fertigstellung des Codes habe ich noch lange an den für mich interessantesten Parametern herumgespielt.

Ich habe mich insbesondere auf das „Fließverhalten“ der Partikel konzentriert, und versucht so viele Variationen wie möglich zu generieren.

Code

Nähen

Um meinen Code auf ein analoges Medium zu übertragen, wollte ich ihn erst von einer Stickmaschine in der Fachhochschule auf Stoff sticken zu lassen.

Leider war es nicht möglich eine passende zu finden, deren Stickrahmen groß genug für mein Muster war. Selbst außerhalb der Hochschule war es schwierig bezahlbare Optionen zu finden.

Aus diesem Grund entschied ich mich dafür, den Code selber, mithilfe einer Nähmaschine, auf den Stoff zu nähen.

Bevor ich mit dem Nähen beginnen konnte, habe ich versucht das Aussehen meines FlowFields „nähbar“ zu machen.

Fazit

Abschließend kann ich nur sagen , dass ich sehr froh bin diesen Kurs belegt zu haben.

Die Welt des Creative Codings und parametrischer Designs, haben mich schon länger interessiert und im Rahmen dieses Kurses, habe ich es geschafft diese Welt kennenzulernen. Es war sehr interessant etwas zu programmieren, das auch im gleichen Moment „sichtbar“ ist.

Anfangs viel es mir schwer „einfach herumzuprobieren“, da wir im Kurs nur eine begrenzte Anzahl an Basics gelernt hatten. Nach einer gewissen Zeit, in der ich mich mit der Materie nochmal intensiver auseinander gesetzt habe, ging es dann aber Schritt für Schritt.

Ich finde es total spannend, wie viele Möglichkeiten es gibt etwas Digitales und eigentlich nicht Greifbares eben doch in etwas Sichtbares und „Reales“ umzuwandeln.