Recently, a gif ** appeared on social networks showing a stunning work of art made by Bjorn Staal.
I wanted to recreate it, but lacked 3D skills in spheres, particles, and physics, and my goal was to understand how to make one window react to the position of another.
Essentially, sharing state between multiple windows, which I found to be one of the coolest aspects of the bjorn project!
Since I couldn't find a good article or tutorial on the topic, I decided to share my findings with you.
Let's try to create a simplified proof of concept (PoC) based on BJORN's work!
The first thing I did was make a list of all the ways I knew to share information between multiple clients:
Obviously, having a server (with polling or websocket) simplifies the problem. However, this is not possible since bjorn achieved his results without using a server.
Local storage is essentially a browser key-value store that is typically used to save information between browser sessions. While typically used to store authentication tokens or redirect URLs, it can store anything that is serializable. You can learn more here.
I've recently found some interesting local storage APIs, including the storage event that fires whenever the local storage is changed by another session of the same **.
We can take advantage of this by storing the state of each window in local storage. Whenever one window changes its state, the other windows are updated by storing events.
This was my initial thought, and this seems to be the solution chosen by bjorn because he shares his localstorage manager** here and an example of using it with threejs.
But when I found out that there was ** to solve this problem, I wanted to see if there was another way ......Spoiler alert: Yes, there is!
Behind this flashy term is a fascinating concept – the concept of webworkers.
In simple terms, a worker thread is essentially a second script that runs on another thread. While they don't have access to the DOM (because they exist outside of the HTML document), they can still communicate with your main script.
They are primarily used to offload main scripts by handling background jobs, such as prefetching information or handling less critical tasks, such as flow logs and polling.
Shared workers are a special type of webworkers that can communicate with multiple instances of the same script, which makes them interesting for our use case!Well, let's jump right in!
As mentioned earlier, workers are "second scripts" with their own entry points. Depending on your setup (TypeScript, Programs, Dev Server), you may need to adjust tsconfig, add directives, or use a specific import syntax.
I can't cover all the possible ways to use web workers, but you can find information on mdn or the internet.
I'd be happy to write a prequel to this article if needed, detailing all the ways to set them up!
In my case, I use vite and typescript, so I need a workerts file and install it @types sharedworker as the development dependency. We can use the following syntax to create a connection in the main script:
new sharedworker(new url("worker.ts", import.meta.url));Identifying each window keeps track of all window states, and once a window changes state, it will be very simple to remind other windows to redraw our state:
type windowstate = ;We will have two types of messages:
Each window, whenever its state changes, publishes a WindowStateChangedMessage with its new state. The worker will send an update to all other windows to alert them that one of the windows has changed. The worker will send a syncmessage with all the window status. We can start with an average worker who looks a bit like this:
// worker.ts let windows: [= onconnect = ()=> ;// main.ts import from "./types"; import from "./windowstate"; const sharedworker = new sharedworker(new url("worker.ts", import.meta.url));let currentwindow = getcurrentwindowstate();let id = generateid();// main.ts sharedworker.port.postmessage(, satisfies workermessage);// worker.ts port.onmessage = function (event: messageevent) = msg.payload; const oldwindowindex = windows.findindex((w) => w.id === id); if (oldwindowindex !== -1) else );windows.foreach((w) => // send sync here );break; }w.port.postmessage(, satisfies workermessage);Of course, we don't do complex 3D spheres: we'll just draw a circle in the center of each window and a line between the spheres!
I'm going to draw with the basic 2D context of HTML Canvas, but you can use whatever you want. Draw a circle, it's very simple:
const drawcentercircle = (ctx: canvasrenderingcontext2d, center: coordinates) => = center; ctx.strokestyle = "#eeeeee"; ctx.linewidth = 10; ctx.beginpath();ctx.arc(x, y, 100, 0, math.pi * 2, false); ctx.stroke();ctx.closepath();Basically, we are changing the base. I do it with a little math. First, we'll change the base to have coordinates on the monitor, offset by the current window screenx screeny.
const basechange = (:=> ;const currentwindowcoordinate = ; return currentwindowcoordinate; }const drawconnectingline = (:=> ;const targetwindowoffset: coordinates = ; const origin = getwindowcenter(hostwindow); const target = getwindowcenter(targetwindow); const targetwithbasechange = basechange();ctx.strokestyle = "#ff0000"; ctx.linecap = "round"; ctx.beginpath();ctx.moveto(origin.x, origin.y); ctx.lineto(targetwithbasechange.x, targetwithbasechange.y); ctx.stroke();ctx.closepath();// main.ts sharedworker.port.onmessage = (event: messageevent) => )=> )setinterval(()=> )satisfies workermessage); currentwindow = newwindow; }100);If you run it on multiple windows, hopefully you get the same result as this!