Two Screen TV

David — Fri, 15 Apr 2011 04:25:13 +0000

GOAB

What do you do when you’re watching tv? It’s old news that we multitask — using our laptops, ipads, and phones, and do all sorts of stuff. So it’s interesting to see these recent iPad apps that try to build on that activity — giving viewers a parallel track of information to accompany what’s on the tv.

Disney is using their Second Screen technology to accompany select DVD releases. Running on an iPad, the apps sync with the tv to give at-the-right-moment background information about characters, concept art, and behind-the-scenes info.

Joey Interactive has a similar, although expended, concept demo, for an advanced TV Remote Concept called GOAB. Here, users can get data on live events (like sports and news), play along with game shows, and shop for what characters in shows are wearing. It has echos of the information-rich experiences Quokka was developing in the late 90′s.

And last year ABC had an app that accompany their show “My Generation.” It let users vote and do polls in real-time while the program aired. But the reviews weren’t especially kind — saying it felt didn’t make the experience social enough.

What’s unclear is how much we actually want to engage with content that’s related to the program we’re watching. I’d argue that most of what we do is separate — we’re emailing, chatting with friends, and surfing the web. These apps seem more about trying to discourage multitasking, than to support it. Almost old-fashioned. Still, the technology is pretty cool. Maybe the real killer app is yet to come.

Interview: GMUNK (TRON: Legacy)

David — Wed, 02 Mar 2011 20:54:59 +0000

For Disney’s “TRON: Legacy,” Bradley Munkowitz, better known as GMUNK, was the lead animated graphics artist. He assembled and led a team of GFX all-stars who conceived, designed and animated approximately 10 minutes of UI sequences and holograms at Digital Domain for director Joseph Kosinski and visual effects supervisor Eric Barba. I was so happy that he agreed to do this interview about his involvement in that film.

Q: Can you talk a little about your background?

I was born and raised in Minneapolis and moved out to California when I was 18. I attended Humboldt State University up in Arcata and I studied Fine Arts and Filmmaking there for 6 years while cultivating some extra dendrites in my brain. Upon graduation I moved to London to work in interactive. I worked on interfaces, web design and interactive media, doing a lot of Flash work for about 3 years after college, and that’s where I got a reputation for building interactive experiences through my site gmunk.com. I finally ended up in LA, and got into motion graphics and commercial directing through working hard and knowing the right people to make it happen.

Q: It’s an interesting transition to move from interactive to motion graphics…

Yeah, I was sick of the limitations of the interactive medium, like having to deal with making file sizes really small so people could download it, and of course the slow playback issues trying to push too much data through. I wanted to make pieces without that concern, focusing purely on the creative, knowing I’d be creating something that people could just watch and would play flawlessly.

However, I’m finally veering towards getting back into interactive, now that I’ve seen it mature into things like installation art and concert visuals, which is the coolest shit right now. Holographic projections, interactive art, data visualization, the maturation of the mobile platforms… I think all that stuff has come of age, so that now you can mix the desires of motion graphics and a reliable experience with the interactive facets and not have to worry about the delivery medium anymore… Give it 5 more years and it’s all gonna be completely immersive 3D and almost real-time transfers.

Q: How did you get involved in “TRON: Legacy?”

I knew [director] Joe Kosinski through a mutual friend from New York, back in 2001, who had worked for him at KD Labs. But I didn’t actually work with him until a few years later when I did an animated UI for a Hummer commercial that he was directing. That was the first time that I really worked with him, and we had a lot of fun together. It was a natural fit, our two minds — mine completely hyperactive and on permanent ffwd, and his wickedly brilliant and under control.

For the TRON gig, he hit me up a year before my actual start date, as originally we were talking about me doing the on-set graphics for the shoots. In the end, that got outsourced to a different company. But a year later he brings me in and shows me a video clip that I’ll never forget. It was called “hologram_REF.mov,” and it was all this previs of the hologram sequences for the movie that we were being asked to do; it was like 8 minutes of content… And I’m all, “we’re gonna need to build a GFX black-ops swat team for this…”

Q: What was the scope of the project?

It started as about 8 minutes of content and our original booking was for three or four months. Eight minutes became 12 minutes, and the GFX team started to inform Digital Domain’s (DD) Houdini team on some sequences as well, like the fireworks and portal climax. And then they ask, “Can you do the graphic portion of the opening titles?” Insane! Of course there was never the word ‘No’ in any of these conversations, so it ended up being a year and a couple months for the entire booking, me going the full duration and a couple team-members on rotation. We were so inspired and so up for anything they threw at us – it was such a great gig.

Q How many people were involved in the project? What was your role?

I don’t think we were ever bigger than five at one time, but our team, in total, was seven on rotation. They was me, functioning as the point-man for Joe / DD and I guess Creative Director of the team… Jake Sargeant was another lead designer and my right-hand for a majority of the gig — we worked in close tandem as much as possible to define the design and animation directions for specific sequences. . The multi-talented David Lewandowski, “dlew,” was the lead animator on a majority of our sequences and was deep deeep in the trenches with me all the way til the end. Others included the wicked-awesome Houdini artist Adam Swaab; Joseph Chan, a designer / animator and a helpful hand; and our core mojo, the genius code-artist Josh Nimoy, who built us all sorts of little graphic applications to use in both the conceptual stages and during production. Of course, a lot of us functioned in multiple roles… for instance the Solar Sailor sequence would have all of us credited as designers, as there was so much to design and execute.

Q: What was the working process like? How did the designs evolve?

It was a really nice organic creative process working with such high-level creatives as Joe and visual effects supervisor Eric Barba. We definitely came away from it feeling like no idea was compromised too much. In the commercial world, you’ll throw up all sorts of ideas during the pitch — but often ad agencies have a very set vision of what they or the client wants, so they won’t let you flex those ideas and explore as much during the initial phases. Whereas with Joe, he supported every idea we threw at him, and wanted us to develop them further. He pushed our creative in the right direction.

Early on we would get a bit more time with Joe. He would come and sit down at our computers and we would show him stuff, talk, and sketch in our sketchbooks with him. Joe was very accessible during that process and it really helped bring the graphics ‘to their maximum potential.’ Towards the end of the gig, when he was getting a lot busier with the sound design and finishing the movie, we would post dailies and look at it together with Joe and all the creative leads from DD. So of course, then everyone started to chime in. We called it “the firing squad” — it wasn’t as awesome.

Q: Can you talk about some of the different interfaces in the film…

Quorra Hologram Sequence

This sequence was definitely the most conceptually challenging for us and the one I’m most proud of. It started with a very loose brief from Joe — he wanted the representation of Quorra’s DNA to be “beautiful, like a flower” and something that has ‘never been seen before.’ We were told Flynn was to identify the ‘damaged code’ in her DNA and then extract it, healing her data with a blow, allowing her arm to grow back… Because she’s an ISO — she’s one of a kind — we wanted to take her DNA and make it super-unique, resembling something from nature, yet still remaining very graphic and obviously holographic. We asked ourselves, “What would the DNA of an otherworldly being look like?” And “how the hell does Flynn traverse the layers of her data foundation to access it?”

For design references we looked at a lot of Ernst Haeckel, the German Biologist who rendered these really amazing organisms that were like graphic prismic coral, for lack of a better explanation. He was one of our primary inspirations because we wanted all of our designs to look and behave like they could be living organisms, like flowers, while retaining some graphic structural rules. We also researched infinite fractals, hexagonal mesh cages and studied data visualizations of voronoi noise algorithms and isometric surfaces. In the end, all of this research informed the designs used for the container that held her DNA.

We presented to Joe a bunch of different design examples and a sequence. The presentation was like a little science presentation. I’ll never forget that night, late after dailies, and all the DD producers were anxious to see what the hell they’d been paying so much for, haha… Thankfully, after asking me what I’d been smoking, Joe ate it up and it was blue-light forward.

The sequence started with opening up the data through navigating a hexagonal outer mesh, or the ‘HexSphere’ as we coined it… We wanted to align with the hexagon metaphor used throughout the film, so the initial layer needed to have the most commonality with its surrounding world. Once Flynn breaks through the outer layers of the HexSphere, he reaches the IsoSurface — which we called the ‘Contour Heart.’ It was a Nimoy creation, with our direction, and quite amazing. Too bad it’s only on screen for like 5 seconds. The IsoSurface holds Quorra’s DNA, so to break through the IsoSurface, Flynn uses a Voronoi noise algorithm, wading through a web-like interface to break open the DNA.

Then the DNA forms (with some amazing sound design — thank you Joe and Co.), Flynn ultimately finds the damaged code, and, as he releases it into the wind, it flutters away. (Joe insisted that the damaged code have wings that fluttered like a butterfly — TRON world has it all, man.)

Looking back on the sequence, I mean, the design could have been the most complicated thing you’d ever seen. It could have been hundreds of layers all at the same time pushing through — like “Iron Man 2″ craziness. But instead we chose to make it more slow moving and elegant, with each element carrying a heavy and substantial feeling. Every single detail that we put into it had a purpose — just say no to greeble. (Although, I still think the IM2 motion graphics are the sickest ever done to date.)

Rectifier Extraction

Another prominent graphics task was the Disc Rectifier extraction scene. Clu gets his dirty hands on Flynn’s disc and he puts it into the rectifier to extract all its data. Our task was to represent that data, first as a chaotic assemblage, then organizing it into concentric rings of decoded data… We primarily studied disc defragmentation diagrams and sought to modernize that aesthetic, because for Flynn, creator of the TRON universe, his disc defrag diagram had to look like an other-worldly disc defrag data representation. We came up with a visual language that felt more natural and insanely detailed. dlew flexed his moGraph muscles to the max, and we worked with compositing supervisor Sonja Burchard to bloom the graphics with a gorgeous shallow depth of field, making it feel even more extraordinary and natural, even though the core structure is informed by the disc defrag diagram.

Opening Title Sequence

The most challenging in terms of pressure, by far, was the opening title sequence. The original TRON title sequence is probably still one of my favorite graphic title sequences ever made. It’s beautiful — really simple but graphically dense, especially for the time period it’s from. So, of course, our first inclination was to pump insane amounts of detail into our portion of the OT sequence, making it the most epic city build ever put to screen. We hired another code artist named Karsten Schmidt to help us previs how the city builds, giving us sliders to control their behaviors, and how the lines interact with the buildings… In animation phase, we pushed that high-level of detail even further, filling the streets with interesting grid-based design patterns and allowing the blocks to gradually form from these initial patterns. And for the buildings, we were basically drawing every single window as the buildings were forming… Lead animator dlew animated the whole thing by hand, in Cinema 4D, carefully weighting each keyframe to follow the VO and punctuate key phrases… We were set to execute a really impressive display of detail. But then the sequence got more and more simplified – to a very tasteful, almost minimal aesthetic… Joe loves his minimalism, and looking back, it was definitely a safer execution that won’t date as much.

Q: Were there any design references from the original “TRON” that you brought into Legacy?

A few, sure. In the original film, at the end when they defeat Master Control and the world comes alive with light — they show the mountains and the lines with light points on them cleansing the world and making all those beautiful geometric patterns and shapes. It’s like a Syd Mead moment. We referenced that over and over because, aesthetically, we thought they were the nicest lookn’ frames from the original. There was some nice animation they did with the Disc game courts – how they animated on and off – that we referenced for the Disc Game scoreboard and in our concept art for the Portal Climax… We referenced the graphics on the wall in Zark’s main ship for its amazing design and density. And we used the supplied Encom font for a lot of our interfaces… But for the majority of our sequences, we stayed away from the original in our design references — just so the graphics in this film could be their own thing.

Q: How did you approach designing interfaces in the TRON world, a world that’s inside the computer? What does it even mean to have an interface inside a digital world? Do these interfaces need to hold-up in the real world?

Oooh really good question… You know, I gotta be honest, we never had a briefing where the rules of the world were defined.. Nobody ever told us exactly what can and can’t go down in TRONland, so we just made up our own rules regarding holographic design and interfaces, which were: they are very hi-res projections that can be controlled, interacted with, spun, flicked, plucked etc; they give off a lot of pure light and come from a natural technological foundation; and Flynn, since he was the creator, could call up these interfaces wherever and whenever, on surfaces, in the air, on peoples discs, etc.

During the Solar Sailer sequence, we got to really push the design language because he doesn’t really need to use an interface, he created everything… He knows exactly where he needs to go, so the interface is basically around his hand as it moves and he directs the interface with simple gestural commands — everything directly at his fingertips. He can move and touch and tap anything in space and an interface immediately comes to him. We did that for the elevator, too: when he stops the elevator and he throws his hand at the screen, we just put an interface in his hand…

Of course there were a lot of tasks that were by-the-book graphic design, for tablets, projection screens, glass panels etc… The aesthetic we used for those interfaces was a very clean, grid-based UI — like all the other stuff you see out there.

Q: Were there any special challenges as you worked?

Yes, many. First and foremost were the growing pains of integrating a bunch of motion graphics artists into DD’s high-end vfx pipeline. The key nemesis was getting depth of field (DOF) and motion blur into our renders. Because some of our sequences were shot with large apertures, everything had exaggerated DOF so it was tough for us to get it looking right, especially getting approval through “master blaster” Eric Barba, the vfx supervisor. We had to change our renderer from Cinema 4D to V-Ray, and port all our openFrameworks apps to Houdini. We even had to bring in our own Houdini master to design and render the DNA out of Quorra to save on all sorts of sabotage etc…

We never saw anything with sound design or music, so we couldn’t really animate anything to a specified beat or audio hits… I’m a really big audio guy, I have been editing and animating to pre-design tracks for over a decade, so to not have that audio direction from the get-go proved challenging. To compensate, we put in a bunch of animation cues assuming that they’d nail the sound design later on… And hearing the sound design that they came up with for some of our sequences was such a treat, it completely changed some of our stuff from where we were taking it… For instance, when Clu takes Sam’s disc and he looks through the clips from Sam’s past, the sound design that they did for that was suuper awesome — what a treat. Thank you, Skywalker Sound.

A big challenge for us was choreographing the actor’s hand performances when they interact with the graphics, as they did the hand filming way before we got involved. I feel like the graphics could have been considered a little bit more when they shot the hands, especially Flynn’s during the Solar Sailor sequence and the EC Elevator shot… Like I said before, a lot of sequences were captured with large apertures, so, on some of our shots the focus wasn’t on the graphics during key story point moments… In addition, characters’ eye lines were different from shot to shot and sometimes hand gestures were very lackadaisical, which we had to match the graphics animation to… All in all, we worked with what we were given and it was all good, just challenging to say the least…

And lastly, doing the stereoscopic renders for graphics was hard, especially for all the particle heads and simulations we were doing. For stereoscopic renders, everything has to match perfectly in both eyes so nothing becomes fuzzy or soft. Some of it was just doing graphics on cards that would then go through the DD stereo pipeline, which was easy. But in some scenes we were rendering both eyes, even supplying stereo pre-comps of the elements, so we had to test things over and over, adjusting frame by frame certain particles or bits of data. It was tricky for sure, but well worth it… DD offered a lot of help to get the tools we needed to integrate into the pipeline, assigning mega geniuses Jonathan Gerber (digital effects supervisor) and Douglas K. Wilkinson (lighting artist) to get us up to speed with V-Ray and integration into the pipeline. Without those two, it wouldn’t have been possible. They were our superheroes.

Q: Other than the custom programming, what other software tools did you use?

We used the Adobe design tools, Photoshop, Illustrator, AfterEffects, etc. We also used Cinema 4D, a 3D package aimed more towards the motion graphics industry, with its insane MoGraph plugin suite… We used it heavily, and also rendered a bunch of key graphics out of c4d V-Ray for proper DOF and motion blur, dlew was in control. We also used Maya for some pipeline enhancements, and Houdini for the DNA and as a host for Nimoy’s openFrameworks applications, which were ported over to Houdini by “The King,” effects animator Andy King. It was definitely the way forward, getting our stuff deep into the visual effects pipeline.

That’s how we did the fireworks during the light cycle sequence. We first wrote an openFrameworks app with Nimoy, creating the design and behaviors of the fireworks, as well as the shape and all the other attributes. We then perfected the app with feedback from Joe; I’d create slider presets of the key design settings that we then ported to Houdini, which ran them exactly the same once the app was ported over. Being able to re-create the designs exactly, we rendered them out of Houdini through the DD pipeline and off to comp it went. Pretty solid design process for sure…

Q: Anything you’d like to re-do, or do differently?

There were a couple tasks that I didn’t feel we nailed… Definitely, the scoreboard, the first graphic task we had. I felt we could have made it more natural and ethereal, like our later designs. The final result was just too much simple graphic design and not much else, although we did put a lot of time and effort making sure it was functional and that it properly simulated the bracket behaviors of match play… But overall, I would love to keep working on the scoreboard.

For the opening titles, I wanted to pump more detail into our graphic portion. I think it came out too simple for what it could have been. We had a really sick design for the linework that got pushed in a different direction. Conceptually, it was a better direction, but the design suffered… I mean, we’ve received a lot of positive feedback on our part of the sequence, but we definitely would’ve pushed it further if we got another shot at it …

Q: Any interesting Easter eggs in the graphics?

Yes indeed. We put a bunch of our personal icons in the UI’s, and our names all over the boardroom scene, on the projection, the light table, and when Marv shuts down, which won the award for outstanding achievement… Mr. dlew, our lead animator, got his name in a frame that’s legitimately visible and beyond, os12dlew forever and ever…

Q: Thank you for your time to do this interview.

My pleasure David, hopefully I made some sense of it all. TRON: Legacy was an amazing experience and we’re excited to share our design process with the community…

Want more GMUNK? He’s going to be speaking at FITC Toronto 2011 — May 2-4, 2011 in Toronto, ON, Canada. And the cool people at FITC are offering a 10% discount to Inventing Interactive readers. To get it, use the discount code “inventinginteractive”. (They also gave away a pair of Festival Tickets to one lucky Inventing Interactive reader. But that raffle has ended.)

Movie: Tron

David — Wed, 31 Mar 2010 14:37:33 +0000

After seeing this fantastic fan-created re-imagined trailer for Tron (source: Gizmodo), along with being excited about the upcoming Tron Legacy, I thought it could be interesting to take a look at the interfaces in Tron (1982) — a film I have a crazy nostalgic love for.

The world envisioned in Tron is distinctive and stylized — unlike anything seen before. And although they don’t exhibit much complexity, or push any boundaries of interaction design, the interfaces have a look that fits into this world.

It’s interesting to note that none of the interfaces had any text. And, except for one scene aboard the Solar Sailer Simulator, interface is never important in developing the story. Perhaps, inside a digital world, there isn’t really any need for interfaces or interaction.

It’s a beautiful film, even if it doesn’t hold up particularly well today. So here are a handful of interfaces in the film…

Tron. Real world: glass keyboard in a desk

Tron. Activating the Light Cycles

Tron. Hanger bay (is that a mouse on the blue cable?)

Tron. Aboard the Solar Sailer Simulator

Tron. Solar Sailer Simulator navigation controls

Tron. Sark's ship

Inventing Interactive » Tron

Two Screen TV

Interview: GMUNK (TRON: Legacy)

Movie: Tron