Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Perlin Noise Flow Field - Parametric Design

Perlin Noise Flow Field - Parametric Design

Im Rahmen des Kurses „Parametric Design“ habe ich mich mit der Entstehung und dem Entwickeln eines Perlin Noise Flow Fields beschäftigt. Mein Ziel war es, selbst eines zu konstruieren und es später auf ein analoges Medium zu übertragen.

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.

GA1-1024x552.jpgGA1-1024x552.jpg
generative-art-processing-1.jpggenerative-art-processing-1.jpg
a31a454ad5a469327ab104c38e2b49c8.pnga31a454ad5a469327ab104c38e2b49c8.png
images-1.jpegimages-1.jpeg
images-2.jpegimages-2.jpeg

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).

giphy-1.gifgiphy-1.gif
image.pngimage.png

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

image.pngimage.png
Bildschirmfoto 2022-09-25 um 17.37.21.pngBildschirmfoto 2022-09-25 um 17.37.21.png
giphy-2.gifgiphy-2.gif

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.

05.png05.png
giphy-3.gifgiphy-3.gif
giphy-4.gifgiphy-4.gif

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).

giphy-5.gifgiphy-5.gif
giphy-6.gifgiphy-6.gif
giphy-7.gifgiphy-7.gif
image.pngimage.png

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.

Bildschirmfoto 2022-09-22 um 10.28.12.pngBildschirmfoto 2022-09-22 um 10.28.12.png
Bildschirmfoto 2022-09-22 um 10.33.12.pngBildschirmfoto 2022-09-22 um 10.33.12.png
Bildschirmfoto 2022-09-22 um 21.42.22.pngBildschirmfoto 2022-09-22 um 21.42.22.png
Bildschirmfoto 2022-09-22 um 21.44.32.pngBildschirmfoto 2022-09-22 um 21.44.32.png

Endprodukt

giphy-1.gifgiphy-1.gif

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.

Bildschirmfoto 2022-09-23 um 08.56.02.pngBildschirmfoto 2022-09-23 um 08.56.02.png
Bildschirmfoto 2022-09-22 um 22.05.43.pngBildschirmfoto 2022-09-22 um 22.05.43.png
Bildschirmfoto 2022-09-23 um 08.50.46.pngBildschirmfoto 2022-09-23 um 08.50.46.png
Bildschirmfoto 2022-09-24 um 17.44.01.pngBildschirmfoto 2022-09-24 um 17.44.01.png
Bildschirmfoto 2022-09-23 um 10.46.14.pngBildschirmfoto 2022-09-23 um 10.46.14.png
Bildschirmfoto 2022-09-23 um 10.33.15.pngBildschirmfoto 2022-09-23 um 10.33.15.png
Bildschirmfoto 2022-09-25 um 19.44.54.pngBildschirmfoto 2022-09-25 um 19.44.54.png
Bildschirmfoto 2022-09-25 um 19.43.14.pngBildschirmfoto 2022-09-25 um 19.43.14.png
Bildschirmfoto 2022-09-25 um 20.21.01.pngBildschirmfoto 2022-09-25 um 20.21.01.png

Code

Bildschirmfoto 2022-09-26 um 14.08.49.pngBildschirmfoto 2022-09-26 um 14.08.49.png
Bildschirmfoto 2022-09-26 um 14.09.23.pngBildschirmfoto 2022-09-26 um 14.09.23.png
Bildschirmfoto 2022-09-26 um 14.09.31.pngBildschirmfoto 2022-09-26 um 14.09.31.png

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.

Bildschirmfoto 2022-09-22 um 21.59.25.pngBildschirmfoto 2022-09-22 um 21.59.25.png
Bildschirmfoto 2022-09-22 um 21.58.47.pngBildschirmfoto 2022-09-22 um 21.58.47.png
Bildschirmfoto 2022-09-25 um 21.46.25.pngBildschirmfoto 2022-09-25 um 21.46.25.png
Bildschirmfoto 2022-09-25 um 21.34.58.pngBildschirmfoto 2022-09-25 um 21.34.58.png
image.pngimage.png
image.pngimage.png

IMG_1910.jpegIMG_1910.jpeg
IMG_1917.jpegIMG_1917.jpeg
IMG_1918.pngIMG_1918.png
IMG_1919.pngIMG_1919.png
IMG_1926.pngIMG_1926.png
IMG_1934.pngIMG_1934.png

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.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Dr. Sebastian Meier

Zugehöriger Workspace

Parametric Design

Entstehungszeitraum

Sommersemester 2022