Creating Fantasy User Interfaces (FUIs)

COSMOS MOVIE PRODUCTION BLOG 15:
CREATING FANTASY USER INTERFACES (FUIs)

---

You’ve probably never heard the term ‘Fantasy User Interface’ but I can guarantee, you know exactly what one is.

An FUI is the super cool and futuristic computer display system found in movies, TV shows and computer games. Obviously these FUIs are not real computer programs but bespoke animations created with the purpose of helping tell the story. In modern filmmaking, most of these FUIs are added in post production but some films still feature on-set displays that the actors can interact with.

Image Copyright: Paramount Pictures Inc.

Image Copyright: Warner Bros. Entertainment Inc.

Image Copyright: Marvel Studios Inc.

For COSMOS we need to create several FUIs of our own, and in researching the topic we found ourselves entering a vibrant sub-culture of FUI designers and admirers. If you’re interested in learning more about the cool user interfaces in your favourite movie, please check out Kit FUI which is basically an IMDb-like database for anything and everything FUI. You can also lose hours marvelling at the intricacy of these designs and enjoy the talents of their creators such as Jayse Hansen, OOOii and Mark Coleran.

---

 

Moving onto COSMOS we need three different displays for the three main characters to work from. As discussed in a previous post about Building the Goodman Satellite in Blender, we’re big fans of practical and physical effects (for both photographic and budgetary reasons!).

We really want the actors to view and interact with ‘real’ FUIs rather than compositing them in later in post-production. Therefore we’ve had to create these three FUIs ahead of shooting the film. And the first step is of course designing our very own cool looking computer displays.

Initial Designs

After putting pencil to paper, Zander made some Photoshop mock-ups to help realise a final design.

Radio Render Concept

Scope Viewer Concept

Sat Tracker Concept

We’ve tried to make our FUIs feel sleek and stylised but not overly futuristic. We’ve also tried to create three FUIs that are visually distinct, so if we choose to cut quickly between displays the audience will be able to follow the action.

The next challenge we faced was turning these Photoshop mock-ups into fully interactive interfaces that the actors can type commands into. The first step was to go through the script and identify all the separate animations we’d require to tell the story – e.g. the Satellite Tracker programme needs several different animations showing a variety of satellites, all with unique orbital paths and data. The keen eyed among you will have noticed The Goodman Satellite can be seen passing over the North Atlantic Ocean.

Using the photoshop concepts as reference, the three FUI designs were finalised. These designs formed the background of the html page with small boxes cut out where the individual animations could be embedded.

Zander then spent months painstakingly creating all the separate video animations in After Effects – these animations were scaled to fit the box dimensions specific to their position in the FUIs, and nearly every animation had two if not three variations. For example, below is a small satellite previewer that is part of the larger Sat-Tracker Program.

Our good friend (and all round computer-whizz) Simon Worthington created all the necessary html, javascript and css framework and we are eternally grateful (!!!), his epic skills allowed us to simply add the animations and select relevant commands for them to be played. We now effectively have a functioning website that instead of being hosted on a server for everyone to use, is hosted locally on the computer’s harddrive – allowing for instant loading (no buffering!!!) and most importantly allowing the actor-interaction we were aiming for! With a tap of the keys our actors can control the screens and what’s on them… want to track a satellite? Just enter the correct command and watch the screen fill with activity as it tracks said satellite! We get a kick out of it every time. I feel like Dennis Nedry.

For more complicated processes like bootup and shut down, Zander created dedicated animations that pop up, fill the screen and cheat the fact that the system is booting… not gunna lie, it’s pretty sweet. (see below)

In total Zander reckons he’s created between 30 and 50 bespoke animations for the different programs, it’s been one of those long processes that has been many late nights in the making, but now they’re done and they’re going to look great on camera.

For your viewing pleasure below are two samples. The first is the bootup animation for the Scope Viewer/Controller and the second is another animation from the Sat-Tracker showing the positioning of selected satellites over a world map. Hope you like ’em!

 

 

Thanks for reading guys and for the herds of Jurassic Park fans out there, please please PLEASE check out Jurassic Systems which is a faithful fully interactive recreation of the JP FUI.

And for the full movie experience, type command music on and then see if you can outwit Dennis Nedry, but remember… don’t forget to say the magic word!

---

FIND NEDRY! CHECK THE VENDING MACHINES!

Zand & Ell

Thanks for dropping by!

Elliot & Zander Weaver
Directors / Producers @CosmosMovie

 

Posted by reeldealfilmschool on October 23, 2014

https://reeldealfilmschool.wordpress.com/2014/10/23/creating-fantasy-user-interfaces-fuis/