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.
Zu Beginn des Gestaltungsprozesses diente das Trapez als primäre Ausgangsform. Durch die Modifikation eines Eckpunktes eines rechtwinkligen Trapezes wurde dieses in eine spezifische Drachenform mit integriertem rechten Winkel überführt. Diese Geometrie wurde als Grundmodul definiert, deren Eignung zur Parkettierung unmittelbar durch erste Zweieranordnungen erprobt wurde.
Grundmodul
Aus der Grundform habe ich verschiedene, komplexere Anordnungen entwickelt. Das finale Modul habe ich ausgewählt, weil die Drachenformen darin eine kreisförmige Struktur bilden, die perfekt in sich aufgeht und eine geschlossene Form ergibt.
Berechnungen
Da das Grundmodul auf einer kreisförmigen Anordnung und einem rechten Winkel in der Grundform basiert, sind die geometrischen Freiheiten begrenzt: Damit die Form exakt schließt, muss ein präzises Verhältnis zwischen den kurzen und langen Seiten des Drachens sowie eine spezifische Winkelgrößen eingehalten werden. Für die Umsetzung im Code habe ich die kurzen Seiten auf eine Länge von 50 Einheiten festgelegt. Auf Basis dieses Fixpunktes wurden alle weiteren Seitenlängen berechnet, um eine saubere und fehlerfreie programmierte Geometrie zu gewährleisten.
Modul-Anordnung
Um eine flächendeckende Parkettierung zu erzeugen, habe ich verschiedene Möglichkeiten der Vervielfältigung und Anordnung des Grundmoduls getestet. Die finale Anordnung habe ich gewählt, weil das ursprüngliche Modul darin optisch am stärksten in den Hintergrund tritt. Dadurch entsteht ein neues, komplexeres Gesamtbild, bei dem die individuelle Form zugunsten des übergreifenden Musters in den Hintergrund rückt.
Parametrisierung 1
Im nächsten Schritt stand die Implementierung der interaktiven Steuerung an. Hierfür habe ich analysiert, welche geometrischen Eigenschaften des Moduls sinnvoll durch Parameter beeinflussbar sind. Als ersten Ansatz wählte ich die Variation der gedachten Drachen-Achse: Dabei lässt sich sowohl die Position als auch die Breite der Achse interaktiv anpassen.
Pattern 1: Dragon Axis
Aus dieser ersten Parametrisierung entstand „Dragon Axis“. Das Pattern wird über zwei separate Regler gesteuert, mit denen die Position sowie die Breite der Drachen-Achse unabhängig voneinander verändert werden können, wodurch sich die visuelle Gewichtung des Musters direkt beeinflussen lässt.
Parametrisierung 2
Das Ziel für den nächsten Schritt war eine automatische Anpassung der Achsenbreite. Die Herausforderung bestand darin, die Breite so zu steuern, dass sich die Zwischenräume bei einer Verschiebung der Achsenposition stets schließen. Nach einer Phase der Erprobung zeigte sich, dass eine Kreisfunktion die ideale mathematische Grundlage für diese dynamische Anpassung bietet.
Pattern 2: Magnetic Slider
Bei diesem Pattern reduziert sich die Steuerung auf einen einzigen Slider. Die Breite der Achse wird hierbei automatisch in Abhängigkeit von ihrer Position berechnet. Dadurch bleibt das Muster immer geschlossen, was einen flüssigeren und visuell interessanteren Effekt erzeugt.
Parametrisierung 3
Für die dritte Variante habe ich die beiden äußeren Punkte des Drachens in Richtung der Mitte verschoben, um die Gesamtlänge des Moduls variabel zu gestalten. Diese geometrische Verkürzung verändert das Erscheinungsbild der Parkettierung grundlegend.
Pattern 3: Mosaik Pattern
Durch das Verkürzen der Drachenlängen entstehen Abstände zwischen den Modulen, wodurch sich diese nicht mehr berühren. Es bildet sich eine Mosaik-Optik, die durch die Begrenzung der Regler gezielt unterstützt wird: Da die Parameter so eingestellt sind, dass die Drachen in keinem Zustand eine Verbindung eingehen, bleibt der isolierte Charakter der einzelnen Elemente erhalten.
Parametrisierung 4
Um das fragmentarische Erscheinungsbild des vorherigen Mosaiks aufzubrechen, lag der Fokus nun auf einer flächendeckenden Verdichtung. Hierfür habe ich die Dreiecksflächen innerhalb der Module ausgefüllt und zusätzlich unterteilt. Zudem habe ich die Zwischenräume, die durch die Variation der Achsenbreite entstehen, farblich hervorgehoben und in das Gesamtbild integriert.
Pattern 4: Dimensional Pattern
Dieses Pattern zeichnet sich durch eine starke 3D-Wirkung aus. Durch die Unterteilung der Flächen und die bewusste Füllung der Zwischenräume entstehen komplexe räumliche Eindrücke. Die Interaktion mit den Reglern verändert diese Perspektiven dynamisch, wodurch sich die Wirkung des Raumes stetig wandelt.
Parametrisierung 5
Um die Komplexität des Musters weiter zu steigern, wurden die bestehenden Flächen in verschiedene Farbfacetten unterteilt. Das Prinzip beruht auf zwei Ebenen: einer statischen Drachenform im Hintergrund, die ihre Breite beibehält, und einer darüberliegenden, variablen Form. Durch die zusätzliche Unterteilung der Drachen in kleinere Dreiecksflächen entstehen bei der Manipulation der Breitenparameter komplexe Farbabstufungen.
Pattern 5: Shades of Color
Dieses Pattern erzeugt völlig neue visuelle Eindrücke. Da die Drachenformen in feine Dreiecke zerlegt sind, führen Anpassungen der Regler dazu, dass sich die Farbnuancen stetig verschieben. Durch das Zusammenspiel der variablen Ebenen und der feinen Unterteilungen entsteht eine dynamische Farbtiefe, die weit über das ursprüngliche Muster hinausgeht.
Farbgebung
Die Farbgestaltung aller Patterns basiert auf dem Oklch-Farbraum. Um ein harmonisches Gesamtbild zu erzielen, kommen analoge Farbharmonien zum Einsatz, bei denen die Hue-Werte in kleinen, gleichmäßigen Schritten zueinander gestaffelt sind. Ergänzt wird diese Anordnung durch eine gezielte Abstufung in der Helligkeit. Zusätzlich verfügt jedes Pattern über einen zentralen Farbregler, mit dem sich der Hue-Ausgangspunkt verschieben lässt, um den gesamten Farbtrend der jeweiligen Komposition interaktiv anzupassen.