A short while ago I was invited to participate in µChip3, an arts event curated by Antonio Roberts & Sam Wray which involved chiptune, digital art, hacking, modified hardware and much more. My role was to perform live visuals to accompany performances by some notable chiptune artists, so I set about building a custom browser-based visualiser based on the piece I produced for the BYOB 2013 exhibition.
Visualiser applications need to work across two windows (a control window with which you create and modify visuals, which appear in a display window), so working out how to produce an application able to function reliably in this way was my first concern. I worried it would involve some fiddly work with a local server, but after some research the solution proved straightforward: simply store commands in local storage via the command window, which are then be detected by the display window using the storage event listener.
As well as multi-window web applications, local storage can also be used to keep web apps open in multiple tabs in sync with each other, or even to stream the output of a HTML5 canvas from one window to another. Read on for some demos…
Below: a screenshot of the visualiser. The control window is on the left, the display on the right.
What Is Local Storage?
The clue is in the name: it’s a capability of modern browsers which allows websites and applications to store persistent data locally. Conceptually, it’s similar to cookies but without the drawbacks: up to 5MB per domain can usually be stored (with some exceptions). Plus, unlike cookies nothing needs to be sent with HTTP requests. If you’re looking to learn more about local storage then read more about it here and here.
Communicating Between Windows
Sending the Same Command Repeatedly
Using Local Storage to Stream a HTML5 Canvas from One Window to Another
It’s possible to (ab)use local storage to stream the output from a HTML5 canvas from one window to another, in realtime. While this isn’t a technique I used when building my visualiser, it’s kind of interesting all the same and could have a use somewhere- perhaps for if one needed to stream the output of their display window back to their control window.
To do this is fairly simple: when the canvas renders a frame, encode it as a base64 data URI. Store this in local storage, and then decode and draw it into a canvas in the other window. Find a demo of this right here.
Find the code for the above demos on GitHub. If you’ve any feedback or questions regarding this post then please drop me a line via twitter or email. I’m particularly curious to know if there might be a better method of streaming a canvas between two windows?