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
Square Expansion
Im Rahmen des Faches Programmiertes Entwerfen 2 entwickelten die Studierenden parametrisierbare Plakatierungen auf Basis einfacher Grundformen.
Das Ergebnis dieses Prozesses ist Square Expansion, eine Reihe von Varianten, mit denen sich das Zusammenspiel von Rauten und Quadraten auf unterschiedliche Weise explorieren lässt.
Durch verschiedene Parameter der Formveränderung entsteht ein Effekt der Expansion in alle Richtungen, der letztlich die Inspiration für den Namen lieferte.
Das Quadrat

Die ersten Stunden dieses Projekts wurden mit Skizzieren verbracht. Ziel war es zunächst, mit einfachen Grundformen zu arbeiten, um ein Gefühl für das Projekt zu entwickeln. Meine Wahl fiel dabei auf die schlichteste Form, die mir in den Sinn kam: das Quadrat.

Die Raute
Dabei zeigte sich, wie viele neue Formen durch die Skalierung einzelner Seiten oder Winkel entstehen können. Von Rechtecken bis hin zu Rauten war vieles vertreten, was die Möglichkeiten einer Komposition aus zwei dieser Formen nahezu unbegrenzt erweiterte.
Um den Überblick nicht erneut zu verlieren, legte ich mich auf eine zweite Form fest, die als Ergänzung zur ersten dienen sollte. Die Raute erwies sich dabei als besonders spannend, da sie zwar ähnlich berechenbar wie ein Quadrat ist, durch ihre unterschiedlichen Winkel jedoch dennoch schnell einen dreidimensionalen Effekt erzeugen kann.
Der nächste Schritt bestand darin, die beiden ausgewählten Formen in Reihen anzuordnen. Viele dieser Reihen wirkten schnell chaotisch oder relativ uninteressant, jedoch kristallisierten sich nach einiger Zeit einige Module heraus, mit denen die Reihen deutlich spannender wurden.

Besonders eine Kombination aus einem Quadrat und zwei daran platzierten Rauten mit derselben Seitenlänge wie das Quadrat hob sich hervor.
Mit diesen Favoriten ging es anschließend in die Flächenbildung. Dafür wurde die Reihe mehrfach dupliziert und untereinander angeordnet. Durch Verschiebungen, Spiegelungen und Skalierungen entstanden dabei die ersten Muster

Auffälligkeiten
Bei der Flächenbildung zeigten sich deutliche Unterschiede zwischen den einzelnen Mustern. Daraus ergaben sich mehrere Kriterien, die für die Erstellung eines interessanten Musters eingehalten werden sollten:
- Es sollen keine neuen Formen entstehen, die weder Quadrat noch Raute sind
- Die einzelnen Reihen sollen nicht voneinander unterscheidbar sein
- Das Muster sollte nicht zu monoton oder repetitiv wirken
Gerade bei den Reihen, die aus der genannten Kombination von Quadrat und Rauten bestanden, entstanden dabei besonders spannende Flächen. Aus dieser Komposition entwickelte sich daraufhin das erste Modul.

Der Quader
Nachdem die Muster genauer untersucht worden waren, bildete sich das erste konkrete Modul heraus, eine Art Quader. Um diesen im Code umzusetzen, wurden die einzelnen Koordinaten mithilfe von Sinus- und Kosinusfunktionen auf exakte Werte berechnet. Daraufhin entstand eine Gruppierung von Formen, die relativ einfach auf das gesamte Canvas wiederholt werden konnte. Durch Rotation und Skalierung dieser Gruppierung entwickelte sich Schritt für Schritt das gewünschte Muster.

Parametrisierung
Um die verschiedenen Parameter umzusetzen, war zunächst viel Experimentieren notwendig. Insbesondere bei der Veränderung der Länge der Rauten traten dabei einige Schwierigkeiten auf.

Farben
Neben den formverändernden Parametern sollte auch die Farbe variierbar sein. Dabei sollten Helligkeit, Sättigung und Farbton jeweils separat angepasst werden können.
Für die Berechnung der Farben wurde das Farbmodell okLCH verwendet, da es genau diese drei Werte bereitstellt und gleichzeitig einen stärkeren Fokus auf die menschliche Wahrnehmung legt. Dadurch werden Farbveränderungen vorhersehbarer als beispielsweise beim RGB-Farbmodell.

Im ersten Entwurf wurden die vier Farben des Musters mit einem festgelegten Unterschied zur ausgewählten Farbe berechnet. Dies wurde jedoch schnell dahingehend geändert, dass über einen Range-Slider der Bereich definiert werden konnte, über den die Farben verteilt sind. In der zweiten Farbvariante sind diese nicht mehr gleichmäßig verteilt, sodass es so scheint als könnte der linke Regler des Range Sliders die eine Gruppe an Quadern verändern, während der rechte Regler die anderen Quader beeinflussen kann.
Anschließend ließ sich auch die Anzahl der Farben festlegen, wobei bis zu sieben verschiedene Farben angezeigt werden konnten. Dieses Grundprinzip wurde mit weiteren Varianten erweitert um den Nutzer:innen verschiedene Möglichkeiten zu geben das Muster zu parametrisieren.
Endergebnis
Magali Wilhelm
BetreuungProf. Hartmut Bohnacker, Benjamin Thomsen
Tags