subblue

L'Eclaireur

Fri, 06 Jan 2012 00:00:00 GMT

Animations from an installation at L'Eclaireur in Paris.

L'Eclaireur Sévigné has a unique installation with 147 screens dotted around like picture frames. Early in 2011 I was commissioned to create some original videos for the space, which have been playing for the last six months.

Music Box

Sun, 18 Dec 2011 00:00:00 GMT

A journey into a Fabergé inspired world.

Music: Tinkle by J. Saunders.

Riverside Museum

Mon, 04 Jul 2011 23:00:00 GMT

Just over a year ago I joined 55 Degrees to work on a fantastic project for Glasgow's new £74 million museum of transport designed by Zaha Hadid.

55 Degrees were in a unique position to offer video, design and software services to the museum and so we ended up creating nearly all of the AV and interactive exhibits. The team of eighteen people have invested a huge amount of passion into the project viewing it as a once-in-a-lifetime opportunity.

A behind-the-scenes look at the things I've been involved with this past year on the Riverside project.

The exhibits

Riverside came to us with a very forward thinking approach to the museum, which as a bunch of creatives and techies is an exciting prospect!

The first requirement was that everything was going to be presented in terms of stories about the objects. No dry facts and figures but emotive tales with personality.

To do this we created 34 documentary films, 4 audio exhibits and 4 animations.

One of the films, Subway War, is a 24 minute play portraying a complete circuit of the subway in war-torn 1940s Glasgow. Directed by Joseph Briffa it required the careful choreography of 70 actors and extras dressed in period costume using one half of a subway car. The visitors sit in the other half and watch the film projected against the end to give the illusion of a complete carriage.

The second requirement from Riverside was that as much as possible should be interactive and easily updatable. There are still printed information boards but these are greatly enhanced by 37 large portrait orientated iPad style touch screens (called eIntros) driven from a central content management system. The interactive eIntros allow for a much larger range of information, photos and movies to be shown for each object. It also enables content to be added and contributed to, especially from the enthusiasts that visit the museum.

Along with the films and eIntros we also created 5 multi-player games, 6 interactive story books for the under 5s, 4 software/hardware hybrid interactives, customer feedback touch screens, What's On orientation screens, an interactive donor wall, a 3D sound environment for the Victorian period street, a massive video projection featuring a ship launch and finally 114 animations played over 7 screens synchronised to a moving display of 38 model boats.... phew!

The design

Riverside required a common, consistent design language be used throughout the museum. Head of Design, Russ Kyle, and his team developed common concept branding guidelines that were carried through to all the interface and game designs. The themes of dots, pleats, extrusions, segments and ribbons were used throughout as a way to complement the building itself.

The common design guidelines were used for everything from the video player controls, orientation screens and eIntros to the game interfaces. Even the characters in the under 5s eStorybooks (illustrated by the super talented Dave Morrow) followed the common themes.

The technology

My role was Head of Software for the project. Coming from a web development background we took the approach that the 100+ Apple Mac Minis on the museum network could be considered as different pages in a web based content management system (CMS). Each exhibit screen is basically a single large web page.

We built our own Ruby on Rails based CMS with a very flexible component led approach for managing content on the pages. The same CMS interface is used to create the eIntro screens as well as configure the mutli-player games, What's On schedule and other diverse elements such as lighting shows. Depending on how the content for a page is requested it is rendered as an HTML5 interface for the eIntros, JSON or XML for the Flash based games.

Having the luxury of a single controlled platform (unheard of with normal web development!) we were able to really leverage the latest CSS3, Javascript and HTML5 technologies available to the Safari browser.

The video API was used heavily for HD video playback, application cache for local storage of the content (some eIntros have over 1000 images in them) and local database storage for tracking user interactions. We also relied on lots of hardware accelerated CSS3 transformations for coverflow style galleries, interactive panoramas and other full screen effects.

Of course Safari itself isn't suitable as a public kiosk style platform so our coding guru, Jason Frame, created a full-screen browser using the Webkit engine that we called the Story Player.

The Story Player has a plugin architecture the allows low-level integration with the OS and other hardware controllers all of which are exposed through a Javascript API. Standard web development techniques were then used to create exhibits that could interact with devices beyond the scope of their web page.

Alistair Macdonald and Tomek Augustyn developed a custom framework for the multi-player Flash games. This used the Red5 server for communication between the player machines and all of the content and configuration was managed via the CMS.

Always keen to include some generative graphics, we created Quartz Composer based screen-savers for the eIntros that slowly undulate in a mesmerising fashion. We also used Processing for the Donor Wall, an interactive name-scape of over 6500 people that donated money to the Riverside Appeal. An on screen keyboard allows you to search for your name and highlight it on the screen.

A show control system was also built into the CMS. Our network and hardware guru, Ian Airley, developed a custom network protocol that talks to the Macs, projectors and other networked media players to turn them on and off and trigger other scheduled operations, all via the CMS. We also use OpenNMS to monitor the whole network.

Although the majority of the code that was created for Riverside will have to remain closed-source there are a few tools that we hope to be open-sourcing. The first is a Ruby deployment tool called Makitzo (as in "make it so") which proved indispensable during the installation stage for getting all the Macs configured across the network.

The legacy

Two weeks before the museum was due to open on June 21st we found out that 55 Degrees was going into voluntary liquidation. Suddenly we were all out of a job and only had fraction of our work from the past year installed and tested in the museum!

Luckily Glasgow Life stepped in and contracted the Riverside team for the rest of the month so we could get the job finished. Although it has been a difficult end to an amazing project we are all proud to have contributed to something that will be enjoyed by millions of visitors in the years to come.

One of the saddest parts is that the Riverside team has now split up. It's been a privilege to work with one of the best grouping of video, design and software people under one roof.

With the demise of 55 Degrees we have setup a new website, 55stories.co.uk, where the Riverside team can be contacted as we're all now looking for new jobs and projects to work on.

As for myself I've formed a new company, Hyper Digital. It's about time I became my own boss and I intend on following my interest with interactive generative graphics and coding. More on that soon!

Last but not least, visit Riverside!

Thanks to Russ Kyle for many of the photos used in this post.

Fractal Lab

Sat, 05 Mar 2011 00:00:00 GMT

A WebGL based web application for rendering 2D and 3D fractals in real-time.

You will need a WebGL enabled browser, currently Google Chrome or Firefox 4 beta are the best choices, and a reasonably modern graphics card.

Watch the video below and then try it out over at fractal.io

Note: the current WebGL implementation for Windows requires the OpenGL GLSL shaders to be recompiled for D3D, which unfortunately adds significant delays to the initial rendering setup. Don't worry if you get popups about long running Javascripts, it'll get there in the end!

Surface Detail

Sun, 16 Jan 2011 00:00:00 GMT

An evolving landscape of a 3D fractal surface.

I'm currently working on a WebGL 3D fractal explorer that will let you explore structures like this in real time. Stay tuned!

Geometric organica

Sun, 26 Dec 2010 00:00:00 GMT

Delicate organic structures with a geometric twist.

Fractal baulble:

Fractal fruits:

A series of subdivisions

Sun, 07 Nov 2010 00:00:00 GMT

An experiment in subdividing fractal structures.

Street view:

Fractal flats:

The volume between intersecting bubbles:

Augustus Polyp

Wed, 28 Jul 2010 23:00:00 GMT

Music by Wim Mertens

Swimming in the Mandelbulb reef.

Little Planets

Wed, 16 Jun 2010 23:00:00 GMT

Little planets are created by applying a stereographic projection to a spherical panorama. It is possible to seamlessly move from a birds-eye view in the sky to that of a bug on the ground!

The classic little planet effect. View original panorama.

Equirectangular panoramas

To generate these images we start with a spherical (equirectangular) panorama. This is an image where the x-axis corresponds to the longitude around a sphere (0-360 degrees) and the y-axis is the latitude (-90 to 90 degrees). For any longitude or latitude position on a sphere we can retrieve the colour directly from the corresponding x,y coordinates on the panorama image. A proper equirectangular panorama should be twice as wide as tall, e.g. 1024x512 pixels.

Creating equirectangular panoramas is quite an art. If you want to create your own a few tutorials have been written on the subject. Luckily there is a huge selection of creative-commons licensed panoramas on Flickr we can start playing with.

Stereographic projection

Stereographic projection is a mapping that projects a sphere onto a plane, as illustrated with the world map below. It is conformal, which means that it preserves angles locally (note the grid lines still cross each other at right angles) although it doesn't preserve areas or distances.

As we already have the colour of each longitude and latitude point on a sphere from the equirectangular panorama the inverse stereographic projection formulas are used, as described by Mathworld.

Φ is the latitude and λ is the longitude. The parameters Φ₀ and λ₀ are user controlled and effectively set the projection point viewing position (try clicking and dragging the Flash demo below). R is the radius of the sphere, which controls the zooming effect.

Φ = asin( cos(c) sin(Φ₀) + (y sin(c) cos(Φ₀) / r )

λ = λ₀ + atan( x sin(c) / (r cos(Φ₀) cos(c) - y sin(Φ₀) sin(c) )

which relate to the pixel x,y positions via:

r = sqrt(x² + y²)
c = 2 atan( r / 2R )

Interactive Little Planets

Click and drag your mouse in the Flash movie below to change the longitude and latitude of the viewing point. Press any key to change the panorama image.

Download and installation

The Little Planets plugin will work with Adobe Photoshop, After Effects CS4+ or directly using the free Pixel Bender Toolkit (PBT). See the Pixel Bender Technology Center for details on setting it up for your system.

Download the plugin

PBT: Just open the LittlePlanets.pbk file, choose a source panorama image and hit 'Run'.
Photoshop: Copy the LittlePlanets.pbk to 'Pixel Bender Files' folder within your Photoshop installation directory. Note, you need to have the Pixel Bender Plug-in for Photoshop CS5 installed first.
After Effects: Copy the LittlePlanets.pbk file into the Plug-ins/Effects folder for your installation.
Flash: There is an example Flash file used to create the movie above.

Usage

Input image size: must be set to exactly the same width and height of the source panorama in order to get a seamless result. When using within PBT you can use an image up to 4096x4096 pixels to create the highest quality results.

Output image size: the final output size. Best results are often obtained when the input image size is at least twice the output size.

Center point: pan the image to centre the area of interest.

Longitude and latitude offset: positions the projection eye. Try pushing the latitude above about 180 degrees to transform the planet into a tunnel!

Zoom: has the same effect as the field of view.

Wrap effect: wrap the projection as you zoom into the image from planet to tunnel. A 'Droste'-like effect.

Twist: twist the image by an amount proportional to its distance from the centre.

Bulge: can create some crazy distortions.

Super sampling: option to average 4 or 9 samples per pixel to smooth details where the image is shrunk. Useful when creating animations.

Push the latitude more than 180 degrees and you get a tunnel instead! View original panorama.

Image credits

The panoramas I used in this article were taken from Flickr and are creative-commons licensed:

Kyu Shiba Rikyu Garden: on the bridge by heiwa4126
Outside the Saint Germain en Laye church by Seb Przd
Immersive Saint Etienne du Mont by Seb Przd
Green Eiffel by Gadl
Equirectangular world map

Also thanks to Josh Sommers for suggesting the filter in the first place and beta testing it.
Check out some of his amazing work!

All images on this page released as Creative Commons, attribution, share-alike, noncommercial.

Update: there is another implementation of stereographic projections using a different algorithm for Pixel Bender and Flash over here that I wasn't aware of.

The Pyramid

Sun, 09 May 2010 23:00:00 GMT

If I were a Pharaoh this is what I would build.

Over time the structure becomes a mountain.