Hausaufgaben
Analyse des Card-based Layouts
Als erste Übung habe ich das Card-based Layout der Booking-App analysiert. Dabei habe ich untersucht, wie verschiedene Elemente angeordnet sind und welchen visuellen Regeln sie folgen.
Die Aufgabe hat gezeigt, wie bestehende Designs in einzelne Regeln und Abhängigkeiten zerlegt werden können. Dieses Prinzip war später auch für mein eigenes Projekt wichtig.
Grundlagen des Programmierens
In der ersten Hälfte des Semesters wurden die Grundlagen des Programmierens mit JavaScript und p5.js behandelt. Dazu gehörten unter anderem Formen, Variablen, Arrays, Schleifen, Transformationen und die Arbeit mit Parametern.
Ein Teil der Übungen beschäftigte sich mit interaktiven Elementen wie Slidern. Dadurch konnten verschiedene Parameter eines Designs direkt verändert werden.
Danach wurden diese Grundlagen erweitert, indem Zufallswerte und mehrere Parameter kombiniert wurden, um automatisch verschiedene Varianten eines Designs zu erzeugen und zu speichern.
Weitere Aufgaben beschäftigten sich mit der Verarbeitung von Bildern und Pixelinformationen. Dabei wurden aus den Informationen eines Bildes neue grafische Elemente und Animationen erzeugt.
Außerdem wurde die Arbeit mit externen p5.js-Libraries eingeführt. Dabei wurden vorhandene Funktionen und Pattern genutzt, um eigene generative Kompositionen zu erstellen.
Idee des Abschlussprojekts
Die Idee für mein Abschlussprojekt entstand aus meinem Interesse an botanischen Illustrationen. Besonders interessant fand ich die Formen von Pilzen, weil sie gleichzeitig natürlich und ungewöhnlich wirken können. Daraus entstand der Wunsch, einen eigenen kleinen „magischen Wald“ zu gestalten und diese Idee mit generativem Design zu verbinden.
Ich wollte die Pilze nicht einfach als fertige Illustrationen zeichnen, sondern herausfinden, wie sie mit Hilfe von Code entstehen können und wie sich ihre Form und Anordnung durch verschiedene Parameter verändern lassen. So entstand die Idee für einen interaktiven Wallpaper-Generator, der immer wieder neue Varianten erzeugen kann.
Sketch
Als ersten Schritt habe ich die grundlegende visuelle Idee in einem Sketch festgehalten. Dabei habe ich verschiedene Pilzformen, Größen und Anordnungen ausprobiert. Besonders wichtig war für mich, zu überlegen, welche Funktionen der Generator haben soll und welche Parameter die Nutzer später selbst verändern können.
Erste Umsetzung
Nach dem ersten Sketch begann die Umsetzung mit p5.js. Dabei entschied ich mich, mit zwei unterschiedlichen Pilztypen zu arbeiten, um mehr Variation in das Muster zu bringen.
Für die Umsetzung gab es verschiedene Möglichkeiten, zum Beispiel fertige Grafiken zu verwenden, die Pilze selbst in einem Grafikprogramm zu zeichnen oder sie mit Hilfe einer Library zu erstellen. Diese Varianten wären jedoch nur begrenzt parametrisch veränderbar gewesen. Da die Veränderbarkeit der Formen ein wichtiger Teil meines Projekts war, entschied ich mich dafür, die Pilze direkt mit Code zu erzeugen.
Zunächst wurden die grundlegenden Formen erstellt und ihre Position, Größe und Anordnung über den Code gesteuert. Danach wurden beide Pilztypen schrittweise weiterentwickelt und angepasst.
Erste Präsentation
Bei der ersten Präsentation war bereits eine erste funktionierende Version des Generators vorhanden. Die Grundidee, die beiden Pilztypen und das Interface waren schon umgesetzt.
Eine der größten Herausforderungen zeigte sich bei der Form der Pilze. In dieser ersten Version wirkten sie noch sehr geometrisch und wenig natürlich. Deshalb wurde die Entwicklung der Pilzformen zu einem wichtigen Teil des weiteren Prozesses.
Verbesserungen
Nach der ersten Präsentation wurde vor allem die Gestaltung der Pilze weiterentwickelt. Ziel war es, die Formen organischer wirken zu lassen und gleichzeitig die parametrische Veränderbarkeit beizubehalten.
Außerdem wurde das Interface um die Möglichkeit erweitert, zwischen Single Tile und Repeat Preview 3×3 zu wechseln. Dadurch kann direkt überprüft werden, wie das Muster bei der Wiederholung wirkt und ob die Übergänge zwischen den einzelnen Kacheln funktionieren.
Code-Walkthrough
Parameter
Die Werte aus dem Interface werden direkt für die Generierung verwendet. Die Slider bestimmen zum Beispiel die Anzahl und Größe der Pilze. Zusätzlich sorgen Zufallswerte dafür, dass die einzelnen Pilze unterschiedlich aussehen.
Erzeugung der Pilzformen
Im Code werden zwei unterschiedliche Pilztypen über eigene Funktionen erzeugt. Die Form der Pilze entsteht aus geometrischen Berechnungen, Linien und Kurven. Parameter wie die Höhe, die Form der Kappe und die zufällige Verzerrung beeinflussen dabei das Aussehen jedes Pilzes.
Seamless Pattern
Das Wallpaper basiert auf einer einzelnen 420 × 420 Pixel großen Kachel. Elemente, die am Rand der Kachel liegen oder darüber hinausgehen, werden an den gegenüberliegenden Seiten erneut gezeichnet. Anschließend wird die Kachel über die gesamte Fläche wiederholt.
Dadurch entsteht ein nahtloses Muster, das auch mehrfach nebeneinander und untereinander verwendet werden kann.
Mausinteraktion
Die Pilze und Sporen reagieren auf die Position der Maus. Befindet sich der Cursor in ihrer Nähe, werden sie leicht von ihm weggedrückt. Über lerp() wird die Bewegung geglättet, sodass sich beide Elemente anschließend langsam wieder in ihre ursprüngliche Position zurückbewegen.
Finales Projekt
Im fertigen Projekt ist ein interaktiver Wallpaper-Generator für einen magischen Wald entstanden. Die Pilze werden vollständig mit Code erzeugt und in zwei unterschiedlichen Formen dargestellt. Durch verschiedene Parameter können unter anderem ihre Anzahl, Höhe, Kappenform, der Glow und die Anzahl der Sporen verändert werden. Zusätzlich kann die Hintergrundfarbe frei gewählt werden und das fertige Wallpaper als PNG gespeichert werden. Dadurch entsteht bei jeder Kombination ein neues Erscheinungsbild.
Das Wallpaper basiert auf einer nahtlos wiederholbaren Kachel und kann als einzelnes Tile oder als 3×3-Wiederholung angezeigt werden. Zusätzlich reagieren die Pilze und Sporen auf die Bewegung der Maus und bewegen sich bei einer Annäherung leicht vom Cursor weg. So verbindet das Projekt generative Gestaltung, parametrische Veränderungen und eine kleine interaktive Komponente.
GitHub Repository: https://github.com/JanaBulavska/magical-forest-wallpaper
Live Demo: https://janabulavska.github.io/magical-forest-wallpaper/
Der vollständige Code wurde zusätzlich als ZIP-Datei an die Dokumentation angehängt.
Fazit
Ich bin mit dem Ergebnis und der Entwicklung meines Projekts sehr zufrieden. Der Kurs war für mich besonders hilfreich, da ich vor Beginn nur wenig Erfahrung mit Programmierung hatte. Durch die schrittweise Herangehensweise, die Möglichkeit, KI als Unterstützung zu nutzen, und die Erklärungen und Videos auf der Parametric-Design-Seite ( https://parametric-design.fh-potsdam.de ) konnte ich die Aufgaben besser verstehen und mich beim Programmieren sicherer fühlen.
Das Feedback des Dozenten war ebenfalls sehr hilfreich und hat mich bei der Weiterentwicklung meines Projekts unterstützt. Gleichzeitig war es interessant, die Projekte der anderen Teilnehmer zu sehen und zu erleben, wie unterschiedlich die Ergebnisse trotz ähnlicher Grundlagen sein können.
Ich bin mir sicher, dass ich die im Kurs erworbenen Kenntnisse und Fähigkeiten auch in meinen zukünftigen Projekten weiter nutzen und vertiefen werde.
