An interactive piece of work done for our client BASF, this BASF Elastolit utility piece is an interactive explorable designed for large touchscreens.

Used at exhibition event in China earlier in the year, the interactive explorable is meant to draw the attention of the crowd and get them to play with it.

There are several design objectives baked into this piece.

Because it is a standalone interactive, the piece will jump back to the introduction if no one has interacted with it for more than 3 mins.

There is also swipe-based touch capabilities added to the piece. This, together with other UI elements like touch cues, left/right arrows and the bottom navigation bar allows one to transit and navigate the piece easily.

Artwork is custom, and the animation effects are layered-on with a mix of static images, animated gifs, video, and code-based art animation.

A translation button (top-right corner) allows users to quickly switch between English and/or Chinese on the fly.

Beyond the use at one event, the piece was also meant to have a longer shelf-life and accessible on the web. A key to this was making the
load relatively light-weight.

The rain was originally encoded in the video, but then the video files would be huge (in the order of several 100Mb). This is because in video encoding, the screens are captured frame by frame, and file size is dependent on the amount of stuff moving on the screen at one time. More stuff = bigger file size for the quality required.

Thus the decision was made to switch the rain to entirely being code generated, and is a HTML5 canvas rain code layer overlaid on top of the video. You can see an example of the test UI code rain here.

Lightning effects are also canvas-code based, and also overlaid in the same layer as the rain. The comparison between HTML5 canvas code performance vs video size is stark.

The text is also all stored in the HTML5 code (and not video) which also reduced the load for the on-the-fly translation. We managed to get the videos down to below 1 Mb, and yet the entire piece, when run on a HD 1920 x 1080 screen, still retains its sharpness.


Interactive explorable running on a gorgeous 55-inch Samsung Flip touchscreen

Sound files are not in any of the videos and are separately fired during the transitions of the panes. Whilst they could be added within the videos, having all of the elements separately and only gluing them in the code layer makes for a much more flexible result.

I would also argue it is more powerful. For example, the music, wind and rain can be layered in ways dependent on how the viewer transits panes.

Lastly, some work was done to ensure that it looked decent on a mobile form factor (which will nag you to rotate the phone to landscape). It is not perfect for every form factor, but by-and-large should work decently.

This piece is a mix of many different Javascript libraries and technologies, including D3 (for the gauge generation and bottom UI element), GSAP (library for animations), JQuery (useful DOM manipulator), HowlerJS (sound library), low-level Canvas code, Reveal (framework + touch), Icomoon (custom icon pack for smaller sizes).