welcome to the void
I did a thing that feels most appropriate for the times we live in, and you are cordially invited to scream into the void.
Void land is a collaboration between Lena Reinhard (idea, illustration, art direction), Pepijn Schoen (idea, prototype development) and myself (implementation, sound design, additional visual design and typography).
The void will take your input in either textual form (if you have any fucks left to give) or in audio form (if you don't; highly recommended). Your input will ultimately be discarded, but it will have been received. A receipt will prove as much.
Creating the void
Lena's initial call was structural, with three entities side by side: the gaping void in the center that everything gets swallowed by; on its left, the void salon / the void saloon: you can sit with the void and a good book, or drink shots until shots are fired outside the saloon doors at high noon; on the right, the void pets: fuzzy, warm, and guaranteed to swallow your screams whole.
Otherwise the brief was short: the void is dry, deadpan cosmic; the experience should be cathartic, absurd, and atmospheric.
I built on that in multiple directions: interaction, visuals, and sound.
First off, interactions: We knew that we wanted this to be interactive, not just something to look at. The visitor can scream anything into the void. The void will… react, if not necessarily respond.
In the initial prototype, the text just silently faded out, but we needed more drama. Once the void itself had been rendered visually against the backdrop of stars, animating the text into the void was a logical step. I decided to make it more chaotic by splitting the text into individual letters and giving each its own tumbling path into the maw of the void.
Basic website controls followed: toggle audio (but why would you – please, annoy everyone around you with the subtle disquieting hum of the cosmic void!), enter fullscreen (again, highly recommended), and a quick "what is this".
There were the usual iterations: At first I had precalculated the flight path for each letter, but then when I scrolled, they went to where the void was instead of where it is, so that got fixed. CSS bit me with some z-ordering nonsense that broke the box blur for the input field, news at 11.
We wanted the void to give you receipts, so I implemented a virtual dot matrix line printer. Initially we thought we'd just do something that looked like a thermal receipt printer, the kind you might get your credit card receipt printed on at a chain restaurant, but it was lacking pizazz, both visually and auditively. The printer mostly lives from the sound design, so more on that later; visually it was important for me to capture the old greenbar paper that I printed so many source code listings on an Star LC-10 back in the day: sprocket holes, perforated sides, and of course the green stripes. Counter to my lived reality back then, I made sure the text and the greenbars here always aligned. Our receipt printer is modern enough to print bidirectionally, going back and forth. It used to be that printers would work like typewriters: print a line, feed the paper up one line, return the carriage to the left, print the next line. Those were the bad old times.
After all of that was done, I realized that when we prompt people to "scream into the void", we really needed to support audio input. Getting that to work somewhat reliably across platforms and getting a nice visualization out of it was way more annoying than expected. If the waveforms look weird, I'm sorry – it turns out my patience with browser audio implementation quirks is even more limited than my patience with computers generally.
Secondly, visuals. Lena's original illustration had the void shapes on a bed of tens of thousands of pinprick stars. It looked cool graphically, but didn't work super well on an interactive web site, especially when scrolling, and doubly so on OLED screens: there would be trails, stars would appear to jitter and blink, and the image was also pretty large due to the fine detail.
I first attempted to make things work with "real", DOM-based stars, but that quickly overwhelmed even my desktop browser; I pivoted to drawing on a 2D canvas, which worked well initially, but as I kept pushing up the number of stars visible to approximate Lena's artistic vision, that, too, hit its limits. For a while, pre-rendering multiple canvases into parallax layers and gently animating the entire layers with a lissajous style swaying movement (3d translate) worked pretty well, but it broke down on mobile browsers. Ultimately, I ended up going with webGL purely for performance reasons. Even if it ends up doing basically the same thing as the canvas renderer, running the whole thing in a shader lets us offload the generation to the GPU, so it's a separate code and texture path, with much better performance across the board.
When we had only the void shapes, it was a bit hard to make them out clearly against the backdrop, especially with the random starfield rendering and noise-based animation. I ended up pre-generating masks that I applied to a thresholded monochromatic noise, giving us halos of prinpricks. Varying the mask blur and the noise threshold allowed for quick iteration on how big and visible the halos were.
The halos subtly pulse and flicker, adding to the slightly discomforting effect.
Finally, the sound design. This took by far the most time and iteration, and it was both the most fun and the most annoying to debug.
Given that this was a cosmic void, it was immediately obvious to me that we needed some sort of droning background hum – something subtle, but clearly present. The hum is made up of three different sine oscillators that are randomly detuned slightly on every page load to ensure they never feel repetitive.
Another trick to prevent the drone from repeating is borrowed from the early CSS days: Multiple LFOs of prime-second cycle length are applied to the source oscillators, so no two periods will be the same for a long (enough) time.
Each of the entities has its own hum source with subtle different qualities. They all react to cursor proximity; the void pets are purring the loudest, of course.
To make it a bit more disconcerting, on top of this low droning bed of sound, there is a random single sine of ~300-1400 Hz pinged in through a reverb filter, just to punctuate everything.
For the receipts printer, I knew early on that I wanted something very physical, old-school. When we thought we would just do a thermal receipt printer, I prototyped that quickly but decided it was just too boring. So I went to the opposite end of the spectrum: The loudest, most annoying printers I ever personally experienced, that nevertheless have a special place in my heart: Dot-matrix printers. Instead of the letterform hammers of a typewriter, these guys have a bar or matrix of needles - commonly 9, 12, or 24 - that punch a ribbon onto paper, crudely approximating pixels. Fun fact: The original dot matrix printer was called the Hell Writer. I'm not making this up.
I really wanted to get the “feel” of this right, and a large part of that feel was the sound: There is a constant hum of the carriage motor, the regular thhhhk of the line feed roller, and most prominently the EAR-PIERCINGLY SCREECHING SOUND of the needles hitting the paper. I really don't know how to describe it. Imagine a very broad tattoo needle hitting paper at speed, but multiply that by a thousand banshees? Let's just say there was a reason why printer covers were popular in the late 80s and early 90s.
It took a long time to close get the sound I remembered; when I finally did, Lena ruled that while realistic, it was too annoying, and I toned it down a bit. So when you get your receipt printed, know that a) Lena saved your ears, and b) you're getting a softened experience.
For those taking notes, the printer sound is made up from two sawtooth waves for the motor, with an LFO on top for some wobbles; the "engine" resonance is another sawtooth broadband noise source with an AM gate wobbling at ~14 Hz. Every character simulates multiple strikes based on the character's visual weight (more ink -> more needles), and each strike is made up of multiple noise bursts layered with harmonics and screeches. At the beginning and end of each line, the print head reverses direction, producing a satisfying "thunk". (As a small easter egg, the thunk is actually stereo panned. Just like the real thing!) Finally, the line-feed roller plays three different sounds: acceleration, paper feed, and "settling" when the gears re-engage.
(Some of you might ask why I didn't simply use samples? And the answer is: 'cos I didn't wanna.)
Finally, there is a subtle swoosh as the void eats your typed or screamed input.
enjoy the void
Thanks to Lena and Pepijn for the collaboration. I don't do silly artsy stuff like this nearly as often as I'd like to.
PS: The void runs completely client-side; no data is transmitted to or stored on our server.