Multi-Window Experiences with p5.js

This overview introduces several techniques for sharing data between browser windows, focusing on window positioning and state synchronization. It covers fundamental concepts such as detecting window position and observing changes, and explores communication strategies using `window.opener`, `postMessage`, `localStorage`, and `SharedWorker`. The final implementation builds on a SharedWorker with centralized state management, allowing multiple windows to share detailed metrics like position, size, and center point in real time. This architecture enables dynamic coordination across distributed browser views.

This section provides an introduction to [p5.js](https://p5js.org), a JavaScript library for creative coding. It covers the basic structure of a [p5.js](https://p5js.org) sketch, including setup and draw functions, and demonstrates how to create simple shapes and animations. The goal is to familiarize you with the [p5.js](https://p5js.org) environment and its capabilities for visualizing data.

This example demonstrates how a simple object—represented as a circle—is centered in a single browser window. When the window is moved, the circle appears to briefly stay in its original screen position before smoothly returning to the center of the window. This creates a subtle physical effect that visually emphasizes the motion of the window itself.

In this example, a more complex visual object responds to window movement using the same screen-relative mechanic as before. Instead of a single circle, a radial structure made of multiple lines is centered in the window. When the window is moved, the entire object appears to lag behind momentarily—remaining in its original screen position—before easing back into the center. The radial form enhances the impression of physical drag and realignment, making the effect more expressive and visually dynamic.

In this example a line spans across two browser windows. The line connects the center points of the two windows, creating a visual link between them. This demonstrates how to share data between multiple browser windows and use it to create a simple visual representation of the relationship between the windows.

This sketch creates a radial network of animated lines that visually connect the center of one window to the center of another. Each segment is defined by layered strokes, colors in motion, and dynamic skewing. As the windows move, the geometry shifts, weaving together screen space into a single shared structure. The result is a living pattern that spans across multiple views—fragmented but visually continuous.

This sketch visualizes the relationship between two windows through rotating, noise-infused radial structures. Each window’s shape orients itself toward the other, creating a sense of attention and awareness across screen space. As the distance between windows changes, the form stretches and shifts, enhanced by subtle noise and color gradients. The result is a living, directional figure that constantly re-aligns as windows move, rotate, and drift apart.

This example demonstrates how a simple dot can be centered in the middle of the screen. The dot remains in the center even when the window is resized or moved.

This code adjusts the canvas based on the browser window’s position on the screen, allowing the sketch to stay aligned with the physical screen space. By translating using -window.screenX and -window.screenY, it relates the drawing to the window’s location on the screen — not just the browser viewport. This is useful when multiple windows or screens are involved and you want consistent positioning relative to the actual screen, not just within the browser.

This sketch renders radial shapes that visually represent two browser windows. As each window moves, its form and color adapt to its screen position. When the windows begin to overlap, a subtle “casting” effect occurs — one shape takes over, echoing the other's form and presence, creating the illusion of a shared, shifting identity across space.