Die Dokumentation kann man auch mit mehr Interaktivität auf http://julianstahnke.com/fhp/ia/anschauen. Sie funktioniert im Moment nur in Safari 4 und Firefox 3.6.

1. Matrix

Erste Aufgabe war die Erstellung einer 10×10 Felder großen Matrix, in der die folgenden visuellen Variablen kombiniert werden sollten: Punkt, Linie, Kurve, Umriss, Kontrast, Progression, Schraffur, Struktur, Unordnung und Prägnanz.

matrix_skizze.jpg

Im zweiten Teil der Aufgabe sollte die Darstellung der Matrix bzw. einer Reihe durch die Verwendung von Fotos statt Illustrationen verändert werden. Dazu machte ich nach einigen erfolglosen Versuchen in Küche und Bad einen Spaziergang durch meine Nachbarschaft, um Zäune zu fotografieren.

matrix.png
fotomatrix.jpg

2. Referat

Die zweite Aufgabe war es, ein Referat über eine bekannte und für den Kurs relevante Persönlichkeit halten. Dazu gab es eine Liste mit Vorschlägen. Ich entschied mich für R. Buckminster Fuller, da ich öfters seinen Namen gehört hatte und etwas mehr über ihn erfahren wollte.

R. Buckminster Fuller war ein Architekt, Ingenieur und Designer, der von 1895–1983 lebte. Er entwickelte neuartige Häuser und Autos, eine auf Basis eines Polyeders, geodätische Kuppeln und neue geometrische Ansätze. Er machte sich viele Gedanken über die Zukunft der Menschheit und gerechte Verteilung von Ressourcen, die er in mehreren Büchern niederschrieb.

fuller_portrait.jpg

3. Textvisualisierung

Für die dritte Aufgabe sollte ein Text oder dessen Inhalt visualisiert werden. Ich entschloss mich, die Eigenschaften der Zeichen im Text zu visualisieren. Hierzu berechnete ich für jedes Zeichen das Verhältnis der schwarzen und weißen Pixel, die Höhe, Breite und die Fläche.

Dann ordnete ich den Text so an, wie er auch im Buch steht: 60 Zeichen pro Zeile, 30 Zeilen. Für jede Zeile gibt es ein Liniendiagramm, für das die Zeichen die X-Achse bilden. Der Benutzer kann nun auf die Y-Achse und/oder die Transparenz des Diagrammes alle oben genannten Werte legen.

Außerdem besteht die Möglichkeit, sich die Art des Wortes mit verschiedenen Farben anzeigen zu lassen. Da der Benutzer die Anzahl der Zeilen bis auf 600 vergrößern kann, ergeben sich so viele Bilder.

textvisualisierung_3.png

Anwendung zum Herunterladen: Mac | Windows | Linux

4. Prozessvisualisierung

Für die vierte Aufgabe sollte ein beliebiger Prozess möglichst abstrakt visualisiert werden. Meine erste Idee war es, das Schmieren von Nutellabroten mit einer abgewandelten Minard-Grafik zu visualisieren. Letztlich entschied ich mich jedoch dafür, das Anlegen und Abspielen einer Wiedergabeliste in iTunes, WinAmp und dem Windows Media Player vergleichend zu visualisieren.

Als Abstraktion wählte ich die Methode, nur die Eingaben des Benutzers über Maus und Tastatur darzustellen. Im ersten Schritt protokolierte ich alle Mausbewegungen und -klicks, um sie räumlich darzustellen.

Der nächste Schritt war das Abstrahieren der ersten, räumlichen Grafik, in eine lineare Form. Die Reihenfolge und Dauer der Aktionen wird so besser ersichtlich. Die Aktionen des Benutzers sind dabei durch verschiedene Symbole dargestellt.

prozess räumlich.png

Im letzten Schritt wird die lineare Darstellung nach Aktion geordnet. So wird quantitativ ersichtlich, welche und wie viele Aktionen ausgeführt werden müssen, um in den verschiedenen Programmen eine Wiedergabeliste zu erstellen und Abzuspielen.

process_linear.png
process_linear_ordered.png

Die letzten vier Grafiken zeigen das Arbeiten in Illustrator (einen Ausschnitt aus der Erstellung der Matrix in Aufgabe 1) in verschiedenen räumlichen Darstellungsformen; z.B. mit Abweichungen der Mauspfade von den gedachten, optimalen Mauspfaden zwischen zwei Positionen; oder mit den älteren Pfaden langsam verblassend.

Die Programme zum Protokollieren der Mausbewegungen und Erstellen der Grafiken gibt es als Quelltext zum Herunterladen (nur für Mac; Xcode und Processing erforderlich zum Kompilieren und Ausführen).