The biggest devils in the smallest details by Marcin Wichary

• Watch high quality video on Vimeo
• Download video (WebM, 124MB)
• Download audio (MP3, 50MB)

Transcript

Marcin Wichary: [0:06] ...but since we're in a movie theater, I have this little tradition. [sounds of a movie starting]

[0:42] This will all make sense, maybe. It's a movie theater. I always think that if I make somebody once feel the same way I felt when I was 15 and a movie was just about to start, then I've lived a happy life, I suppose.

[0:56] My name is Marcin, I'm a user-experience designer and developer at Google. I am here to talk about a couple of things related to doodles and hopefully it's going to be interesting.

[1:13] This is the doodle team. There are quite a few people whose only job 24-7 is to actually work on doodles and do all of those illustrations. As you will notice, I'm not part of the team. I actually asked some of the illustrator one day to just, "Hey, can you draw me a cat? Just spend five minutes to draw me a cat." A few of them right here. This is a cat I can draw, and I'm actually pretty good at drawing cats, believe it or not.

[1:43] I can't really contribute in any way by drawing, but I help with user experience, I help with JavaScript, I help with all sorts of things like that. That's kind of what I wanted to talk about.

[1:56] In case you didn't know, Google doodles started a long, long time ago in 1998. This used to be Google's logo back then.

[2:03] The first Google doodle was actually an out of office message. Larry and Sergey went to Burning Man, which is this kind of hippie festival around California. They said, "If something goes wrong we're just not there to fix anything, so here's the doodle."

[2:19] We still use doodle exactly for the same thing... that's not true. We do a couple of things with doodles. It kind of evolved slowly. They used to be very simple. It used to be our logo with maybe one or two letters superseded with a graphic. But, a little bit later they started getting a little bit more and more complicated.

[2:42] This is 2009, just this year. Those are really small pieces of art, as I like to think of them. They're more and more adventurous and more and more daring.

[2:53] We kind of see the same thing on the interactive site. This is the first interactive doodle ever. It's for Newton. It's very simple. As a matter of fact, let me show you again in case you missed it. As a matter of fact, one line of JavaScript. It was all optimized by hand by one of the engineers back before we used JavaScript compilers and what not. I eventually actually made a poster for him just because it's kind of a big deal. Today doodles run into tens of thousands of lines of JavaScript, just for something that goes online for 24 hours. Small beginnings.

[3:36] Pac-Man, which I worked on in 2010, was the watershed for us. It helped us realize there's actually a lot of opportunities here to do something really amazing with doodles. One of the more recent ones we did that was also very popular was for Robert Moog.

[3:54] As you heard before, we actually do interesting things. We're allowed to play with the Google home page in some ways that are pretty remarkable, considering this is a very important home page for us, right? We care a lot about people being able to search and people's browsers not crashing. But we also have a lot of amazing freedom that I'm very thankful for, where we can do things like what you just saw. Which is, both technologically really challenging as you can imagine, and even brand-wise it's kind of funny -- you have a zipper on the home page.

[4:30] I'm going to talk about a couple of those interesting doodles, but first of all, I'm a little bit of a computer technology history nerd. There's a lot of influence and a lot of inspiration for me in looking at some of the stories in computer history. So this is from 1977. I don't know how many of you actually either remember it, or saw it yourself. This is Atari 2600, or what they called later VCS, or the other way around -- first VCS than 2600.

[5:04] It was one of the first popular consoles that you could plug into your TV and actually do something with, right, actually play games. Those games were very, very simple, right? The Atari VCS was meant to do things like this -- one box meets another box and there's a box in the middle, and that's it. It was a very simple piece of hardware.

[5:24] In '77 everything that you could run on VCS looked like this. But by 1982, people built things like this. Only in five years. I know it doesn't look like much today; they are both very primitive, right? But look at this. The guy at the bottom, which is Pitfall, right, you see now it looks like a guy. There's all sorts of stuff happening, different colors. There's not just boxes of things. Right?

[5:49] A lot of these people in Activision and other companies looked at Atari [cut in recording] ... seven, to the people who created Atari VCS, they would have told them, "This is not possible." Right? We never meant for Atari to do things like that, and yet they figured out how to do it.

[6:05] This kind of reminds me a lot about web, right? A lot of the things that happen on the web constantly is the same story. If you imagine taking whatever you're working on, or whatever other people are working on, and bringing it back to Tim Berners-Lee in 1990, he'd probably say, "Get out of here, this is not a web. This is crazy talk." But this is all possible today.

[6:25] To show you haw primitive Atari VCS was...You probably all know how old CRT monitors work, right? You have this electron beam and it shoots pixels one by one, and kind of creates this line. This is of course slowed down. Eventually if you make it faster, you just go pixel by pixel, row by row, and there's this stream, and eventually that's how you get the whole thing, right? You go frame by frame, and if you make it fast enough, this is how it's drawn, right? Every old TV, every old computer monitor worked like this, right?

[7:01] Except Atari VCS didn't have video memory, so you literally had to construct the pixel at the exact right time before handing it to the electron gun, which is quite amazing, right? So you had to be very familiar with the timing. So you see those blank things on the left? A couple of kind of blank, black lines? This is where the programmer said, "I'm going to sacrifice two pixels because I need some CPU instructions instead." Right?

[7:27] This is like whenever I feel really bad about having to do something for I7 or whatever, I think back to this and say, "Those guys could really, really have a good time back then." Right? They had to count pixels literally one by one.

[7:39] So this is the Atari. There's a couple of books that came out. The one on the left is about Atari VCS. The one on the right came out more recently. It's about Commodore Amiga. I don't know how many of you know this. Really, really great books and really inspiring. So if you're interested in looking at how people hacked those computers before, and what we can learn from them, just pick them up.

[8:03] To just show you one example of a similar hack that we did... We had this doodle for a world's fair, which was this very simple loop, right? You could just see more things if you moused over, for example there's some animations here. Right here, right? So you're task was to kind of explore and find some of those animations, right?

But when you look at this, it's actually not very easy to build this in a way that would work everywhere. You can't really use flash. You can't use web kit, CSS masking. [inaudible 8: [8:23] 34] ray used to simulate a circle probably would work, but then some things stick out. Like if you have an animated GIF inside. So what we did actually, this is just a collection of three rectangles. Literally three divs with overflow hidden that are moving around. There's some animated GIFs in between, and it's all really nice illusions. I just told the illustrator, just give me a really thick circle so I can cover the edge. If I don't do that then I will have a lot of small rectangles and it will be much, much slower.

[9:11] So this was one of the examples of how we kind of hacked this technology into working, and how we kind of used something that's ultimately very, very simple, but allowed many people to enjoy it. Except we screwed up one thing. If you look at this, if you go to the home page, it's not at all obvious that this is a doodle that's interactive, right? This looks like an image. This was a little bit of a wasted effort for us because we did all of this work on those doodles, and many people didn't even realize this is something they could play with.

[9:44] So let me show you an example of another doodle that we built that actually we went into much larger detail about how we could interact with it.

[9:55] So this was Jules Verne doodle. The original idea was just to have something that's like "20,000 Leagues Under the Sea," and it looks like a ship, and something like that. But then we thought we could actually make it interactive. Because Jules Verne is all about exploration; what if we make a little doodle that's all about exploration? So we started working on it.

[10:18] This is the first prototype. You know, cute thing, you can go down and you can see all sorts of creatures. Except again, nobody will ever figure out there's anything happening here, right? It's just a doodle, and it doesn't even move so much if you don't play with it You have to use arrow keys which is very obscure.

[10:37] So the second iteration had some sort of UI where you could actually click on those things and move, and it goes left and right now. But it's kind of a little weird UI, right? It's just trying to be period specific, but it really doesn't work so well. So we weren't very happy with it.

[10:57] So eventually what we moved toward what just a joystick. Everybody understands a joystick. You can kind of drag it. You can still use keyboard if you want. It does kind of amazing things here. It's very simple. And we did user testing, right? Even though it seems like a very simple thing, so many people go to the Google home page that it's really sometimes hard to imagine what they could do. That's why we have to support every possible user interface ever, and we did some user testing to make sure people understand it.

[11:29] And lo and behold, they didn't, even though we have this joystick, many people didn't realize you could do anything with this. Somehow, many people inexplicably would try to click on those dials on the left. We had no idea why; that's user testing for you. It will tell you something's wrong, but it won't tell you why or how to fix it.

[11:46] Eventually what we did, and this is the final UI, was something like this. You see that the lever is pretty big, and it's actually glowing a little bit when you start. And if you don't do anything for a while, it's actually going to go down on its own, and tell you you can actually interact with it.

[12:04] You have arrows, so actually click on the arrows, and then you don't have to hold it because dragging is actually pretty hard for many people. If you click on the dials, we just glow the lever in the other side of the screen. It's like a super cheap UI trick, just look this way and you would hope that you could do it everywhere else, but unfortunately that's not easy. We could get away with it.

[12:29] Of course, what we also did was we built an accelerometer support, so you can move this thing around. This was pretty new back then... and I just disconnected my computer... that was a kind of interesting way to use one of the new technologies.

[12:48] All of these new technologies are great, but of course, a lot of people that come and visit Google home page, they don't have the newest browser. We oftentimes have to look back and think of what can we do to actually make it work in all the other browsers, and I'm actually a big fan of all the other browsers. I kind of like I6. Is it too early to say that? I don't know.

[13:15] As a matter of fact, here's the secret. This whole thing is actually running in I6. [applause] I'm totally kidding, it's not. [laughter] That would be cool. [applause] It's actually not running in Chrome either. Sometimes we do that for user testing, we actually recreate the entire browser, the entire UI in HTML so we have more control over it. We can pretend it's slower or add more buttons or whatever. I don't know, a lot of I6 fans in the audience, that's pretty cool.

[13:55] Again, going back to Van, you can see the top experience, the best experience has CSS transitions and everything. The middle one, it's a little bit more janky on I6, doesn't have all of the nice things, but it still works. And if people come to the doodle, they don't really know how it works in Chrome. Only us go and see everything in every browser possible.

[14:17] Most people don't do that, they just have one, so it's still a really nice experience for them. And if you don't have JavaScript, or you have a really, really old browser, you still have a gorgeous doodle at the bottom. That's how we try to do all of those things.

[14:32] And then you can sometimes get inspired by some of those challenges you have. I don't know how many of you saw this, this is a Stanislaw Lem doodle that ran about a year ago. It was this big animation, it was a game that you had rowboats and you had to interact with all sorts of different things, and it was done in Canvas.

[14:53] I started with Canvas because it's nice, it's fast, you get 60 frames per second. But of course, some browsers don't support Canvas. What I had to do...my page doesn't work...what I had to do was I had to create another version of it using DOM elements. It was identical, but instead of all this drawing bitmaps on Canvas, I had to put DOM elements the regular way, use background elements, etc.

[15:22] I had these two different paths for two different browsers. They were pretty sophisticated. As a matter of fact, there were four of them, because each one also had a version with spriting and without spriting. For development, you don't really want to sprite everything over and over again when the illustrator gives you new files.

[15:39] We had all of these complicated paths to do all sorts of different things, and it inspired me to do something. Look at this guy, this little bird that's flying around carrying stuff. Right now, it's a Canvas element. You will see that it's flying down and it's clipped by the background, etc. Drops stuff off.

[16:01] But now we have a level that's shooting, and this bird just flies away, but there's no Canvas right here anymore. At some point, the bird became a DOM element. Completely transparent to people, it became a DOM element, and it sits on the button on the page. And eventually when the player finishes the game, it's going to rejoin and become the Canvas element again, and nobody will know any better.

[16:23] But since we had these code paths for both of those things, I could then add just a little bit of code to make it more transparent, to switch between those without anybody noticing, and I could have this really interesting breaking of the fourth wall.

[16:37] Many people probably wouldn't even notice, but those who did, it's kind of cool, this bird comes out of the game and just sits on the button.

[16:45] Here's another example of something we did with Verne. I mentioned the accelerometer, which was by then supported in Chrome, Firefox and in iOS. Of course, each one had a different way of doing it. We had all of this code for three different devices, and we had to actually figure out ourselves how to go between one and the other, and those kind of values that we had right there were all experimental.

[17:15] We still had this one moment, on one Saturday we were working with engineer Chris, and we both had the same doodle, like you see on our computers, exactly the same version of Chrome, exactly the same Macbook Pro, and we both take our computers, leave them up and go left, and one doodle goes left and the other doodle goes right, and we have absolutely no idea why.

[17:42] We eventually talk to Chrome people, and as it turns out, some of the Macbooks have a different accelerometer chip. It was all reverse engineered by Chrome people, and we didn't know. By doing this doodle, we actually fired a hardware back in Chrome, which was the first time anybody discovered that there's this different accelerometer chip in half of the Macbooks. That was kind of funny.

[18:08] It gets even worse. I don't know how many of you remember this, just a couple of months, we had Olympics. I really, really wanted Olympics to support the Gamepad API because those are games. Why not, it would be kind of cool. Not many people have Gamepads, but those who do, that would be funny and maybe inspiring. Maybe they would get excited about Gamepad API.

Here's a rough timeline though: [18:31] this is August. Our initial plan was to have some static doodles. This is the time of Olympics. Some static doodles at the beginning, and then interactive ones at the end of it. The release of Chrome that supported Gamepad API in stable, for everybody, was just after. Just unfortunate timing.

[18:54] We were like, "OK, maybe we just release it and put a deaf blog post, but it was going to work in beta, most people won't see it, but this is going to be cool." We start working on the doodles, and they slowly start coming out.

[19:09] And then, magically, the release date of Chrome gets pushed forward by two weeks. Suddenly our doodle that's starting on the 7th is going to have Gamepad API for everybody. That's crazy. The next five days, I was on it all the time. I was collaborating with the engineer working Chrome.

[19:32] I was finding all these weird versions of Firefox that were built with Gamepad API, and we were talking to people at Mozilla, but we couldn't tell them why we care. We were like, we need your Gamepad API stuff, but we'll tell you later. We were building it all, and we're trying to put it all together.

[19:51] Eventually, on the 7th and 8th and 9th and 10th, we shipped doodles with Gamepad API support. The engineer did not have a heart attack because he was afraid that something's going to blow up. It's a home page, we will find out if something is wrong with something you build if you put it in a doodle.

[20:08] It actually worked pretty great, and we had this Gamepad API support. I don't know how many people actually use it here with the Gamepad. It's not a very popular thing, but it still works. And as a matter of fact, if you go to Pac-Man, we compiled in Gamepad support too, if you're so interested.

[20:30] That was kind of cool that we were essentially allowed to use an API on Google home page that was six days old. That was kind of scary. That was kind of a fun time.

[20:42] Here's some examples. This is again the Atari VCS, and how many of you know this game? It's too old for me even, but this is Yars' Revenge, and the guy who built it wanted to have this really cool looking explosion thing going on, shield in the middle. But this is Atari VCS, there's not much memory. It's just bytes, if not...I don't think it's kilobytes, it's hundreds of bytes of memory.

[21:08] What he did, he essentially dumped the source code of the game in here. What you see here is the game itself. It's really good in reading 6542 assembly, you actually maybe notice some things. It's again, kind of inspiring, that with those constraints, the person building it could still do something amazing. I tried to do that too, and I try to build things that work, even despite the constraints.

[21:37] This is the doodle that we had for the Fourth of July a few years back. We actually wanted to do a doodle for Rube Goldberg, but the birthday was the Fourth of July. We thought what if we do a tandem doodle, an overtly patriotic Rube Goldberg contraption? Here we go, it's a cute little animation. It works really well.

[21:59] But now think about it, how do you actually put it on Google home page in a way that everybody would enjoy it? You have a couple of options. You can put an animated GIF, but animated GIFs are kind of weird. They don't look so good, and you don't really know what's happening with them. You can stop them, you don't know when they load exactly each frame. Sometimes they're slow when they're loading.

[22:23] HTML5 video, Flash video, YouTube. Flash on YouTube, kind of cool but kind of heavy, and also wouldn't work on iOS. HMTL5 video, the reverse, it wouldn't work on all browsers. Individual frames, a lot of latency, a lot of bandwidth. CSS3 animations, you can imagine recreating all of this in CSS with transforms and stuff like that. That's not going to work with all browsers either.

[22:51] We invited our own thing that I called Crushinator, it's a Futurama reference. I don't know how many of you remember this. The way it works, it essentially looks at every frame and compares it to the next one, and creates a sprite out of the difference between those frames. You can see how it's being created right here.

[23:13] It's all, by the way, done in JavaScript, which is pretty cool. Everything we used to have to do on server we can now do on JavaScript. It creates a sprite, slowly with all of the deltas, essentially, between frames. You can see, it goes to the end.

[23:31] And now, when you play it, it actually just covers every frame with a new delta. It's this nice illusion and actually, it's easier to show it this way. It just overlays every new frame on top of the other one, and totally works on every device we want. We have absolute control over everything. It doesn't introduce latency all that much compared to all the other solutions.

[24:00] We have it, and we've used it in a couple of doodles since. And again, if you don't view source, and some people do actually. It's pretty cool when they reverse engineered it. You don't know any better, because it just looks like a regular animation. That's kind of the point, oftentimes, with what we do, of hiding the technology.

[24:19] I'm really, really excited about the fact, and all of you know this, that all of this is possible in JavaScript alone. What I have here is not I6, it's Safari. What I have here is Safari. And the way I control this presentation is essentially having two websites talking to one another, which kind of blows my mind if you think about it. These websites are talking to one another.

[24:42] It's all open web, it's all JavaScript, even on the server. It's not JS. I have my remote right here with my timer, and when I tap it, it just sense all of those things. I can swipe it and I can move slides. It's pretty cool, and it's all JavaScript. It's pretty amazing.

[25:00] There's one thing though. I was showing you the accelerometer, and for those of you familiar with Safari, Safari doesn't actually have built in accelerometer support. For some reason, it's compiled without it. The way I'm actually doing it, there's Chrome in the background supplying accelerometer data to Safari via web sockets, which is not terribly practical if you think about it.

[25:28] There's something cool about two browsers working together. It's something cool that you can take all of this and it's fast enough that you can use web sockets and make it happen. I don't think we'll ever have a doodle where we require the user to have two browsers running at the same time, necessarily, but you can think, for example, of a doodle celebrating a remote control for a TV, where I'm doing exactly the same thing I'm doing right now. That would be kind of cool, and who knows, maybe we're going to do that.

[26:00] A lot of this feels like hacking. A lot of these things feel very...whoa. This is the first time that ever happened. Let's see if we can get it back. This is the curse for mentioning I6. [laughter] It's this cable. All solid state. [applause]

[26:36] We like it so much, I can do it again. [laughter] Remember all of these things. It's like a little Bingo card, and it can obviously make it bigger. It's all of these hacks we all learned how to deal with I6 and other browsers. All of these things you have to do yourself. But of course, today, all of these new technologies is the same story, except the hacks are not documented anywhere.

[27:03] All of these things, like the Gamepad API, for example, in Firefox, the buttons are mapped differently. The web sockets change all the time, the flexbox model changes all the time, of course animation frame. It wasn't capped in Firefox, for a while, it went above 60 frames or something.

[27:20] All of these things you have to know, and it's a little bit sad sometimes, to realize that whatever we do with doodles, it always feels a little bit differently, it always feels like we're not doing something we're supposed to do, but in some way, I got used to it. In some way, I think if we were doing something that didn't feel dirty, we would probably already be behind. It's an interesting reality for us, and building some things with really cutting edge APIs.

[27:48] Somebody actually made this illustration of Google, and I stole it, because that's kind of true. It's kind of anything goes. Of course, the flipside of this is you have to be ready for things to fail. [siren goes off] That's weird. Actually, I'm joking. This is what happened. I'm recreating something.

[28:17] On May 21, 2010, there were people who called their tech support saying, "My computer is making strange noises." And you can laugh, and I laughed, because it's like, "Just close your Google home page. What's your problem?" Here's what happened though, and it took us a while to figure it out.

[28:38] There used to be a Firefox extension, maybe there still is, CoolPreviews. The Firefox extension loaded Google home page in the background. And you see where am I going with it. Normally nobody cares. We can handle the traffic of somebody having Google home page in their background.

[28:57] On May 21, for the first time, we had Pac Man, and it started playing automatically after 10 seconds. [laughter] You didn't even have to go to Google home page. Imagine all the scary stories that if you're not familiar with technology of robots attacking you or whatever, suddenly your machine is making sounds. And nobody knows why.

[29:17] During the day, we figured it out. We shipped a little update. If you see in the lower-left corner, we added this little toggle so you could mute the sound. And we also removed auto-sound unless you actually pressed a key in order to interact with Pac-Man.

[29:35] How do you test for that? How to anticipate things like that? In a way, you don't. I didn't really anticipate my computer falling down, I suppose. In some way, you just have to be ready. We have an amazing infrastructure, amazing engineers who can actually put something up within minutes. Get a hot push ready if something goes wrong or get the whole doodle down.

[30:04] We've done this a couple of times. For example, our doodle was doing something weird with CPU in some combinations of browsers and computers. Again, we can't really test everything, because it really is everything.

[30:15] Also, we were thinking ahead. We actually have the graphics for sound on and off ready, because we thought we might actually need them. Some of them, we are ready for things to fail. Here's an example from the Lem doodle. Every doodle, if you know, you can go and mouse over and look what it's about without having to quick and see the query.

[30:37] It's not a very well-known thing, and probably most people don't realize it, but it's a kind of cute thing. Of course, I'm a perfectionist, and my Lem doodle is not going to have a goofy yellow tool tip. I'm going to have a nicely written, handcrafted tool tip for every language, except I don't know all the languages, and the illustrator doesn't know all the languages either.

Of course, we made a typo, which you can maybe see. This is on the left, the wrong one on the right. The right one in German, I think it's the last word. The way I found out about this typo was I was called at 3: [31:01] 00 a.m. San Francisco time by some people in Germany, saying, "You need to fix the typo because people are getting angry."

It was kind of funny, because we had this doodle that was 17,000 lines of code that was doing all sorts of crazy things with the Google home page, including destroying it, as I will show you in just a second. The only thing we had to change was a Germany typo at 3: [31:20] 00 a.m. That was kind of funny.

[31:38] Why did I care so much about this tool tip looking like it belongs into the universe of the doodle? I kind of liked it. Let me give you a couple more stories and explain. This is another computer, from 1982. I know how many of you are familiar with this ZX Spectrum. It was very popular in the UK and some other countries.

[32:03] We wanted to have a doodle for this computer. Again, it was a joint celebration. It was also St. George's Day in the UK. We thought, "What if you make a St. George's day doodle that would look maybe related to this computer?" I was chatting with the illustrator and I was telling him, "You know what? We have to do it right." The ZX Spectrum, actually again kind of like Atari, had very limited graphics capabilities. This is 1982. These are some examples from the computer. They look kind of nice. But, if you start looking more closely, you will see.

[32:46] Technically you have 16 colors, which was kind of nice in 1982, except that you don't really choose them at random. You only get to choose two colors and only a specific combination of colors within each grid of eight x eight pixels. If you do it like this, you'll notice that each one only has two colors. So, all of these illustrations are pretty ingenious, because the illustrators have to work around this limitation of only being able to choose the combination of two colors in each grid. If you didn't know, you couldn't really tell.

[33:20] But, I'm telling Ryan, who was the lead illustrator on the doodle team, "Hey, we kind of have to do it right." I actually built him a validator, where he could drag an image and it would analyze it and see whether it would actually work on the ZX Spectrum. Here is an example of how it is being used by Ryan. It's telling him, "This is an invalid combination. There are three colors here." [drinks] Believe it or not, it took us 29 iterations to get it right. [laughs] We just had this talk yesterday. It was very inspiring to me.

[34:05] Why did I build this tool instead of a command line line or something? I like doing things. I like pretending that every project is a little bit more important than it really is. For example, this presentation had its command line and its console, because I'm like, "Every cool project should have a console."

[laughter]

[34:24] We all learned it in Quake, so why not? It's actually kind of useful. It tells me exactly what is happening between those guys and what kinds of events are happening. As you can imagine, it's hard to do all of these iframes and make them perform, so it is kind of cool. Going back to the ZX Spectrum, these are some examples of the iterations. There are nine of them. We literally had 29. You see that it started as something very simple. But eventually it evolved into a bona fide ZX Spectrum image...256 pixels, 192 vertically, all of the rules.

[35:00] We had it there for the 30th anniversary of the ZX Spectrum, earlier this year in the UK, which I was really, really proud of. I don't know how many of you know about this thing. This is the Pac-Man Q screen. Pac-Man had a bug. They would crash after 255 levels. The Namco people just thought nobody would ever go that far, so they didn't check and there was an overflow. It crashed and you couldn't finish this level. Of course, we had to Q screen our Pac-Man. [laughs] Even though why would anybody ever go there?

[35:32] But some people did. I think people just incremented the joystick variable. It's easier these days to cheat than it used to be. But we had it, because maybe five people would discover it. But it would be pretty amazing for those who did. I actually replicated a couple of other bugs from Pac-Man on purpose. I actually had to add this little clause [laughs] in the back tracker and say, "This bug is actually meant to be there and I put it there on purpose." For the lamb doodle, in which you saw the robots and whatnot, you know how on a Mac you have a black cursor and on a PC you have a white cursor?

[36:09] We had our custom cursors. But, course, we needed to have them right, so we had two different ones, one for a Mac and a different one for a PC. I just thought that people would feel like we respected their platform. All of this is happening, because I think ultimately all the doodles are not really about any of the technologies that I talked about. Our home page is not a place for tech demos. All the things that we do are about celebrating things or celebrating people. For example, going again back to the lamb doodle, I don't know how many of you saw it.

[36:46] Once you start playing with it, it actually expands and takes over a little bit more of the page than most doodles do. On the surface, that is kind of cool. Which illustrator wouldn't want more room, right? Which designer wouldn't want more room? We didn't do it because we wanted to have all of these things. We did it, because we wanted it to resemble the illustration in the book, from the same author, by one of the famous illustrators. We wanted people to feel like, "Oh man, I remember this. I read this 30 years ago. This doodle is exactly the same thing." This is the way the doodle ends.

[37:25] I'm going to spoil it for you, those who haven't played it. But essentially, the entire home page, not just the doodle, gets destroyed, which is, again, kind of a cool thing to say. For me, I can put on my résumé that I destroyed the Google home page and, if only Safari would play it, it would be kind of cool. You'll have to check it out, but it essentially goes and is destroyed. It's not just the doodle, but all of the DOM elements too. I wanted to make it look cool. My smirky, joke title is the "Michael Bay of Doodles". It's cool to do all of these explosions.

[38:00] But, of course, again, this is all coming from the story by this writer. This is a story that ends by a machine being asked to do something. The machine can only build things for the letter N. Somebody asks the machine to do nothing. It stops destroying the universe. Maybe we will actually see it. Oh, no. OK, you have to check it out yourself.

[38:25] If we do those things though, I like believing in all of these details, because ultimately I think, once you do all of those things, once you make something really polished, really perfect and really great, people stop looking into and complaining about details and just immerse themselves in this. For Pac-Man, we could have done a weird looking Pac-Man clone, something that looked like Pac-Man, but wouldn't really be great. But we wanted to do it perfectly. We wanted to make a real Pac-Man version and replicate it in JavaScript. For example, the original Pac-Man was working in a way that was deterministic.

[39:11] Every time you played it, if you did exactly the same thing, it would do the same thing, which meant you could have patterns. You could beat Pac-Man. There were books that knew how to beat Pac-Man, just by memorizing the things. So, of course, we did it in our doodle. Of course, people were coming up with patterns, which was quite amazing. I don't think anybody knew that we were just doing the same thing that we did 30 years ago. But it just happened. It was kind of amazing, because somebody was just focusing on playing Pac-Man, instead of, "Oh, this doesn't feel right. This is not how I remember it."

[39:38] For the Verne doodle, Jennifer, the illustrator, wanted to put narwhals in. Narwhals are kind of like unicorns underwater, except they actually exist, which was news to me and apparently many people. They started asking, in all sorts of places, "What the hell is this?", to the point that dictionary.com put narwhal as the word of the day the next day, just to clarify, once and for all, that those things actually exist and this is the story, which we didn't really anticipate. Sometimes we get all sorts of interesting feedback.

[40:10] With the Moog doodle that was just really complicated, we tried to make the UI simple. But, ultimately, it is a complicated device. We got some really interesting feedback, otherwise, from people. Some of it is kind of sad and maybe troubling.

[laughter]

[40:28] Some people are confused about whatever it is that we do. This is for the lamb doodle, as you can imagine. Some feedback is really great. This is for the Verne doodle. This makes me really happy. This is the HTML and the browser becoming the operating system, as we all know and expect, but in kind of an interesting way. Somebody didn't know they had an accelerometer in their MacBook and now they do. This brings us to this little thing. It's going to be annoying, but bear with me. [high pitched tone begins]

[41:03] This is somebody...let me just turn it down... actually taking our ZX Spectrum doodle, saving it onto a cassette tape and putting it on an actual ZX Spectrum computer from 1982. This is loading six kilobytes of data. This is amazing on a couple of different levels. First of all, it's how far we have come in 30 years. Look at this. This is still loading. That's pretty crazy. Second of all, someone actually took their old computer and did something interesting with it. But it was also great, because...all right...this is just the image. Then you would have to wait for the game for 30 more minutes. [high pitched tone stops] [laughs]

[41:45] But it's also amazing, because this doodle made somebody do something we didn't even anticipate. It inspired somebody to do something creative. I think we are very happy when that happens. When I look at these machines, this was the first time...these are the Atari and the ZX Spectrum...there are all sorts of other computers and all of them that you remember playing for the first time, where you could use this computer as a computer and program it or whatever. But it was also the first time you could do something with it.

[42:17] You could do your taxes. You could do some calculations. You can be creative. You didn't have to know anything about computers, for the first time. You could just start playing games or doing whatever. This is the same way I look at doodles. For many people, this is going to be just like, "Oh, well. It's an illustration. I don't care." For many, they will be interested. They will be like, "Oh, I wonder what it is. What are we celebrating today?" They will click on it. They will interact with it. They will maybe learn something. They will be inspired to do things. I don't know. I would like to believe there are a lot of people who do that.

[42:49] Ultimately, that is what it's about. It's not about the technology that powers it. It's not about showcasing whatever. It's that I can now do it, in CSS or WebGL or whatever. It's still about using this technology in a transparent way to actually do something that is delightful and something that is new and something that nobody has ever seen before. On top of that, my personal thing, about which I am very happy, my first computer was an Atari 800. If you booted it up, I guess this is what it would show you. This is amazing to me. This still gives me goosebumps. This is this whole universe that I could explore. I could put something. I could create something.

[43:32] Without my first computer, I wouldn't be doing what I'm doing today, just because I had this thing and I didn't have any games, so I had to program my own games in Basic. This was God knows how many years ago. But this is what is happening today. For many people, their first introduction to programming or doing some cool things with the computer is going to be this. They are going to right-click on something and they are going to do Inspect Element and who knows what's going to happen. If some people do it because of Doodle, it's because we put this technology there and some people are curious about how it is done. I think it's pretty amazing and I'm very happy when that happens. On that note, thank you very much.

[applause]

Chris Heilmann: [44:23] Thanks so much. Come to my lounge.

Marcin: [laughs] [44:25]

Chris: [44:27] There is no subtlety to you, is there? I showed you my new MacBook and you were jealous. Then you have to throw your own away.

Marcin: [44:34] Yeah.

Chris: [44:35] Oh, it is broken now. I'll have to have yours.

Marcin: [44:37] This is an advertisement, like when people want a new phone and they accidentally destroy their old phone, right? Yeah.

Chris: [44:42] Yeah. [German] in Google then?

Marcin: [44:44] That would be kind of cool.

Chris: [44:45] Window open. MacBook out. Window closed.

Marcin: [laughs] [44:46]

Chris: [44:47] You are a lucky so-and-so, aren't you? This is far too much fun than anybody should have in their job. Working with these illustrators must be really, really good as well.

Marcin: [44:57] They are amazing. I am honestly in awe of how great they are and how they can just draw something. How can you even do that? I don't know.

Chris: [45:06] I guess all of us are thinking the same thing. How do you get Google to have five people to do that? What is the return on investment?

Marcin: [45:16] Oh, yeah. That's a good question. I don't think we really think about it in that way. I think it is just something that we did. We have this term, where we call it Googly. It was just something that, when we started doing it, was fun. Of course, if you are being jaded or maybe cynical or maybe just realistic, of course is great for the brand. It's great for people, who maybe come to search more. I don't think anybody on the Doodle team ever thinks like this. We just want to do something that is delightful, that's new and that celebrates things or people that we care about.

Chris: [45:48] That's what we want as well. But our managers tell us it has to make money somehow.

Marcin: [45:51] Yeah. It's just five people. There are a lot of other people at Google, who code things that make money.

Chris: [laughs] [45:59] Who bring the money in.

Marcin: [laughs] [46:01] Actually, this is half of my job. For half of my job, I'm actually working on Chrome. Maybe that's the karma, because I used Safari instead of Chrome. That's why my computer fell down. Yeah.

Chris: [46:18] Yeah. Yeah.

Marcin: [laughs] [46:18]

Chris: [46:19] A lot of questions are reflecting what I asked you a year ago. Can we get the Crushinator? And your presentation framework, is that somewhere on GitHub as well, or Google code, if need be?

Marcin: [46:32] Do you know Penn and Teller, the magicians? Teller was always like, "Don't show people how the trick is done," except they do that. I have always wanted to and I just never really got the time I suppose. The funny thing is that Apple recently used something that looked very much like Crushinator on their home page, which was really fun to see.

Chris: [46:53] Yeah.

Marcin: [46:54] I don't think it's a new invention. It is just adapted to the new medium. I would say, please send me emails or tweets to inspire me to actually write it up, or create some sort of a post.

Chris: [47:09] It was really interesting with, as you said, the iPhone5 website that came out. About 20 minutes after it came out, somebody had written a blog post, using DevTools to analyze what they had been doing and reverse engineering what Apple has done. I think that kind of exploration is what Google doodles do a lot as well.

Marcin: [47:30] We do. The funny thing is that someone actually did the same thing with the Crushinator at some point, except they didn't know what it was called, I suppose. [laughs] We also open sourced a couple of doodles. The Lem doodle, the entire 17,000 lines, is open sourced somewhere on Google code. The Moog doodle and the Alan Turing doodle is all open source. So, we do share. There is always more that we would like to do and not enough time to do it.

Chris: [47:56] What I found fascinating as well, and I hope it's not a marketing thing, I hope it really happens randomly, was the Les Paul doodle with the guitar, when you had the guitarist of Rage Against the Machine playing on it, on YouTube all of a sudden.

Marcin: [48:10] Yeah. We're very flattered by a lot of it. People are actually really happy with a lot of the doodles. For the Moog doodle, we had the keyboardist from Depeche Mode recording himself on video. Yeah. That is what is really amazing about them also. That's why I love working on them. Technologically, Pac-Man is not all that impressive. There is nothing about HTML5. It's just div floating around. But, we have a unique opportunity to do something that a lot of people can enjoy. A lot of people maybe otherwise wouldn't care about any of those technologies, wouldn't go on all of these amazing websites that celebrate HTML5.

[48:52] So I feel like it is a little bit our responsibility to, in addition to doing delightful illustrations, sneak in a couple of HTML5 to CSS or whatever we call it these days, just to get people excited about the Web. In the same way, I hope that all of my goofy things here, with the things are also kind of cool, in a way, even though they are not maybe very practical, like chaining two browsers together or all of those things. But it is an exploration of what the Web can do. It's amazing. It still blows my mind.

Chris: [49:25] It's like every day is hack day for you, in this case. What baffles me is that Google allows code like that to be live on their flagship page. One of the questions was this. Has Doodle ever crashed the main functionality of the search bar?

Marcin: [49:42] It has never happened, no. [laughs]

[laughter]

Marcin: [49:50] Not even once. No, we did. The thing is that we had a doodle for Calder, which was this rotating, mobile thing. We canceled it, because two hours in, we got reports of it consuming too much CPU. We ran it again the next year and we did a better job of making sure. A lot of these doodles have very complicated heuristics inside to make sure that we are not hammering CPU, when somebody is not looking at them and things like that. We have gotten much better at this.

[50:26] Pac-Man was huge. We had no idea. I was petrified that I was going to be fired, because I didn't anticipate something and people won't be able to search. We have gotten way better at this. But, always, when you try a new API, it's a big mystery. We did do weird things with all sorts of browsers in all sorts of situations. We tried to catch them in time. Fortunately, it doesn't happen nearly as often as my pessimistic/realistic side would believe. The Gamepad API was pretty frightening. It was the first large-scale deployment of the Gamepad API. [laughs] It was just a flavor of it.

[51:07] I somehow became, for this one week in August, the world's foremost expert on Gamepad API. [laughs] I don't really use it at work. But it was kind of fun to learn all this. Again, there were a couple of mentions yesterday of, why build weird tools that nobody uses? That was the point. In some ways, some of the doodles are exactly the same way to me. All of this is just pushing the envelope a little bit and learning all of these little dark corners of the new technologies. There is always somebody who benefits, even from the weirdest tool you build or the weirdest exploration. I love doing that and I love when other people do that. Some of the people, who I am a big fan of, are actually in the audience. So that's pretty cool.

Chris: [52:00] One thing that cracked me up about the Pac-Man doodle was that somebody analyzed how many millions of work hours are wasted in America a day playing the Pac-Man doodle. Actually, somebody in the tag press contacted me for a quote on this, like, "Oh, Google does something bad about this." I just answered, "How long does it take to load the average website? How many man hours are wasted by bad technology? I'd rather see some cool technology, playful, used that people have fun with the Internet from time to time without being blocked by their company."

Marcin: [52:32] Yeah, and you know, it's like who is to say what's wasted really?

Chris: [52:36] Yeah.

Marcin: [52:37] For somebody that's going to be like a throwback to when they played Pac-Man 20, 30 years before for the first time in whatever arcade they were in, that's worth a lot. That's not something you can express in monetary value.

Chris: [52:54] Yeah.

Marcin: [52:55] Some other people might just be excited about, "Wow, you can do this without Flash." We got a lot of feedback like this, which to us is obvious. Well, of course you can do these things without Flash" except we had to do sound in Flash, but that's a whole different story. [laughs] We choose tools that work that let us achieve what we want. We don't actively hate any given technology, or are opposed to it. We just cherry-pick whatever works. But again, for many people, they had no idea HTML can do that, and I think letting people know that those things are now possible, that's worth a lot. It's not wasted time.

Chris: [53:34] OK...

Marcin: [53:35] For a lot of people, it's wasted time [laughs] .

Chris: [53:37] We've got to stop here because we've got a few more speakers.

Marcin: [53:39] OK.

Chris: [53:39] I could talk to you about this all evening because I did Commodore 64 stuff as well, so we could go into a lot of details.

Marcin: [53:46] I will hate you because I'm an Atari guy. We don't speak, really.

[laughter]

Chris: [53:51] Yeah, get off my stage.

Marcin: [53:52] Thanks very much. [muttering] Commodore 64.

[applause]

[53:54]

• 0 comments
• Comment