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

Fluid Noise

Durch den Kurs Parametric Design, setzte ich mich zum ersten mal mit Coding in Java Script auseinander. Da ich zu dieser Zeit viel in Ausstellungen mit digitalen Elementen war, kam mir die Idee einer Animation auf Basis der Noise Function.

Fluid Noise Animation

Die Noise Function

Als ich mich über weitere Funktionen von P5JS informierte, traf ich auf den Youtube Kanal „The Coding Train“ und lernte dort die Noise Function kennen. Diese faszinierte mich direkt und ich versuchte sie selbst zu programmieren.

Die Wirkungsweise der Funktion ist dabei wiefolgt:

Ähnlich wie die Random Funktion gibt die Noise Funktion dem User eine Zahl zwischen 0 und 1 aus.

Diese wird aber nicht wie bei der Random Funktion in jeder Iteration zufällig generiert, sondern basiert immer auf dem Vorgänger. Eine beispielhafte Folge von Werten wäre also:

0.2, 0.3, 0.4, 0.3, 0.2, 0.3, 0.4, 0.5, 0.4, 0.3, 0.4, 0.5…

So eine Folge von Werten kann auch mehrere Dimensionen haben.  Visualisiert würde diese dann wiefolgt aussehen (hier 2 Dim.):

0.2, 0.3, 0.4, 0.3, 0.2

0.3, 0.2, 0.3, 0.4, 0.3

0.2 ,0.3, 0.4, 0.5, 0.4

0.3, 0.4, 0.5, 0.6, 0.5

Den Abstand der Werte pro Dimension kann man selbst mit Hilfe einer Variable bestimmen.

In meinem Fall nannte sich dieser Xoff, Yoff und Zoff.

untitled-3.pnguntitled-3.png
Bildschirmfoto 2022-02-24 um 11.32.28.pngBildschirmfoto 2022-02-24 um 11.32.28.png

Dies war der erste Versuch die Noise Funktion zu Verwenden. Ich erstellte eine Linie, welche mit Hilfe von 2 Schleifen in einem Grid verteilt wurden.

Die Noise Funktion nutzte ich dann, um die Linien um einen bestimmten Winkel zu drehen.

Bildschirmfoto 2022-02-24 um 11.39.26.pngBildschirmfoto 2022-02-24 um 11.39.26.png
untitled-4.pnguntitled-4.png

Im nächsten Schritt erstellte ich aus einem 10px Quadrat ein Grid und passte den Schwarzwert(0-155) mit Hilfe der Noise Funktion an.

Das Endprojekt

Beschreibung des Endcodes auf Grund von INCOM Problemen im Quellcode zu finden ⬇️

Bildschirmfoto 2022-03-27 um 18.32.10.pngBildschirmfoto 2022-03-27 um 18.32.10.png
Bildschirmfoto 2022-03-27 um 18.35.52.pngBildschirmfoto 2022-03-27 um 18.35.52.png
Bildschirmfoto 2022-03-27 um 18.42.55.pngBildschirmfoto 2022-03-27 um 18.42.55.png
Bildschirmfoto 2022-03-27 um 13.31.11.pngBildschirmfoto 2022-03-27 um 13.31.11.png

Kurs Reflexion

Der Kurs Parametric Design, war für mich der aufregendste und spannendste Kurs in diesem Semester. Da ich mich schon seit längerem mit diesem Thema auseinander setzen wollte, investierte ich viel Zeit und Mühe in den Kurs. Dadurch merkte ich schnell eine relativ steile Lernkurve.

Dennoch merkte ich zu Ende des Kurses, dass ich nicht in der Lage war, wirklich die Parametrische Projekte umzusetzen von denen ich träumte. Zum einem aus dem Grund, dass diese sehr viel fortgeschrittenere Kenntnisse benötigten, als ich zu dem Zeitpunkt hatte. Zum anderen merkte ich das Javascript nicht die geeignete Umgebung war um dies zu tun. Im Nachhinein ärgerte ich mich ein wenig, dass ich mich nicht mit visual Coding in Blender auseinander gesetzt habe, da die Wirkungsweisen und Funktionen komplett die selben sind wie in Javascript. 

Alles in allem bin ich sehr froh den Kurs gemacht zu haben, da ich durch ihn viele Funktionsweisen von Parametric Design kennengelernt habe, die ich in Zukunft definitiv in unterschiedlichen Umgebungen anwenden werde.

Eine weitere Sache die mir nach dem Kurs bewusst wurde, ist sich auf ein Projekt statt auf mehrere zu konzentrieren. Auch wenn es man es der Dokumentation nicht entnehmen kann, arbeitete ich parallel an 2 weiteren Abschlussprojekten. Dadurch entwickelten die einzelnen Projekte jedoch nur eine geringe Tiefe, was dazu führte, dass die beiden anderen Projekte nicht einmal umfangreich genug waren, um sie mit in die Kursdokumentation aufzunehmen.

Dies wird mir beim nächsten mal definitiv nicht passieren.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Keine Angabe

Betreuung

foto: Sebastian Meyer

Entstehungszeitraum

Wintersemester 2021 / 2022