01 / Idee

Im Kurs sind bei mir drei Tools entstanden, mit denen ich weitergearbeitet habe: Parametric Voronoi, Animated Voronoi und Magnet Poles. Alle drei erzeugen organische Strukturen, und bei allen lässt sich über Parameter steuern, wie das Ergebnis aussieht.

Am Ende wollte ich die Tools an einem Ort zusammenbringen. Daraus ist eine Galerie geworden, in der 100 generierte Bilder auf einer großen Fläche liegen, die man mit Maus oder Trackpad in alle Richtungen verschieben kann. Klickt man ein Bild an, öffnet es sich groß, zusammen mit den Parametern, mit denen es entstanden ist. Von dort kommt man direkt ins Tool und kann mit genau diesen Einstellungen weiterspielen.

Neben den drei Kurs-Tools sind auch Pattern Grid und Scrambled Tiles in der Galerie. Das sind zwei ältere Creative-Coding-Projekte von mir, die ich in Abschnitt 7 kurz anreiße.

Ihr könnt euch gerne durch die tools durch probieren, die Galerie findet ihr unter: parametric-gallery.netlify.app.

02 / Wie ich zu Voronoi kam

Creative Coding und parametrisches Design

Den Kurs habe ich vor allem wegen Tim Rodenbröker gewählt. Auf seine Videos zu p5.js bin ich vor etwa zwei Jahren gestoßen, und seitdem hat mich Creative Coding und auch parametrisches Design nicht mehr losgelassen. Aus dieser Zeit stammen auch die beiden älteren Tools in der Galerie.

Am parametrischen Design fasziniert mich vor allem der explorative und iterative Ansatz. Man verändert nur kleinste Parameter und bekommt dadurch etliche unterschiedliche Ergebnisse. Am Anfang fand ich es aber schwer, das zu balancieren: Wie viel überlasse ich dem Zufall und dem Experimentieren, und wie viel entscheide ich als Designer selbst? Die Grenze dort zu finden, finde ich ehrlich gesagt immer noch schwer.

“As I see it, us creatives being able now to create our own tools is a huge step forward … or, looking at people like Müller-Brockmann, back to the freedom we had.” – Tim Rodenbröker

Voronoi & Chaikin's algorithm

Ein Voronoi-Diagramm entsteht aus ein paar Punkten auf einer Fläche. Jeder Punkt bekommt den Bereich, der näher an ihm liegt als an allen anderen Punkten. So teilt sich die Fläche in Zellen auf, die ein bisschen an Pflanzenzellen oder getrockneten Schlamm erinnern.

Das Organische an Voronoi fand ich faszinierend. Angefangen hat es mit einer Hausaufgabe, bei der wir mit einem Code unserer Wahl 50 Varianten generieren sollten. Ich habe mich für Voronoi entschieden und mir selbst vorgenommen, mit Slidern zu arbeiten und das Ganze organisch wirken zu lassen. Ein paar Inspos dafür hatte ich auf Instagram gesehen, wo genau, weiß ich leider nicht mehr.

Damit die Zellen nicht so eckig bleiben, nutze ich den Chaikin-Algorithmus. Der schneidet an jeder Ecke ein Stück ab, und wenn man das ein paar Mal wiederholt, werden die Zellen rund. Genau das sieht man im GIF.

Chaikin im Code

Für jede Kante zwischen zwei Punkten setzt die Funktion zwei neue Punkte, einen kurz nach dem Anfang und einen kurz vor dem Ende der Kante. Die alte Ecke fällt dabei weg. Bei jeder Wiederholung verdoppelt sich die Anzahl der Punkte, und die Form wird runder.

03 / Parametric Voronoi

Parametric Voronoi ist das erste der beiden Voronoi-Tools. Statt eines einzelnen Diagramms legt es mehrere Ebenen übereinander. Jede Ebene hat ihre eigenen Punkte, und nach hinten werden die Linien dünner und durchsichtiger. Dadurch bekommt das Bild ein bisschen Tiefe.

Über die Slider lässt sich einstellen, wie viele Ebenen es gibt, wie viele Punkte vorne und hinten liegen und wie dick und durchsichtig die Linien sind. Mit „Inset“ schrumpfen die Zellen zur Mitte hin, sodass Lücken zwischen ihnen entstehen. „Smoothing“ ist der Chaikin-Algorithmus aus Abschnitt 2, und „Margin“ legt den Rand fest.

Man kann auch direkt ins Bild klicken, um neue Punkte zu setzen. Hält man die Maus gedrückt, kommen laufend weitere dazu. Wenn die Punkte über „Show Seeds“ eingeblendet sind, kann man sie außerdem greifen und verschieben. Mit „Randomize“ bekommen alle Slider zufällige Werte, und mit der Taste S speichert man das Bild.

Die Zellen selbst berechnet das Tool mit der Library d3-delaunay.

04 / Animated Voronoi

Bei Animated Voronoi ging es mir darum zu zeigen, was passiert, wenn sich die Seeds bewegen, und wie sich das auf das Muster auswirkt. Jeder Punkt wandert langsam in eine Richtung, die sich immer wieder leicht ändert. Kommen sich zwei Punkte zu nah, weichen sie seitlich aneinander vorbei, und vom Rand werden sie zurück in die Mitte gedrückt. Die Zellen verschieben sich dadurch die ganze Zeit mit.

Ein einfaches Voronoi-Pattern fand ich dafür etwas zu langweilig, deshalb habe ich mit Wiederholung gearbeitet. Jede Zelle wird viele Male gezeichnet, jedes Mal etwas kleiner und zum eigenen Punkt hin verschoben. Die inneren Ringe werden dabei dünner und blasser. So entstehen diese Tunnel, die sich mit den Punkten bewegen.

Die Wiederholung entsteht in diesem Nested Loop, also einer Schleife in einer Schleife. Die äußere geht jeden Seed durch und holt sich die passende Voronoi-Zelle. Die innere zeichnet diese Zelle dann immer wieder neu, so oft, wie bei Rings eingestellt ist. Bei jedem Durchgang wird die Größe mit Ring Scale multipliziert und die Punkte der Zelle rücken näher an den Seed. Bei 0.9 ist jeder Ring also 10 % kleiner als der davor. Gleichzeitig werden die Linien dünner und blasser.

Über Slider können hier wieder verschiedene Parameter verändert werden: wie viele Punkte und Ringe es gibt, wie stark jeder Ring schrumpft und wie dick die Linien sind. Mit einem Klick ins Bild kommt außerdem ein neuer Punkt dazu.

05 / Magnet Poles

Ähnlich wie bei Voronoi habe ich nach Mustern gesucht, die auf mathematischen Grundlagen beruhen, aber trotzdem organisch aussehen. Dabei bin ich auf Feldlinien gestoßen, wie man sie von Magneten kennt.

Auf der Fläche liegen ein paar Pole, abwechselnd plus und minus. Von einem gleichmäßigen Raster aus startet an jedem Punkt eine Linie, die dem Magnetfeld Schritt für Schritt folgt, bis sie auf einen Pol trifft oder den Rand erreicht. So entstehen die geschwungenen Linien, die sich um die Pole bündeln.

Glatt vs. p5.brush

Die Linien zeichne ich mit der Library p5.brush. Die hatte ich vorher schon in einem kleinen anderen Projekt benutzt (kleine gescribblete parametrische Caterpillars). Ohne wirkten die Pole noch irgendwie zu technisch und glattgelutscht. Mit p5.brush wollte ich dem Ganzen etwas Noise und Chaos verleihen, und dadurch sind teilweise echt wilde Scribbles entstanden, einfach durch zufällige Parameterkombinationen.

Random scribbles

Um herauszufinden, wo ich die Grenzen für die zufälligen Werte setze, habe ich viel ausprobiert und mir die Ergebnisse direkt im Code notiert.

Durch p5.brush entstehen unglaublich viele neue Punkte, was das Ganze sehr rechenintensiv macht. Deshalb habe ich mich gegen Slider entschieden, weil die bei jeder Veränderung neu rendern müssten. Stattdessen steuert man das Tool über Tasten. Die Leertaste verteilt die Pole neu, R würfelt zusätzlich die Parameter, und mit den Pfeiltasten verändert man den Rand. Das entschleunigt alles ein bisschen und führt durch das Randomize gleichzeitig zu komplett unvorhersehbaren Ergebnissen.

Selbst beeinflussen kann man trotzdem einiges. Mit einem Klick auf die Fläche setzt man einen neuen Pol, ein Klick auf einen bestehenden Pol entfernt ihn wieder. Verschieben geht hier nicht, das wäre zu rechenintensiv. Um Performance zu sparen, werden außerdem die Punkte der Scribbles reduziert, solange die Pole angezeigt werden.

06 / Die Galerie

Vom Tool zum Bild

Damit die Galerie funktioniert, musste jedes Tool erst mal lernen, seine Parameter aus der URL zu lesen. Dafür hat jedes Tool eine kleine Datei, in der alle Parameter mit ihrem Namen und ihren Grenzen stehen. Dazu gehört auch ein Seed, der den Zufall festlegt. Mit dem gleichen Seed und den gleichen Werten sieht ein Bild also jedes Mal exakt gleich aus.

Die Bilder selbst erzeugt ein Skript. Es öffnet jedes Tool im Hintergrund in einem Browser ohne Fenster, würfelt die Parameter, wartet, bis das Bild fertig gezeichnet ist, und macht dann einen Screenshot. Pro Tool passiert das 20 Mal, am Ende sind es 100 Bilder. Bei Animated Voronoi nimmt das Skript zusätzlich eine kurze Schleife als Video auf, damit sich die Bilder in der Galerie auch bewegen. Ich habe das Skript einmal laufen lassen, seitdem bleiben die Bilder so bestehen und werden nicht bei jedem Besuch neu erzeugt.

Canvas und Lightbox

Als Vorbild für die Galerie hatte ich das Framer-Template „Infinite Canvas“ von Framer University. Die Bilder liegen auf einer Fläche, die sich endlos wiederholt, sodass man in jede Richtung weiterziehen kann, ohne an ein Ende zu kommen.

Klickt man ein Bild an, öffnet es sich groß, daneben stehen alle Parameter, mit denen es entstanden ist. Bei Animated Voronoi lädt an dieser Stelle das echte Tool und läuft live weiter. Über „Open in …“ kommt man dann ins Tool und kann mit genau diesen Einstellungen weiterspielen.

Hell und Dunkel

Oben rechts kann man zwischen hellem und dunklem Modus wechseln. Das war eine kleine Spielerei, die dank Coding Agents schnell dazugekommen ist. Die Tools übernehmen die Einstellung aus der Galerie. Ich selbst bevorzuge aber den dunklen Modus. Der helle invertiert momentan einfach nur die Farben und wirkt dadurch noch nicht ganz stimmig.

Muss ich eventuell händisch nochmal in die Farbe selection gehen.

07 / Ältere Projekte in der Galerie

Neben den drei Kurs-Tools sind in der Galerie auch zwei ältere Creative-Coding-Projekte von mir. Die sind entstanden, nachdem ich auf die Videos von Tim Rodenbröker gestoßen bin, also schon vor dem Kurs. Ich will die Galerie weiter nutzen und nach und nach mit kleinen Tools füllen, deshalb dachte ich, die alten passen da auch rein.

Geschrieben habe ich die beiden teils selbst, teils mit ChatGPT. Das war aber zu einer Zeit, in der das noch ganz schön mühselig war und habe es daher hauptsächlich für CSS-Änderungen Erklärungen und zum Bugfixen genutzt.

Pattern Grid

Pattern Grid füllt ein Raster mit einfachen Formen wie Quadraten, Dreiecken und Kreisen. Über Slider verändert man, wie dicht das Raster ist, wie groß die Abstände sind und wie viele Felder leer bleiben. Mir war hier vor allem das Ausprobieren wichtig, deshalb habe ich mich bewusst gegen beschriftete Slider entschieden. Was welcher Regler macht, findet man beim Rumspielen selbst heraus.

Scrambled Tiles

Scrambled Tiles nimmt ein Foto oder das Webcam-Bild, rastert es mit einem Dithering-Effekt in Schwarz-Weiß und zerlegt es in Kacheln. Einzelne Bereiche kann man auswählen und durchmischen, sodass das Bild in sich verrutscht. Die Fotos in der Galerie stammen von Cosmos Public Work, einer Suchmaschine für gemeinfreie Bilder. Die Seite war übrigens auch eine Inspiration für den endlosen Canvas der Galerie.

08 / Arbeit mit KI

Im Kurs ging es nicht darum, selbst coden zu lernen. Es ging darum, Code so weit lesen zu können, dass man gut mit Coding Agents arbeiten kann. Also wie ich Sachen beschreibe und mein Verständnis von Code nutze, damit am Ende das rauskommt, was ich mir vorstelle.

Den Code für alle drei Kurs-Tools und die Galerie habe ich mit Claude geschrieben. Ich habe dabei immer versucht, vorher alles genau genug zu planen und zu strukturieren. Für die Galerie habe ich eine ausführliche Md file geschrieben und an Claude Code übergeben. Der erste Schritt darin war kein Code, sondern eine Bestandsaufnahme: Claude sollte sich erst die vorhandenen Tools anschauen und berichten, bevor irgendetwas gebaut wird.

Eine feste Vorgabe war, dass die Parameter immer zugänglich bleiben. So konnte ich selbst im Code rumprobieren und kleinere Anpassungen machen, zum Beispiel die Grenzen für die Zufallswerte bei Magnet Poles. Manche Ideen kamen auch ganz von mir, wie p5.brush für die Scribbles. Andere Sachen wie der Hell- und Dunkelmodus sind eher nebenbei entstanden, weil sie mit Coding Agents so schnell umgesetzt sind.

09 / Fazit

Ich hatte unglaublich viel Spaß daran, rumzuexperimentieren und auszuprobieren. Ohne KI hätte ich viele Sachen einfach gar nicht erst umsetzen können. Trotzdem bin ich froh, dass ich immer wieder die Möglichkeit hatte, eigene Anpassungen zu machen und Entscheidungen selbst zu treffen.

Ich glaube, der neue Ansatz des Kurses ist richtig. Ich hätte mir aber noch mehr Coding-Praxis gewünscht. Den Kurs bei Sebastian Meier kann ich trotzdem jedem empfehlen und würde ihn auch nochmal belegen.

Die Galerie will ich weiter nutzen und nach und nach mit neuen kleinen Tools füllen. Das Potenzial von parametrischem Design ist für mich noch längst nicht ausgeschöpft.

Wenn ihr es bis hier unten geschafft habt, hier nochmal die Links zur Galerie und zu den einzelnen Tools:

Galerie

Parametric Voronoi

Animated Voronoi

Magnet Poles

Pattern Grid

Scrambled Tiles