Weaving the Web

Schwerpunkt im Medieninformatik Master

Multi-Window Experiences with p5.js


Coach
Christian Noss
Termin
Dienstag, 27. Mai 2025, 13:00 Uhr
Dauer
~180 Minuten
Raum
3.217

Ziel des Workshops

Dieser Workshop führt in Konzepte und Techniken ein, um mit p5.js interaktive Anwendungen zu entwickeln, die sich über mehrere Browserfenster oder -tabs hinweg erstrecken. Im Fokus steht die Umsetzung reaktiver, visuell verteilter oder modularer Interfaces – von einfachen Beispielen bis hin zu einer experimentellen Multi-Fenster-Visualisierung.

Dabei schauen wir uns an wie man:

  • mit window.open() Fenster dynamisch erzeugt,
  • Zustände und Daten zwischen Fenstern synchronisiert (z. B. per postMessage, BroadcastChannel, window.opener, localStorage, Worker),
  • p5.js im Kontext mehrerer Render-Kontexte organisiert,

und wie man Fallstricke wie Kontextverlust meistert.

Am Ende steht ein funktionierender Prototyp im Form eines verteiltes Canvas-Systems.

Empfohlene Vorkenntnisse

  • Solide JavaScript-Grundkenntnisse (Funktionen, Objekte, Scope)
  • Verständnis von DOM und Browserkontexten (z. B. window, document)
  • Grundlegende Erfahrung im Umgang mit HTML
  • Optional: Erfahrung mit p5.js: setup(), draw(), einfache Interaktionen

Für wen ist der Workshop interessant?

Der Workshop richtet sich an:

  • Frontend-Entwickler:innen, die sich für dynamische UI-Konzepte, parallele Darstellung oder Zustands-Synchronisation interessieren
  • Creative Coder:innen, die mit p5.js experimentieren und neue Formen der Interaktion im Browser erkunden möchten
  • Mediengestalter:innen und Interaction Designer:innen, die webbasierte Installationen oder performative Interfaces über mehrere Bildschirme oder Fenster hinweg umsetzen wollen

Interesse an kreativen Browser-Interfaces, dynamischer Interaktion und dem Zusammenspiel von Code, Darstellung und Kommunikation im Web.

Material

Further Readings