The rectangle behind you
The wild presentation network for the Computer History Museum talk
In 2012, the Computer History Museum asked the Google doodle team (of which I was a part then) to give a panel talk called The art & technology behind Google doodles at their wonderful facilities in Mountain View, Calif.
The format: the Museum CEO John Hollar moderating, four members of the team — Ryan, Jen, Kris, and I — speaking, and the audience asking questions.
This is the end result, which I am very proud of — although not for the obvious reasons, but because of the custom tech we put together for this.
Here’s the problem we were facing: the freeform panel format, and the audience Q&A would mean we couldn’t really prepare a strict, linear presentation. However, I really wanted us to be able to show examples of what we were talking about. Our work was very visual, after all. I also knew people reacted positively to slides showing creative progress on the doodles, and I wanted to add them in.
So, I built a system we named “Spartacus.” The basic idea was a random-access remote, allowing us to pull up, on the screen behind us, any one of thousands of doodles. It needed to be fast (we didn’t want anyone to struggle with operating it) and magical (the audience should not be exposed to any of the UI).
It seemed simple, but simple things usually aren’t. I had no idea how crazy intense this thing was going to get.
The basic conference talk setup is usually a laptop connected to a projector, with a person operating the slides via keyboard:
If your slides are in HTML, you are probably running a little local server and the presentation is your browser in full-screen mode, showing pages from that server:
You can put a remote in the presenter’s hand, talking to the laptop via infrared or radio. The presentation remotes mimick keystrokes:
Whenever I want my remote to do magical things (something interactive on the slide, showing me the timer, some Turing Machine freedom) — I usually grab my iPhone, open a web browser, and load a new page from my computer’s server. Just as the first page is a little web app showing the presentation, this new page is a little app dedicated to be a remote’s UI.
The phone talks to the computer via wi-fi. I can create a private wi-fi network on my computer, but I found it unreliable. So, I usually bring my wireless base station and create a separate isolated network for the two devices to talk to one another.
If your remote is good enough — e.g. it covers all the functionality of your presentation — you don’t need the computer visible on stage with you, and can hide it. Of course, this is a bit risky; if something goes wrong, it will be harder to fix it. I usually add special layers of protection: computer quietly reconnecting to the remote if things fail.
This is the usual setup for a talk. For the Computer History Museum, we started from there. We had four people talking in the panel, but we didn’t want them to fiddle with remotes. Controlling the presentation was another team member in the first row of the audience, pulling up respective Google doodles as we talked about them. We used a Nexus 7 because we didn’t have to worry about pocketability.
This, below, is the Nexus 7 interface I built. The “home screen” is filled with buttons that summon doodles to the main projector. We picked the ones that we thought we would be most likely to be asked about:
(The currently active doodle is marked in red.)
However, if any other doodle came up during our conversation, I built a fast search-as-you-type UI that one could use to show up any out of the almost 2,500 doodles to date:
That doesn’t solve the problem of the interactive slides illustrating the creative process. It would be awkward for someone else to control them, so we added another Nexus 7 that we had among the people on stage and used occasionally.
Here’s some examples of the basic interactive slides we had. Upon tapping the ZX Spectrum doodle, there were a few sub-options:
For Sesame Street, there was a slider one could drag to show progress:
We also plugged in another computer, just in case. If something went wrong with the main computer, we could designate the other one to be projecting. (This wasn’t 100% fool-proof, since the web server was on the first computer still, so the failure of the first computer would crumble the entire setup.)
We also decided to add a few Computer History Museum intro videos that start their every event to Spartacus, to minimize switching computers at the beginning. This required another Nexus 7 to be added and handed over to the museum staff for early operation:
Lastly, the museum asked us for help in recording the unpredictable slides… so we decided to add yet another computer to the network, and run Camtasia (screen recording software) on it.
The Node.js server we put together was essentially broadcasting signals and could theoretically accomodate infinite number of devices… but this was already two more than we ever tested.
I built the system so that devices talked to one another all the time, even when there was nothing to talk about, just to make sure everyone’s alive. Reconnecting was close to immediate and, most importantly, invisible to the audience.
On the left is the example of chatter happening in the ether, on the right, an example of a reconnecting message on the remote:
You don’t see it much during the talk, but throughout the event, I was constantly stressing out that something was going to fail. Miraculously, however, it all worked. Every remote did what it was meant to do, the main computer never failed in projecting the right slide, and the audience was completely oblivious to the cacophony of messages exchanged between three computers and three remotes strewn across the big room they were in.
They were just there to learn about Google doodles, and, hopefully, we delivered — the software was there just to help. Which is otherwise a great way to think about any slide deck you ever do.
Later on, I used a similar (but much more modest) Spartacus setup for an interview I did with the amazing creators of Indie game: The movie, Lisanne Pajot and James Swirsky.
It worked well, although I wish I could have had someone in the audience helping me out instead of fumbling with the Nexus 7 myself (and, please forgive the roughness of this interview in general — it’s the first one I ever conducted).
Thank you to Ryan Germick, Kris Hom, Jennifer Hom, John Hollar, the A/V team, and the staff of the Computer History Museum for making this an amazing event.
The rectangle behind you, a series of articles about interactive presentations.
By Marcin Wichary (@mwichary)
