web-basiertes Storytelling

In der Harvard Extension School belegte ich den Kurs “Creative Explorations on the web”.
Dieser bot mir die Möglichkeit, neue Formen des web-basierten Storytelling zu erkunden.

Ziel des Kurses war die Einführung in das Creative-Coding mittels der Javascript-Bibliothek p5.js.

Für mein Abschlussprojekt wählte ich eine Kombination aus Timeline- und Map-Visualisierung,
die durch die Anfänge der Philosophie-Geschichte führt.

Rahmenerzählung

Oben rechts führt der begleitende Text in fünf Stationen durch die Entstehungsgeschichte der antiken Philosophie und zielt dabei auf die Erkenntnis, dass Ost und West verbunden sind.

Die mittlere Leiste bietet Überblick und erlaubt Vor- und Rücknavigation durch die Stationen.

Timeline & Map

Der Kontext wird visualisiert, indem P5 den passenden Kartenaussschnitt zeigt, mitsamt Hervorhebungen und Animationen, sowie den betreffenden Abschnitt der Timeline, mit Einblendung von relevanten Ereignissen.

Timeline & Map sind jeweils <canvas>-Elemente, die im sogenannten InstanceMode von P5 initialisiert, d.h. als abgekapselte Objekte behandelt werden. Innerhalb dieser Elemente steuert P5 Hin- & Rück-Zoom durch scale- und translate-Bewegungen (Vergrößerung & Versetzung).

-Elemente, die im sogenannten Instance-Mode ausgeführt werden, d.h. als jeweils abgekapseltes Objekt. Innerhalb dieser Elemente steuert P5 den Hin- und Rück-Zoom durch aufeinander abgestimmte scale- und translate-(Versetzungs)-Befehle.

Code

Im Hintergrund wird das Geschehen durch fünf Skripte gesteuert:

  • sketch.js – zur Steuerung des Interfaces, Initialisierung der canvas-Elemente, zum Starten der Zoom-Vorgänge und der Animationen
  • StartScenes.js – zum Übergang von Szene zu Szene
  • map.js – enthält den Code zum Zeichnen der Karte (aus Adobe Illustrator per Skript exportiert und in P5-Code umgewandelt)
  • positioning.js – Durchführen der scale/translate-Bewegungen, Berechnung der Differenz zwischen Start und Ziel
  • BlurbTimespan.js – zur Anzeige der Zusatz-Informationen auf Karte und Zeitleiste