Algorithmus | Die drei Fragezeichen

In diesem Projekt entwickeln wir einen Algorithmus mit P5.js, der durch die Kombination von Punkten, Linien und Flächen beeindruckende 3D-Sternformen erzeugt. Beginnend mit ersten Skizzen und Entwürfen setzen wir diese in Zeichnungen um und realisieren sie schließlich durch Code, wobei verschiedene dynamische Varianten entstehen, die einzigartige visuelle Effekte und interaktive 3D-Visualisierungen schaffen.

Three Long Lines

Bei diesem bereits vorgegebenen Algorithmus ging es darum, dass wir zu dritt in unserer Gruppe zusammenarbeiten. Jeder sollte für 20 Minuten eine durchgezogene Linie zeichnen, dabei sollte diese sich nie selbst oder eine andere kreuzen. Zu Beginn malte jeder noch für sich und achtete nicht viel auf die Linie der anderen. Doch je mehr Zeit verging, desto weniger Platz war auf dem Papier verfügbar und man kam den anderen immer näher. Dabei musste man immer taktischer vorgehen und auf die anderen aus der Gruppe achten, um möglichst den ganzen Platz auf dem Papier nutzen zu können, ohne dabei eine Linie zu kreuzen.

Shooting Stars

Im Rahmen des Kurses „Programmiertes Entwerfen 1“ entwickelten wir – als Team „Die Drei ???“ – “Shooting Star”, einen Algorithmus, der durch eine Reihe von Regeln ein spannendes, dreidimensionales Bild erzeugt. Indem diese Regeln konsequent befolgt werden, entsteht eine komplexe, dynamische Struktur.
Unser Ansatz basierte darauf, einfache Grundprinzipien schrittweise zu einem interessanten Gesamtbild zu kombinieren. Dabei spielte nicht nur die Abfolge der Regeln eine Rolle, sondern auch die visuelle Wirkung des entstehenden 3D-Gebildes. Das Ergebnis ist ein spannendes Zusammenspiel aus Geometrie, Struktur und Raumwirkung – eine Visualisierung, die ohne den Algorithmus in dieser Form nur schwer nachzuvollziehen wäre.

Algorithmus Umsetzen

Im Kurs „Programmiertes Entwerfen 1“ ließen wir uns von unserem vorherigen Projekt „Shooting Star“ inspirieren. Auf dieser Grundlage entwickelten wir – als Team „Die Drei ???“ – mit ChatGPT und P5.js neue Sketches, die der ursprünglichen Idee ähnelten. Dabei entstanden jedoch immer wieder Variationen, die spannende, eigenständige Ergebnisse hervorbrachten. So konnten wir den Charakter von „Shooting Star“ bewahren und gleichzeitig neue visuelle Möglichkeiten erkunden. Die Sketches sollten außerdem Slider beinhalten, über die man verschiedene Parameter wie Anzahl oder Größe von Objekten verändern kann.

Kaleidoscope

Das Kaleidoscope zeichnet sich durch sein gleichförmiges Muster aus. Dieses Muster wollten wir kombinieren mit unserem Algorithmus und ein Kaleidoskop basierend auf unseren Formen erstellen.

probieren →

Star Snake

Bei der Star Snake wollten wir die Formen genau wie bei unserem “Shooting Stars” Algorithmus aneinanderreihen und sich bewegen lassen. Dabei sollten sich diese ähnlich wie eine Schlange bewegen. Nachdem wir einen Code für eine Linie hatten, welche immer die im Video zu sehende Bewegung ausführt, legten wir den Code für die einzelnen Objekte von unserem “Shooting Stars” darüber, sodass nun diese die Bewegung ausführten. Außerdem sollte die Schlange auch dem Mauszeiger folgen können, mit der Leertaste kann man zwischen den zwei Modi wechseln. Hinzu kamen noch kleine funkelnde Punkte im Hintergrund, um das Gefühl vom Weltall besser zu vermitteln und somit den Raum an den Namen des ersten Projekts anzupassen. Dazu kam dann noch ein Schweif, welchen die Schlange hinter sich herzieht. Bei den Slidern entschieden wir uns dafür, die Länge und Farbe der Schlange anpassen zu können und außerdem, dass man ihr einen Glow-Effekt geben kann.

probieren →

Lichtershow

Das Ergebnis der Lichtershow basiert auf einem ursprünglichen P5.js-Code, der schrittweise angepasst und weiterentwickelt wurde. Durch kontinuierliche Veränderungen und Experimente entstand schließlich dieser faszinierende Sketch, der mit seinen dynamischen Bewegungen und leuchtenden Farben an eine echte Lichtershow erinnert.

probieren →