Inhalt des Kurses
Programmiertes Entwerfen 2 (IG)
Datenvisualisierung: Auseinandersetzung mit Form, Farbe und Ordnungsprinzipien, um Zusammenhänge in größeren Datenmengen sichtbar zu machen. Das Ergebnis ist ein programmierter, interaktiver Prototyp.
Die Daten werden ohne Zuhilfenahme von bildhaften Elementen (Piktogramme, Fotografien, …) interaktiv dargestellt. Alphanumerische Zeichen (Text, Zahlen) sollen so sparsam wie möglich verwendet werden. Umso wichtiger wird es, gezielt Farbe, Form und Position einzusetzen, um
- Mengen sichtbar zu machen,
- Kategorien zu kodieren,
- Gruppen zu bilden,
- Zeitabläufe nachverfolgbar zu machen,
- …
Die Darstellung von Daten zwingt schon an sich zu einer parametrischen Denkweise. D.h. die grafischen Elemente müssen flexibel gedacht werden, so dass sie unterschiedliche Zahlenwerte und Bedeutungen annehmen können. Das Denken in Varianten ist also essenziell. Zudem erlauben unterschiedliche Gesamtdarstellungen neue Einblicke in die Zusammenhänge innerhalb der Daten. Durch Interaktion können weitere Zusammenhänge vom Nutzer entdeckt werden.
Interaktionsgestaltung
Semesterjahr BetreuungProf. Hartmut Bohnacker, Benjamin Thomsen
Diamond Pattern
Im Rahmen dieses Kurses sollten wir mithilfe von Programmierung Parkettierungen erzeugen. Ausgangspunkt war eine einfache Grundform: die gleichseitige Raute, die durch Drehung und Skalierung in der Fläche angeordnet werden kann. Im weiteren Verlauf wurden die Parkettierungen zusätzlich farblich gestaltet, um unterschiedliche visuelle Wirkungen zu erzeugen.
Skizzen
Zu Beginn des Gestaltungsprojekts setzten wir uns intensiv mit unseren Grundformen auseinander und untersuchten, wie zwei diese zueinander stehen können. Anschließend verschoben, rotierten und spiegelten wir die Formen, um möglichst viele unterschiedliche Relationen zu erzeugen. Eine gleichmäßige Skalierung war ebenfalls erlaubt, doch ich entschied mich bewusst dafür, die gleichseitige Grundform beizubehalten.

Erste Reihungen
Daraufhin ging es darum, von einzelnen Reihungen in die Fläche zu denken. Bei der gleichseitigen Raute stellte sich für mich schnell die Frage, wie man die Aneinanderreihungen in vertikaler und horizontaler Richtung spannend und innovativ gestalten kann. Das reine Aneinandersetzen an den Spitzen oder entlang der gesamten Kante erschien mir wenig reizvoll. Deshalb experimentierte ich mit dynamischeren Anordnungen und kam zu der Erkenntnis, dass eine abwechselnde Verschiebung der einzelnen Formen sowie der gesamten Reihen in der horizontalen Ebene ein deutlich interessanteres Gesamtbild erzeugt. Dabei entstanden viele Hohlräume, die ich im späteren Prozess gezielt genutzt habe.



Programmierte Umsetzung
Für die programmierte Umsetzung habe ich zunächst meine bevorzugte Parkettierungsvariante im ersten Schritt teilweise „hardcodiert“, um ein Gefühl für den Aufbau zu bekommen. Das bedeutet, dass einige Werte direkt in den Code geschrieben wurden, statt sie flexibel zu generieren. Anschließend brachte ich diese Formen in Reihung, um das gesamte Feld zu füllen.


Finale Parkettierung
Da mich meine erste Vorwahl noch nicht zufriedenstellte, probierte ich weitere Varianten aus und entschied mich schließlich für diese Parkettierung.
Der Aufbau dieser Parkettierung funktioniert folgendermaßen: Zunächst wird an einer seitlichen Ecke eine Reihe von Rauten aneinandergereiht, wobei jede zweite Raute um einen bestimmten Wert nach oben verschoben wird. Danach wird die gesamte Reihe nach links versetzt, sodass jede Form an der benachbarten ansetzt und ein „Hoch-Runter“-Effekt entsteht. Die nächste Raute setzt dabei immer um die Hälfte der vorherigen an. Um die gewünschte Fläche zu erzeugen, wird dieselbe Reihung an den unteren Eckpunkten der Rauten angesetzt. Anschließend wird der gesamte Satz der Reihung erneut nach links verschoben und so weit nach oben gesetzt, dass alle Formen sich berühren. Eine weitere Reihung dieses Musters wird dann versetzt unter die vorherige gesetzt.

Im nächsten Schritt überlegte ich, welche farbliche Stimmung ich im Pattern erzeugen möchte. Dabei entstanden mehrere Varianten, deren Ziel es war, schrittweise mehr Farboptionen einzubringen und einen Effekt zu erzeugen, der zunächst simpel wirkt, sich dann aber zu komplexeren Farbwirbeln entwickelt. Am Ende entschied ich mich für die ersten drei Farbwechsel.

Bei der Farbwahl der einzelnen Varianten ließ ich mich bewusst von traditionellen wie auch modernen afrikanischen Stoffmustern inspirieren. Dort sieht man sehr deutlich, dass Muster und Farben immer Hand in Hand gehen und erst im Zusammenspiel ihre volle Wirkung entfalten — genau wie in meinen Beispielen.

Prof. Hartmut Bohnacker, Benjamin Thomsen
TagsProgrammiersprache VIBE-Coding Code Entwicklungsprozess Farbe JavaScript