In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Dokumentation des Kurses »The Shape of a River: Mississippi« bei Prof. Myriel Milicevic (WiSe 20/21)
Unsere Gruppe beschäftigte sich mit der Case Study Mississippi River Basin Atlas von Derek Hoeferlin mit Jess Vanecek, Paul Wu, Chenyu Zhang und Caroline Amstutz. Sie bietet eine Einsicht auf die infrastrukturellen Eingriffe in den Verlauf des Mississippis. Hauptsächlich wird sich dabei auf die Locks & Dams konzentriert. Sie werden fotografisch, infografisch und kartografisch dokumentiert. Neben technischen und geografischen Einblicken wird ebenfalls die administrative Struktur beleuchtet.
Während wir uns vertieft mit der Case Study von Derek beschäftigten, haben wir das Thema der Damminfrastruktur auf River Control verallgemeinert. Dazu entstand folgende Wissenssammlung auf miro, in welcher wir Arten, Ausprägungen, Konsequenzen und Zusammenhänge zwischen verschiedenen infrastrukturellen Maßnahmen betrachtet haben.
Im nächsten Schritt haben wir auf Basis der Recherchearbeit die Beziehungen zwischen verschiedenen Interessengruppen und deren Motive die Flüsse zu kontrollieren im Sinne eines Soziogramms oder Beziehungslandkarte grafisch aufgearbeitet.
Wir haben das Konzept Red delineates Power aus der Case Study referenziert und das Flusssystem als Gestaltungsgrundlage verwendet. Dieser Ansatz sollte sich in unseren weiteren Arbeiten fortsetzen.
1 dam - average length of all dams
1 dt - average time to cross 1 dam (dt: dam time)
1 tx - amount of toxins contained in 1 ccd (cubic centi dam)
1 sed - amount (in tx) of sediment transported in 1 dt
Um den Mississippi besser kennenzulernen und damit auch besser verstehen zu können, haben wir uns via google street view auf die lange Reise des Flusses begeben und ein paar Orte abgeklappert, angefangen bei der Quelle im lake Itaska. Es ist immer wichtig die eigenene Perpektive zu verstehen, gerade wenn es um das mapping größerer Sachverhalte geht. Jede Karte wird von einer bestimmten Perspektive, in einer bestimmten Narrative geschrieben und das, überspitzt dargestellt, haben wir hier versucht zu verdeutlichen. Auf unserer Reise legten wir den Fokus auf die Locks and Dams und es war schnell klar, wie stark beeinflussend diese auf das Bild des Mississippis sind. Es war eine sehr interessante Reise von den Graslandschaften am Anfang, ohne eine Spur von Zivilisation, über die eingedämmten Durchläufe der Schleusen, das beunruhigende Brausen des Flusses, welches fast spürbar war, bis hin zu der Erleichterung, als der Durchbruch in den Golf von Mexiko sich am Horizont erkennbar machte. Es war, als könnte man mit dem Fluss mitfühlen. Sich in ihn hineinversetzen, seine Perspektive annehmen. Auch wenn das ja wohl unmöglich ist. Oder nicht?
Eine der integralen Bestandteile von Glitch Art ist die Wahrnehmung bzw. Veränderung derer. Während der Recherchen und vorherigen Arbeit drängte sich das Bild der unnatürlichen Natur und Diskrepanz in der Perzeption und Rezeption des Mississippis immer mehr auf. Dadurch eignete sich ersteres als Mittel ziemlich gut um letzteres darzustellen. Als Übung entstand folgendes Bild bzw. Animation als spontane Assoziation auf drei Soundbeispiele zum Thema Wahrnehmung des Mississippis.
Der Text stammt aus Crystal Meth in Brandenburg von grim104 und bringt die besagte Diskrepanz und das Unwohlsein in einer durch Menschen beeinflussten, natürlichen Umgebung auf den Punkt: Irgendetwas stimmt hier nicht.
Um den Bezug zu unserer Case Study herzustellen, welche ja ebenfalls auf jene menschlichen Eingriffe eingeht, entstand eine Trilogie namens The UnRiver, in welcher vorheriges Konzept innerhalb eines 360°-Video Kontextes aufgearbeitet und ergänzt wird.
Die Basis bildete Bildmaterial von Google Street View (heruntergeladen mit Street View Download 360), welches mit GIFKR auf verschiedene Art und Weise (z.B. Pixel Sorting, Shifting, Multiplying, JPEG-Compression etc.) geglitcht wurde. Eine zusätzliche Ebene entstand durch die Nutzung eines Object Detection Algorithms (YOLO - You Only Look Once auf Basis von darknet), welcher durch einen sehr geringen Threshold eine Art künstliche, aber falsche Wahrnehmung durch Technologie erzeugt und das Konzept irgendeiner Art von Wahrheit in die Absurdität treibt. Als Inspiration besonders für den letzten Teil diente das Musikvideo zu Squarepushers Terminal Slam.
Nothing here is real.
This is not a river.
But still it is everything.
The human intervention to control the river to their needs has left scars of depremental order. The river was cut off to shorten it. Dams were built to create water supply, electricity and aid navigation. Large portions of the banks were reinforced with concrete mats to stop further meandering, the river's natural behaviour. Levees are restricting its freedom to flow but the river bed was deepend to accomodate the flow of capital.
This change of purpose requires a change of perception.
One to lay bare the structure of deception.
This is not a river but one of the largest invasive engineering projects in the world.
What we see is not really there.
What is there we don't really see.
Here I'm floating on the water
I was standing in the wet
When my breath is getting shorter
My head rests on a concrete bed
Dies ist unser erster Versuch einer Zeitdarstellung des stetigen Auf und Ab von Staudämmen und Fluthöhen. Levee War - Der Krieg der Staudämme.
Bereits die ersten Siedler, die nach Amerika schifften und sich um das heutige New Orleans herum ansiedelten, begannen schnell mit dem Versuch den Mississippi zu begrenzen und seine Flutungen einzudämmen. Was darauf folgte war eine immer tiefer gehende Spirale aus Flutungen, auf die höhere Dämme folgten, auf die wiederum höhere Flutungen folgten und so weiter. Diese Entwicklung war relativ früh absehbar und die Ignoranz dessen, die daraufhin befolgten Fehlentscheidungen und das gegenseitig verstärkende Hochziehen der Dämme sind Teilursachen der Verluste, die heutzutage durch die Überschwemmungen in Kauf zu nehmen sind. Und um die Zusammenhänge dessen verstehen zu können, ist es umso wichtiger sie infografisch festzuhalten.
Eine zweite Form der Zeitdarstellung ergab sich für uns in Form des Joy Division Covers für Unknown Pleasures. Dies funktioniert ergänzend zu der vorherigen Karte in einer etwas humoristischen, aber doch informativen und auch interaktiven Weise. Zuerst sollte dies eher in die Richtung des historischen Flussverlaufes gehen (also jede Zeile ein Zeitpunkt eines Flussabschnittes), doch auf Grund schwierig bis gar nicht zu akquirierender Daten ergab sich das nicht. Daraufhin nutzten wir die Wasserstandsdaten von den US Army Corps of Engineers. Jedes Bild bezieht sich auf einen Ort (von New Madrid flussabwärts bis New Orleans) zwischen den Jahren 2000 und 2020.
Die Bilder wurden mit p5.js erzeugt und sind auch interaktiv erkundbar. Der Sketch zum selber Ausprobieren und der dazugehörige Code sind hier verfügbar.
After every flood higher levees were constructed and the river had less chance to escape onto its natural flood plains. This increased the water levels during extreme weather events which in turn generated the need to build even higher infrastructure for protection. You can see where this is going. That's the reason why the term Infra-Natural Disaster was coined because this conflict is not single-sided but an interaction of systems.
Unser finales Projekt ergab sich bei der Arbeit mit Kartenmaterial von Open Street Map. Uns fielen die sehr intrikaten Strukturen auf, welche sich besonders hinter Dämmen formten und uns an den Rohrschachtest erinnerten. Sie sahen oft sehr bildlich und mythisch aus. Auf dieser Basis wollten wir eine interaktive Karte gestalten, welche Menschen mit jeglicher Art von Beziehung zum Mississippi River Basin die Möglichkeit gibt neue Geschichten zu erfinden oder alte neu zu kontextualisieren und eigene Erfahrungen (z.B. auch von group-emotional events, wie die Blockaden von Pipelines) und Perspektiven darzustellen. Dies ergänzten wir um einen Story-Abschnitt, welcher ein informierendes, kuratiertes Scrollytelling ermöglicht.
So verbanden wir einige kartografische Möglichkeiten in diesem Projekt, wie partizipative, kritische und emotionale Kartografie. Besonders letztere war uns als Kontrast zu Dereks Case Study wichtig, da seine Arbeit eher technisch-analytisch und auf konkrete Informations- und Wissenvermittlung ausgelegt ist.
(Diese Struktur fiel uns mit als erstes ins Auge. Leider stellte sich nach langer Sucherei heraus, dass dies das nördliche Ende vom Toledo Bend Reservoir ist, welches nicht zum MRB gehört.)
Der erste Versuch das Kartenmaterial zu beschaffen, aus dem auch letztendlich, wie oben beschrieben die Idee entstand, fand mit dem blender-osm AddOn statt. Doch eignete sich dies letztendlich nicht ganz so gut für diesen Zweck, weil u.a. die Flächen teilweise falsch gefüllt und Wasserobjekte, die in OSM nur als Linien existieren gar nicht erst geladen wurden.
Der letztendlich genutzte Workflow soll in folgenden Stichpunkten mit den entsprechenden Tools kurz umrissen werden:
Weißes Wasser auf schwarzem Hintergrund wurde ausgewählt um die Gestaltung einer Sternenkarte etwas zu referenzieren, welches den mythischen und assoziativen Aspekt unseres Projekts unterstützt. Zusätzlich haben wir ebenfalls wieder die roten Dämme aus der Case Study übernommen.
Um die allgemeine Usability der Seite zu erhöhen haben wir ein kleines Tutorial eingebaut, in welchem die Hauptfunktionen erklärt werden.
Dazu gehören als Erstes die Navigationsfeature: Zoom, Rotation und die Overview. Dort findet sich eine Übersichtskarte des gesamten MRB, auf welcher zusätzlich die aktuelle Position und bestehende Marker sichtbar sind. Durch eine Klick kann man sich zu dieser Position fliegen lassen.
Zu den Hauptfunktionen gehören natürlich Formen der Partizipation. Dafür gibt es zum Einen die Notes. Dort können eigene Geschichten, Mythen und Erfahrungen schriftlich (auch mit Verwendung von Markdown) an einen Ort festgehalten und darüber hinaus auch ein Bild (z.B. eine Illustration) hochgeladen werden.
Die zweite Möglichkeit sind die Comments. Sie bieten einen sehr direkten Weg der Assoziation und können gut als Ideensammlung für längere Notes genutzt werden und sind oft durchaus unterhaltsam.
Die Stories sind eine etwas informativere, kurierte Variante Geschichten zu erzählen und zu lokalisieren. Sie ermöglichen eine Erzählung über mehrere Orte, welche im Text markiert sind und in Abhängigkeit von der Scroll-Position zeigt die interaktive Karte den aktuellen Marker. Zudem gibt es die Möglichkeit mehr Bilder oder externe Medien, wie YouTube oder Soundcloud einzubinden.
Über die Ebenenkontrolle in der Navigation können die Comments auf der Karte angezeigt oder versteckt werden. Selbiges gilt für alle Story-Marker, durch einen Klick auf einen Marker öffnet sich die dazugehörige Story. Zusätzlich gibt es eine Info-Ebene, wo beispielsweise einige Dämme noch einmal benannt werden. All dies ermöglicht es den Kontext einer Betrachtung zu erweitern.
Neben diesen Hauptfunktionen gibt es noch ein paar kleiner. Dazu gehört, dass der Titel sich alle 90 Sekunden verändert und Mississippi River durch eine von vielen indigenen Namen ersetzt wird (die aktuelle Sprache wird im Tooltip angezeigt). Um es zusätzlich etwas spielerischer zu gestalten haben wir auch mit Carl the Carp ein illustratives Element mit in das Interface integriert, welcher beim Hovern mit der Maus ein paar Fakten und Statements herausblubbert.
Die Basis des Frontends wird durch die interaktive Karte mit Leaflet.js gebildet. Die Wahl fiel auf Leaflet, da es ziemlich einfach zu bedienen, viel benutzt und gut dokumentiert ist und ebenfalls einfach an die Ansprüche angepasst werden kann.
Eine ganze Zeit lang sah die Seite in dem Stil des obigen Screenshots aus: also etwas nerdy. Wir konzentrierten uns anfänglich hauptsächlich darauf die Funktionen zum Funktionieren zu bringen, da es ja sonst keine sind.
Durch das Feedback in einer Zwischenbesprechung kamen wir dann etwas aus dieser technischen Bubble raus um uns mehr dem Interfacedesign zuzuwenden, da dies letztendlich unsere Ideen vermitteln und Menschen zur Nutzung motivieren würde.
Als Teil dieser Bemühungen haben wir Ecken abgerundet und blockige Flächen halb-transparent (und für webkit-Browser auch den Hintergrund unscharf) gemacht. Alle Navigationselement und die Ebenenauswahl wurden in dem Panel unten links zusammengefasst. Aus dem Toggle-Button, mit dem man ursprünglich auf die Overview kam wurde eine kleine Vorschaukarte (wie sie vielleicht aus Google Maps bekannt ist), welche sich beim drüberfahren mit der Maus vergrößert und in der Overview-Ansicht durch ein Bild der aktuellen Position ersetzt wird.
Die weiteren Funktionalitäten wurden oben rechts als zwei große Button platziert.
Die Farbgebung besteht hauptsächlich aus Grün, welche komplementär zu den roten Dämmen funktioniert. Die Stories haben mit einem Lila-Ton einen eigenen Akzent. Dieser erzeugt in Kombination mit dem Grün eine etwas magische, natural mystic Stimmung und bewegt sich wiederum in Richtung Rot. Beide Farben wurden in zwei Tonwerte unterschieden in Abhängigkeit ob die Hintergrundfarbe hell oder dunkel ist.
Der Font für den Haupttitel und auch die Note- und Story-Titel wurde GeoSlab. Wir wollten eine Schrift nutzen, die stilistisch in Richtung Western ging (also amerikanisch bzw. slab serif), aber nicht gleich nach Saloon aussieht.
Eine weitere, interessante Komponente des Frontends bilden die Stories, bei denen wir durch Scrollytelling das lineare Erzählen mit den Möglichkeiten der interaktiven Karte verbunden haben. Umgesetzt wurde dies durch im Story-Text platzierte span-Elemente mit IDs, deren Position in jeder Scroll-Bewegung evaluiert werden. Wenn eins über den Schwellwert von 50% springt, beginnt ein Flug zum nächsten in der Story hinterlegtem Marker. Um dies etwas zu klarifizieren haben wir im Story-Panel eine kleine Markierung auf der halben Höhe eingefügt und zusätzlich die zu den Markern gehörenden Orte hervorgehoben um besonders bei kurzen Abständen (also wenige Zeilen dazwischen) die Orientierung möglichst zu unterstützen.
Da die Karte über die Sitzung hinweg ihren Zustand behalten sollte, also die selbst gesetzten Marker auch für andere Nutzer*innen sichtbar sein sollten, wurde ein Backend mit Datenbank benötigt. Von vorneherein entschieden wir, dass es wegen der geringen Häufigkeit von Änderungen auf der Karte ausreichen würde, wenn neue Marker erst beim Reload angezeigt würden. Dadurch reichte es, dass sich die Webapp beim Laden der Seite einmal den gerade gültigen Zustand holt.
Als Datenbank verwendeten wir Sqlite, da sie leicht zu deployen ist und für unsere Anwendung völlig ausreichende Performance liefert. Das Backend selbst, also die Vermittlungsschicht zwischen Webapp und Datenbank, schrieben wir in Rust. Rust ist als system programming language hervorragend dafür geeignet, performante und stabile Applikationen zu schreiben. Die Performance war hier zwar eher zweitrangig, die Stabilität allerdings nicht; Die Seite wird voraussichtlich die nächsten Jahre laufen und sollte dabei möglichst wenig Wartungsaufwand brauchen.
Die Beispiele, die wir von unserer Seite aus hinzufügten, sind Geschichten und Assoziationen aus unserer eigenen Filterblase, sei es aus Filmen, Büchern oder erzählten Mythen. Diese versuchten wir in Zusammenhang mit dem Fluss und seinem eigenen Mythos zu setzen, da die Perspektive, die wir darauf haben eine wenig Betroffene ist. Und um jenes klar zu artikulieren, haben wir die außenstehenden Geschichten mit dem tatsächlich Gegebenen verknüpft.
Haben Geschichten zu unseren assoziativ verknüpften Flussläufen und Bildern verfasst, um einen besonderen Fokus darauf zu legen, was sich zwischen den Zeilen und Strömungen verstecken könnte.
birth of the river child
The Animals of Frisky River
..there were plenty of land, flowers everywhere and birds chirping far up in the woods.
Dies ist die Geschichte, wie die Tiere den Fluss verließen. Eine kleine Hommage an Colin Damms Buch 'The Animals of Fathing Wood' oder, wie es auf deutsch heißt: 'Als die Tiere den Wald verließen.'
Als wir in den unterschiedlichen Verläufen des Flusses nach Bildern und Assoziationen suchten, fanden wir schnell jene Stelle, die so aussah, als würden ein paar Tiere am Fluss entlang laufen. Es bildeten sich direkt unterschiedlichste Verknüpfungen in unseren Köpfen, eine davon mit Colin Damm. Da dies sogar eine sehr passende war, da sie davon erzählt, wie verschiedenste Tiere den Wald verlassen müssen, da dieser von den Menschen platt gebulldozert werden soll. Und so schrieb sich die passende Kurzgeschichte zum entworfenen Bild wie von Kinderhand. Nachzulesen natürlich direkt in der entsprechenden Note auf unserer Website. :)
Welcome to the DEADZONE
There are plenty of stories and myths about what happens in the afterlife, especially when it comes to the undying faithful river. Many faces belong here, many he has taken, ripped apart into the current of life and death. The roots of the story are buried in waste. With it all the hidden faces. Human trash, petrochemicals, toxic sediments are just a few opponents of that revengeful flow. So It was a matter of time until it took what was his. Until the first sacrifices were made.
Diese Note entstand mit der Intention, eine passende Stelle zu finden, um einen Vermerk auf die Deadzone liefern zu können. Als wir auf die Stelle und den Flussverlauf stießen, war schnell klar, dass er sich für ein passendes Motiv eignen könnte, da er relativ verwunschen, durchwachsen und löchrig genug aussah, um mit Petrochemicals und anderen ungesund wirkenden Formen in Verbindung gebracht zu werden. Es war die dritte Beispielillustration und somit auch der dritte Versuch, sich etwas differenziert von den anderen Zeichnungen zu unterscheiden, nur um die schier endlosen Gestaltungs- und Bearbeitungsmöglichkeiten aufzuzeigen, die es im Sinne der Assoziationenfindung geben kann. Vielleicht entdeckt der oder die ein oder andere ja das ein oder andere bekannte Gesicht in diesem Ölfilm aus Abfall, ineinander schmelzenden Gesichtern, Chemikalien und noch vielem mehr.
Eine Karrikatur gegebener Verhältnisse und damit die imposante Zuspitzung dessen, was angesprochen werden soll: Jene verhängnisvollen Abfälle, die es schaffen, durch die reißenden Strömungen des Mississippi bis an sein Ende gespült zu werden, nur um im Golf von Mexiko in der Deadzone zu landen, sich zu dort sammeln und jegliches Leben und natürliche Existenz fast unmöglich zu gestalten.