Der Workshop „Multi-Window Experiences with p5.js“ befasst sich mit der Erstellung synchronisierter, interaktiver Visualisierungen über mehrere Browserfenster hinweg unter Verwendung von p5.js. Wir befassen und hier mit Techniken zur Erkennung von Fensterpositionen und zur Echtzeitkommunikation zwischen Fenstern durch Methoden wie window.opener, postMessage, localStorage und SharedWorker um daraus überraschende interaktive Visualiusierungen zu erzeugen.
Dazu gibt es Videos, eine Dokumentation, in der alles noch mal erklärt ist und es alle Codebeispiele gibt, Slides und ein Repo mit einer Demo und Challenges zum Üben.
Viel Spaß!
1 von 8: Intro
In diesem Workshop tauchen wir in die Welt der Multi Window Experiences mit p5.js ein. Wir lernen verschiedene Techniken kennen, wie Daten zwischen Fenstern ausgetauscht werden können und wie wir diese Ansätze sinnvoll mit p5.js verbinden können.
2 von 8: Konzepte zum Austausch von Daten
In diesem Abschnitt werden verschiedene Techniken zur Datenfreigabe zwischen Fenstern vorgestellt und diskutiert. Von der Verwendung von Event-Listenern und SetIntervall, über Window Opener und Local Storage, bis hin zur Nutzung von Shared Workers.
3 von 8: Lösung von Aufgabe 1
Wir beschäftigen uns mit der Lösung der ersten Aufgabe.
4 von 8: Working with p5
Wir tauchen ein in die Welt des Creative Codings mit p5.js, einer JavaScript-Bibliothek, die auf Processing basiert. Wir lernen, wie wir den State zentral verwalten, Animationen erstellen und mit Farbmodi und Zufallswerten arbeiten können.
5 von 8: Twist
Hier kommt der Twist: wie stellen wir eine Verbindung zwischen dem Fenster und dem Bildschirm her, um Animationen besser zu steuern und zu positionieren? Dieser Schritt ist ein GameChanger!
6 von 8: Aufgabe 2 und 3
Hier gibt es spannende Aufgaben, die sich mit der Interaktion zwischen zwei Bildschirmen und der Erstellung einer komplexen Visualisierung befassen.
7 von 8: Casting
Hier befassen wir uns mit dem spannenden Thema des 'Casting Overlap', bei dem Objekte von einem Fenster ins nächste übertragen werden. Dabei stellen wir uns die Herausforderung, wie wir ein solches Objekt transferieren können und wie wir dieses Konzept in die Praxis umsetzen könnten.
8 von 8: Final Thoughts
Wir diskutieren die Vielfalt der Technologien zum Datenaustausch und die Herausforderung, sinnvolle Interaktionen zu konzipieren.
Material
Codebeispiele
- Using window opener
- Share Data via Broadcast Channel API
- Store shared data via LocalStorage
- Use of a higher-level Shared Worker
- Shared Worker with Central State Management