The Imaginarium – work in progress
Being a designer can be tough – there are tight deadlines, difficult problems to solve and lots of interruptions. On top of that, we have to be creative on demand. Thankfully, Alexia and I have invented a solution.
We created The Imaginarium for MOO Hackday 2013.
Part digital, part physical hack, The Imaginarium is a portable retreat from office stresses and strains, providing relaxation and inspiration in a multi-sensory isolation chamber.
For the physical hack…
We used:
- A cardboard box
- Acoustic foam
- Small, cardboard speakers
- A fan, for cooling
- More cardboard
- Mini mirror tiles, coloured gels, lots of glittery stuff
The inside of the box is blacked-out and the acoustic foam gives reasonable sound insulation. The speakers were removed from their cardboard cases and attached to either side of the inner box.
An early round of usability testing showed that the display needed to be at least 7 inches from the wearer’s eyes, so a tunnel was built out from the front of the main box at eye-level, with an opening at the end to house the smartphone display.
The display tunnel was lined with mirror tiles and has the added effect of helping to captivate visual attention.
These elements add up to create effective sensory isolation.
For the digital hack…
We powered The Imaginarium’s audio-visual experience with a web app on a smartphone with a good screen (a Nexus 4 in this case). The web app comprises:
- Visuals generated using Processing.js
- Text content from emergencycompliment.com and oblicard.com displayed using JavaScript
- HTML5 audio
This is what’s on the display screen:
I’ve been interested in learning the Processing visualisation language for some time and it was perfect for creating the pretty-coloured, abstract animations we wanted. I used Processing.js, which compiles to JavaScript and displays on the HTML5 canvas element.
It was surprisingly easy to generate a pleasing animation using circles that morph between random radii, positions and colours. Initially I tried to create blur effects using the 3D lighting functions, but I settled for 2D after having no luck getting WebGL activated on Android Chrome.
Here’s the Processing code:
// Global variables
int cwidth = 600;
int cheight = 380;
float radius, nradius, frameradius;
color colour, newcolour;
int X, Y, frameX, frameY, nX, nY;
int colourrange = 80; // don't make any of the colours too bright to make sure we can read the white text
int alpha = 20; // make the colours nice and transparent
int delay = 79; // number of frames before we move the target position
int cdelay = 277; // number of frames before we change the colour to animate to
int rdelay = 41; // number of frames before we change the target radius
void setup(){
size( cwidth, cheight );
frameRate( 15 );
colorMode(RGB, 100);
radius = random(cheight/2);
nradius = random(cheight/2);
X = width / 2;
Y = height / 2;
nX = random(width);
nY = random(height);
colour = randomcolour();
ncolour = randomcolour();
background(0);
ellipseMode(RADIUS);
noStroke();
smooth();
} // end void setup()
void draw(){
// reposition it every delay frames
if( frameCount % delay == 0 ){
X=nX;
Y=nY;
nX = random(width);
nY = random(height);
println("New position: "+ nX + ", " + nY);
}
// change the colour every cdelay frames
if( frameCount % cdelay == 0 ){
colour = ncolour;
ncolour = randomcolour();
//println("New colour: "+ red(ncolour) + ", " + green(ncolour) + ", " + blue(ncolour));
}
// change the radius every rdelay frames
if( frameCount % rdelay == 0 ){
radius = nradius;
// give me a random new radius
nradius = random(height /2);
//println("New radius: "+ nradius);
}
frameradius = radius + ((nradius - radius) * (frameCount % rdelay) / rdelay );
frameX = X + ((nX - X) * (frameCount % delay) / delay );
frameY = Y + ((nY - Y) * (frameCount % delay) / delay );
fill (lerpColor(colour, ncolour, (frameCount % cdelay)/cdelay));
ellipse( frameX, frameY, frameradius, frameradius );
} // end void draw()
color randomcolour(){ return color(random(colourrange), random(colourrange), random(colourrange), alpha); } // return a random colour
The next problem I encountered was trying to get my web app to display full screen, or at the very least to hide the address bar. Android Chrome prevents attempts to hide the address bar programatically, so I switched to Android FireFox, for which (very buggy) extensions to show the browser content full screen are available.
I ‘borrowed’ the inspiration and encouragement messages from emergencycompliment.com and oblicard.com, and found them handily packaged up as JS objects. It took some very simple JS to cycle through them at random and I styled it with the CSS3 text-shadow property for the ‘subliminal’ blur effect.
The audio was a challenge I didn’t to solve satisfactorily. We wanted to use a selection of meditative sounds from a 3rd party source such as Spotify or SoundCloud, organised into a playlist. Spotify’s web player doesn’t play in browser on our device. SoundCloud’s embedded HTML5 player struggled to play sets (playlists) – there was a delay before audio started and the player has a large footprint on the page. I settled for the HTML5 audio tag and an MP3 – still not 100% reliable but less playback delay than SoundCloud and a smaller footprint. Android disables auto-play audio for obvious reasons – no amount of hacking seemed to get round this reliably, although it did work sporadically.
So what’s it like?
The Imaginarium is an experience that can only be understood first hand.
Exclamations of “wow” are often heard when wearers first experience The Imaginarium, who proceed to spend several minutes inside, absorbing its soothing ambiance and inspiring messages. Such are its mesmerising effects that wearers forget how ridiculous they look are are completely oblivious to the laughter around them.
