Assignments

**Objective:** Use one or more of the core communication techniques (e.g. `window.opener`, `postMessage`, `localStorage`, `BroadcastChannel`, or `SharedWorker`) to share position data between two browser windows. **Task:** You are given a starter file with a code skeleton. Your job is to implement a working communication channel that allows each window to display: * Its **own position** (based on `window.screenX` / `screenY`) * The **position of the other window(s)** Use the concepts and techniques discussed in workshop to send and receive this data. Feel free to choose an approach that makes sense to you. Bonus: if you try more than one and compare the results. **Hints:** * Use `setInterval()` to track and send position changes regularly * Store or transmit positions as a simple object: `{ position.x: ..., position.y: ... }` **Optional Challenge:** Make the update reactive (e.g. use the `storage` event or `BroadcastChannel.onmessage`) instead of relying on polling. **Time limit:** 30 minutes ``` 99-assignments/01-share-data-between-windows ```

**Objective:** Using p5.js and a predefined SharedWorker, draw a line between two browser windows. The line should connect the **center of your current window** to the **center of the other connected window**. The visual goal is to give the impression of a single, shared canvas that spans across both windows. **Task:** You are given a code skeleton and a working `SharedWorker` that handles metric exchange between connected windows. Extend the p5 sketch so that a line is drawn from **your own center** to **the other window’s center**. **Optional Challenges:** - color of the line depends on the position of the window - thickness of the line depends on the distance between the windows - add easing so the line endpoint smoothly follows the movement of the other window’s center. **Time limit:** 20 minutes

``` 99-assignments/02-draw-line-between-windows-easy ```

``` 99-assignments/02-draw-line-between-windows-hard ```

**Objective:** Explore the creative possibilities of multi-window visual composition. Build on the provided radial line sketch and extend it to create an expressive, dynamic visualization that spans two browser windows. **Task:** You are given a starter sketch with a radial arrangement of lines in one window. Your job is to turn this into an **interactive or generative visual system** that lives across two windows. You can expand, distort, animate, or synchronize elements between the windows—anything that reacts or communicates across the boundary. This is not about perfect alignment, but about experimenting with form, connection, and coordination. **Suggestions (not required):** * Use shared metrics (position, size, center) to distort the visual depending on where the other window is * Create symmetry, mirroring, or interaction between radial elements across both windows * Animate elements in one window based on what happens in the other (e.g. movement, time, alignment) * Use easing, color changes, or layout shifts to respond to distance or position **Time limit:** 30 min ``` 99-assignments/03-dual-window-visualization-experiment ```

**Objective:** Create a shared visual system where a graphic element (or entire visualization) “moves” from one window to another when the windows overlap. The goal is to simulate a kind of *casting* or *transfer* of responsibility between two browser windows. **Task:** You are given a starter sketch with a simple visual and a functioning SharedWorker. Extend it so that: * When two windows **visibly overlap** on the screen, the visual **moves to the other window** * The system feels like the visual is being *passed* from one window to the next You’ll need to: * Continuously track each window’s screen position and size * Detect when bounding boxes of windows intersect * Decide which window is currently “hosting” the visualization * Use the SharedWorker to broadcast and synchronize handoff state **Time limit:** 30 min ``` 99-assignments/04-visual-handoff-between-windows ```