Google I/O 2011: The Secrets of Google Pac-Man: A Game Show


Germick:
Okay. Hello there. Pac-Man fever. man:
Whoo! Germick:
Whoo! All right. Welcome to “The Secrets
of Google Pac-Man.” Wichary:
Thank you for coming. Germick:
I am Ryan Germick. I am the creative lead
of the Google Doodle Team. There I am,
eating a doughnut. Wichary:
And I am Marcin Wichary. I am a user experience
designer/developer on the Chrome team. And, let’s see. This is actually my cubicle–
well, above my cubicle circa 2006-2007. And I love all video games, and I had all of
this Atari memorabilia– [clapping]
Thank you– on top of my cubicle,
and–and– and that’s actually how
Ryan and I met. Germick:
That’s true. I was sitting
around the corner and I saw these things
hanging up, and I just think the artwork
is really cool, as an artist myself,
and I approached this guy and we struck up
a friendship based on our mutual love
for vintage games. Wichary:
Yeah. And–and– and this is actually
the project, the first big project,
that we worked on together, was the Google Pac-Man doodle
pretty much a year ago, and in–in a way,
it came to define us. Germick:
That’s true. Wichary:
Ha ha. Germick: So yeah, it was
basically the first opportunity we had to sort of bring
to fruition our– the intersection between
art and technology and find a way
to work together. Wichary:
Yeah. This– these are actual Google
suggestions for our names as of, like, eight months ago. Germick: Before Google Instant,
so no longer does this glory– Wichary: Yeah.
Germick: Exist. So my regular job at Google
is to–to lead the team that creates the Google Doodles,
so those are the logos that we make on the homepage
around the world to, you know, surprise
and delight our users. So you know,
we would take something like, you know, the idea
for celebrating Sesame Street, which we actually did globally
for a whole week in 2009, and then we’d turn that idea
into a real thing like this photo. Wichary: Yeah. And I kind of do
the same thing. I try to delight users,
try to create experiences that are, you know,
interesting, memorable, and–and–
and beautiful. But my kind of tools of trade
are essentially HTML5. Right? And that’s what I do
to create those experiences. And as a matter of fact, this whole presentation
is an HTML5 website. It doesn’t look like one
because, you know, these days,
it doesn’t have to. We–we–
I try to pay tribute to, you know, the ’80s since
we’re talking about Pac-Man. Just a couple of things
we did here. One is, you might notice
there’s this interlace, little flickering, little
kind of banding going on. Germick: Yeah,
the projector’s not broken. We told the AV guys
we’d let you know. Wichary:
This is– This is all, kind of,
our tribute and this is a little bit like,
you know, this is as easy as putting
a couple of gradients together and animating them these days,
which is pretty amazing to me, you know, like, that we can do
all sorts of things using HTML5 and–
and CSS3. So that’s one thing
that was a software tribute and we also have
a hardware tribute to 1980s. Some of you might have
noticed– [clapping] I love my Power Glove.
It’s so bad. We have so–
Germick: We drove– we drove to a trailer park
in San Jose to buy it off of Craigslist,
so I appreciate the applause. Wichary: Two hundred bucks,
I kid you not. Germick:
Yeah. Wichary:
But– Germick: And the guy said he’d
get us anything we need, so– Wichary:
Yeah. So– Germick:
I know a guy. Wichary:
So here’s the thing, though. So we have this HTML5 website
running the serv– the presentation,
right? It’s regular–
a regular page. As a matter of fact,
you know, like, I can just select stuff
or whatever. Right? I also have
a regular hypertouch here running another HTML5 site,
just out of the box. They talk to each other
using a server that’s on this computer
that know–knows JS, so it’s all JavaScript,
all OpenWeb. Right? It’s pretty amazing.
And what I can–look here– you know, I can advance
to the next slide, for example. Right? And this slide is
the same slide as this, so– but I can now use my touch,
and it’s–you know, the Wi-Fi is a little bit,
but, you know, it’s pretty much real time.
Right? It’s kind of amazing. And–and the–the other thing
I wanted to show you– this is a Power Glove, right? So it doesn’t really
work on infrared because we didn’t hook it up. It’s a glorified case, but,
this guy has an accelerometer, so what I can do is I can
kind of calibrate it right here and just send
this accelerometer data from the Power Glove
to the server. The Wi-Fi’s kind of–you can
kind of actually see the– now how it do–
it doesn’t look so great because Wi-Fi’s
kind of terrible, but you can actually see Ryan.
[laughter] Germick: That’s me with–
I–I grew my beard just so the Muppets felt like
I was one of them. Wichary:
Yeah. So– so I’m really excited about
being able to do stuff like that using just HTML5.
Right? It’s all open web,
open standards, and you can create things
that have, you know, not been possible before,
and that’s kind of what we wanted to
talk to you about today. Germick:
Yeah. We– we think the homepage
is a great place for us to be exploring
with these kind of things and I don’t see any reason
why delighting and surprising our users has to
be just, like, static imagery. Wichary:
Yeah. Germick: So to the–
hon– to honor Pac-Man
as a classic game itself, we decided to turn this talk
less into a lecture and more into something
participatory. And the first thing
you need to know is, it’s now a game show, and we’re going to be
dividing the room into two teams. Everybody on this side–
on my right, your left– is going to be
“Team Pac-Man.” Everybody on Marcin’s side–
my left, your right– is going to be
“Team Ms. Pac-Man.” Wichary:
Yeah. All right. Germick:
It’s all right. Wichary: So you can switch
right now if you need to. Germick: Yeah.
Wichary: Ha ha. [laughter]
Germick: Yeah. Well, close your eyes,
count to ten. And you will notice
under your seat is a floatation device.
I’m just kidding. I feel like an airline hostess.
But–but– You’ll also see
there’s a score on top, so for being so lovely, I’m going to give Ms. Pac-Man
50 points. And– [laughter] woman: Wahoo!
Germick: Sorry. So for griping, I’m going
to give Mr. Pac-Man just 30 points.
[laughter] Germick: Or just—
great– Wichary:
Ryan knows “octo.” Germick: Okay, 24.
Okay, great. [laughter] Wichary: Ha ha!
It’s all JavaScript. Germick: Yeah.
[laughter] And the other thing
we can do, Wi-Fi is a little bit
messy here, but if you have 3G or Wi-Fi,
give it a try. Point your web-enabled device
to “io-pac-man.appspot.com,” and you’ll actually be doing
all your voting and question selection–
Wichary: Yeah. Germick:
From your touch device. Wichary: Let’s–
let’s see if that works. If it doesn’t, we’re just going
to shout the answers or have a captain–
team captain or something. Germick:
Yeah. So give it a try. Give it a try,
and we’ll see how it goes and, yeah,
like Marcin said, we have a backup plan
if it doesn’t work. Wichary:
Yeah. And choose your team as–
you’re going to log in. If it shows up, you should be
able to choose your team. Again, Pac-Man
and Ms. Pac-Man. That work?
Germick: Right. 3G was better than Wi-Fi
a minute ago. If you guys have 3G,
give it a try. Anybody able to see the site?
Holler. Okay, we got some people.
Got some people. Wichary: Yeah. Yeah. man: [indistinct] 3G here.
Germick: 3Gs? Okay. Wichary: Should we–what should
we do? Should we do the–? Germick: Well, let’s have
our first vote. Everybody, if you want
to try it with 3G, holler or raise your hands. If not, we can–we’ve got
a team captain solution. Wichary:
Hmm. Germick: All right, all right.
So a little lukewarm. We feel, I think,
as a philosophical part of what we do is,
if we don’t break something– Wichary:
Yeah. Germick: We’re probably
not trying hard enough. But, so let’s go with–
let’s go with captains. We’re going to–we’ll take it
a little away from Jeopardy, a little more towards
Price is Right, and if I could have a volunteer
for Mr. Pac-Man Team. Anybody?
Sweet. All right, all right.
In the back. Wonderful. If you want to come up
to the microphone, you are going to be the answer
and question wrangler for your team, and– Wichary: And we need one more
for Ms.– Germick: Ms. Pac-Man.
Wichary: Ms. Pac Man. Germick:
All right. Lovely lady, please come to the microphone
and we thank– Wichary: Yeah.
Germick: We thank you for that, and to sweeten the pot
a little bit, we’ve got hats for you.
Wichary: [laughter] Ha ha. Germick:
Stunts! Okay, here we go. man: Thank you.
Germick: You’re welcome. All right.
So… [laughter] Wichary: Okay. So how it’s going to work is
we have five categories: “History of Pac-Man
and doodles,” “Pac-Man, the Game,” the “Technology,” “Programming
the Pac-Man doodle,” and “User feedback.” And we alternate, so team–
you know, ladies first, so Team Ms. Pac-Man’s
going to start. Choose the category,
choose the score, there’s going to be an answer, and then we’re going to talk
a little bit about it. Germick:
All right. So team Ms.– Team Ms. Pac-Man,
just holler out what are you going for?
Oh, somebody voted. 200.
Wichary: Yeah. Ha ha. Germick: So we’re doing
a hybrid approach. Wichary: Yeah.
Germick: Oh, it’s a word game. Wichary: It’s kind of all–
Germick: We’re doing all right. Wichary: This should look
much better, though. There’s like, five, six, seven
votes on the screen right now. Germick: Okay.
It looks like, pencils down,
conservative approach, “History of Pac-Man and doodles”
for 200 is our question. Wichary: Okay, so we have
team Ms. Pac-Man. Your question is: “What was
Ms. Pac-Man’s original name?” And there are four answers. Was it “Pac-Woman,”
was it “Pac-Lady,” was it “Chicha Chan,”
or was it “Crazy Otto”? man: Crazy Otto!
Wichary: So… Are we doing voting,
are we doing shouting, are we doing team captain–? man: Voting! Germick: We’ve got a captain,
we’ve got a little bit of both. Captain, we’re going to– what we’re going to do
is a hybrid approach. Captain, you’re going to choose
with your discretion– Wichary:
Ha ha. Germick: What you think
your team is really going for. Wichary:
All right. Germick: There’s a lot votes,
a lot of votes. Wichary: It’s kind of working.
Okay. man: Well, since
no one’s shouting out and everyone’s voting online,
let’s go with number four. Germick: Okay, Crazy Otto,
and– [electronic tones] Wichary: That is correct.
It’s “Crazy Otto.” So my team needs some points–
Germick: All right. Wichary: I guess.
man: Give him twice as many. man: That’s fine.
Germick: All right. Wichary: And let me tell you
the story. This is actually kind of
a cool story. So Pac-Man came out,
you know, a while back and, you know, if you put a game
in an arcade for a while it’s, you know, people
are going to figure it out and going to play longer
for one quarter and, you know, the arcade owners
kind of hated it. So they wanted
a sequel to Pac-Man, and they asked Namco
who’s the, you know, Japanese manufacturer
of Pac-Man. “Hey, can we have a sequel?”
And they’re like, “Yeah, we’ll get to it
when we get to it.” But there was this
other American company that created their own, kind of,
bootleg version of Pac-Man called “Crazy Otto” which
looked a little bit like this, and midway,
the American distributor of the original Pac-Man
found out about it and they gave them
the ultimatum, “Either we’re going to buy you
and start selling Crazy Otto legally
or we’re going to sue you.” So–so of course, you know,
they chose “buy us” and they get this thing. They changed Crazy Otto
to Ms. Pac-Man, you know, so it looks like a lady,
there’s a little bit of, you know, thing going on. And, you know, it actually was
the most popular Pac-Man game in the history of
Pac-Man’s franchise. And when Namco, the– the original Japanese
manufacturer found out about it, they got kind of angry
because they said, “You can’t be doing these things
without our permission,” and Midway’s like,
“Yeah, we can. It’s what our contract says.” And they got into this long,
protracted legal battle about, you know, what they can
and cannot do. The funny thing is that– Oh, this is the advertisement
for Ms. Pac-Man, so you see the graphics
was kind of terrible– but they more than made up
for it with advertisements. Germick: I’m not sure who
they’re trying to appeal to with this advertisement. Wichary: Femme fatale
of the game world. And of course they also had
advertisements for the industry, “Don’t copy Pac-Man
because we own it,” even though that’s just
what they did themselves. So that was kind of
hilarious. We didn’t know much about it
when we worked on our Pac-Man doodle, and I
wanted to put Ms. Pac-Man in because it’s such an
interesting, you know, story. So you know, what we did was
we proposed that if you press “insert coin” twice,
you actually get into this mode where you can play with
Ms. Pac-Man and Pac-Man on one screen, which is
actually the first time it happened in the history. It was a lot of fun,
and when we talked about this to Namco, they were like,
“Ohhh, okay. It’s a bit tricky, the legal,
you know, thing.” But they eventually–
they allowed us to do it and we were very happy
and kind of to bookend– Oh, this is–
So the reason– the way I wanted to do it was,
you know, I wanted to think about what would Namco do
in 1980 if it wanted to do a multi-player mode.
Right? I didn’t want to, kind of,
throw all sorts of artificial intelligence that
wasn’t possible to do in 1980, so it was incredibly simple. There is the only addition
to the A.I. for multi-player. If a ghost exits the pen,
just randomly chooses whether it should target
Ms. Pac-Man or Pac-Man, which I though this is exactly
what they would’ve done in 1980. So it’s kind of
a historical recreation. And the last thing, ha ha,
somebody actually created a Greasemonkey extension
to change our Pac-Man into Ms. Pac-Man,
which I thought was very ironic, given this whole story repeated
itself from 30 years ago– when somebody,
you know, when this company dotted this little
daughter board on top of the original PCB. So that’s the story
of Ms. Pac Man. It’s a little bit more,
but we– let’s try to get
to other questions. Germick:
All right, Team Pac-Man, it’s your turn
to vote for a question. Yell it out, vote it up. man:
Let’s see some fingers. Germick: [laughter]
Ha ha. All right. I like–
I like this aggression here. 1,600 looks pretty good
to me. man: Okay, we’re going to go
for 1,600– Germick:
Oh. man: With the “History
of Pac-Man and doodles.” Germick:
There you have it. All right, guys, so how many
cartridges of Pac-Man for the Atari 2600
video game console did Atari eventually bury
in a New Mexico landfill? Wichary:
Ha ha. We will tell you
the story in a second, but first tell us,
what do you think? Germick: 5,000,
50,000, 500,000, and 5 million and we’re–
we’re–we rest– we’re–I guess it’s safe to say
no one’s searching for this since the Wi-Fi
doesn’t really work. [laughter]
Wichary: Yeah, no cheating. man: Two?
Does everybody like number two? Germick:
Okay. All right, 50,000? woman: Yeah.
man: We’ll go with number two. Germick: Number two,
and I’m somewhat disappointed. [electronic sound] man: Eeww!
Wichary: No. The answer is actually
the last answer, 5 million, and some of you
know the story, right? It was kind of
interesting. So there was this movie that
came out in 1982 called “E.T.” Huge hit, right? And Atari had this hot console
called “2600” or “VCS” originally,
and they wanted to have a game based on the movie because
everybody loved the movie so everybody’s
going to buy the game. They bought the rights,
they were very happy, and this is the game
that they came up with. [electronic music,
sounds] Otherwise known– as the worst video game
in history. Germick: Ha ha!
[laughter] Wichary: It has nothing to do,
very little to do, with the movie.
Terrible game play. You could finish the whole thing
in two hours– two minutes, I’m sorry.
And, you know, it’s awful. Right?
Germick: Ha ha! [laughter]
Wichary: So–so we had E.T. the video game,
and then there was Pac-Man, and Atari–exactly
the same way of thinking. Everybody loves Pac-Man
in the arcades. They would love it even more
if they could play it at home. So they bought the rights,
they put together a conversion. This is the box. As always,
looks very, very nice. And they had an advertisement
that looked something like this. Germick: Notice how few frames
of the advertisement actually show the game. Pac-Man: Soon as I eat
that power block, you guys are finished. commercial announcer:
Drop Atari Pac-Man into your Atari
video computer system, and you’re playing the hottest
game since Space Invaders, Atari Pac-Man! Germick:
Oh! That’s enough. commercial singers:
[singing] Pac-Man fever Germick:
Okay, now it’s enough. commercial singers:
Pac-Man fever It’s driving me crazy,
driving me crazy Pac-Man fever,
Pac-Man fever I’m going out of my mind Pac-Man:
Hate to eat and run! commercial announcer:
Pac-Man, by Atari. Wichary: By Atari, right?
Awesome. Germick: Ha ha.
Wichary: This is the game. Germick: I think you might
get Pac-Man fever from the, sort of, frantic movements
of the ghosts. [laughter] Wichary: This has
absolutely zero in– to do with the original Pac-Man.
It’s terrible. Everything’s wrong here. The board is different,
Pac-Man doesn’t even move right, the ghosts are flickering,
the sounds are terrible, no cut scenes, nothing. Germick: But you know what,
it makes me think maybe we should do a doodle
for the anniversary of Atari Pac-Man.
Wichary: Yeah. [laughter]
Germick: Ha ha ha ha. Wichary: Both of these games
were huge flops. They produced millions of them
and nobody bought them, or people who bought them
returned them and Atari
was essentially trapped with millions of cartridges
that they couldn’t sell because it was after
the Christmas season and nobody cared about
those games anyway. It was beginning of
the video game crash of 1984 for those of you
who remember it. Atari had to actually literally
bury them in the desert to get some sort of a tax-exempt
refund situation. I don’t know exactly. Just, you know–
But essentially they went– their–everything went
nose-dive after that. Two–two games
essentially responsible for almost killing video games,
and everybody thought video games was just another fad
like hula hoop, or whatever. And, you know,
it looked like it except there was this little
company called “Nintendo” that released NES in 1985, but
that’s a whole different story. Essentially,
so Pac-Man contributed to both the–kind of
the cultural recognition of video games in 1980 and
the video game crash of 1984, which we think is kind of
an interesting story. All right.
Germick: All right. Wichary:
So this was the– Germick:
Team Ms. Pac-Man is up. Wichary:
Yeah, Team Ms. Pac-Man. What do you wanna–
Germick: Vote away. Wichary:
Talk about? Germick: Mr.–
Mr.–Ms. Pac-Man Captain, what–
what is your name by the way? We didn’t get your name.
man: Chad Killingsworth. Germick: Thanks–Chet?
Killingsworth: Chad. Germick: Chad.
Thanks, Chad. Wichary: Crazy Chad.
Oh, sorry. Germick: Crazy Chad.
Chad ChaChan. Killingsworth: Other Googlers
have called me such, too. Germick: Ah.
Wichary: All right. Killingsworth:
Let’s go with 1,600 for “Pac-Man, the Game.” Germick: All right,
big spender. Wichary: All right.
This is a cool question. Okay.
On one occasion, one ghost can run away from
Pac-Man while not frightened. So you know, you can
eat the energizer and they run away,
but on one occasion, one ghost even in
regular game play, runs away from Pac-Man.
Which ghost is it? Is it Blinky– It’s not going to be so easy
at 1,600– or is it Inky,
or is it Pinky, or is it Clyde? So vote now if Wi-Fi
allows you to, and we’re going to talk about it
in just a second. People know what
they’re talking about here. Germick:
Ha ha. I think that table talk
is going to reduce the number of points
it’s worth. Wichary: Okay, who has
Google search open? It’s just–
[laughter] You know–
you know we know. Germick: No, I’m joking. Killingsworth: We’ll go with
Clyde, number four. [laughter]
Germick: All right. Clyde is correct,
but– Wichary:
It’s–it’s– Germick:
I heard some table talk. I’m going to ding you guys. Well, I’m going to ding you
400 points for that. I don’t think
you really deserve– Wichary: Ha ha.
[laughter] Germick: I don’t.
Sorry. Wichary: All right.
Germick: Sorry, Chad. Wichary: Here’s what’s great
about Pac-Man. In an era when every other game
was shooting and driving and nobody really cared
about anything, they tried
to tell the story. They had four ghosts.
Each of them had a name. Each of them had
a personality as well. Germick: I think–
I think one thing that resonated with us from
the Google Doodle standpoint is that it was
an opportunity for, like, an emotional connection.
Wichary: Yeah. Germick: You feel a little less
invested in an Android you’re blowing up
than you do in a ghost with a name
and a personality. Wichary: Yeah.
So they actually had this, you know,
this cut scene with– with–with the names and–
and everything, but, of course,
this is 1980. How do you represent
ghosts’ personalities using, you know, five lines
of machine code that you have available.
Right? Not very much memory,
nothing really crazy. Here’s how. Let me actually show you
this in practice. It’s kind of hard to play
with a Power Glove, ironically, but–
[laughter] Germick: It was also hard
to play with the Power Glove when it was working properly.
Wichary: Yeah. So at any given moment, a ghost–the only thing
a ghost has to do is to reach
a specific tile. So let me actually
show you. Right now, as you can see,
two of the ghosts are out, and they’re trying to reach
a tile that doesn’t exist. It’s a tile outside
of the screen. So we’re going to be– it’s kind of circling
in the corner. The idea being, that, you know,
you just started the game, we’ll give you some slack.
Right? As you familiarize yourself
with the controls. I slowed it down
so I can actually play and talk at the same time. I’m–a secret–
not a very good Pac-Man player. All right. Germick:
That’s the only secret I think you’re actually
going to hear today. Wichary:
Yeah. All right. But, after a while,
something else happens. Each ghost now has
a different tile to target. So you see, Blinky
is trying to target the tile I’m currently at.
Right? Let me slow it down.
The red one, right? Pinky is trying to target
the tile in front of me, except if I go up,
there’s a bug and it ta– it targets a tile that’s,
you know, up. But, otherwise, it’s four tiles
in front of me. The other guy, Inky,
is just trying to, kind of, extrapolate
between those two guys. And Clyde, let’s try if we can
get him out of the pen. This is kind of hard,
by the way. Oh, no!
Oh, nooo! Ohhh!
[laughter] Can I get
some points for it? No. So let’s see. So anyway, what happens is
it otherwise beha– behaves like Blinky, but once
I get close to Clyde, it actually runs away to–
[laughter] Germick: Do you need
a pinch hitter? Wichary: Do you want to play?
Germick: Okay, sure. Wichary:
[laughter] Anyway, it actually
runs away from– from me to its corner. Which is kind of,
you know, makes him a little bit
unpredictable. But here’s–here’s a great
story for me, personally. So I–you know, I started
implementing the game, and one day I’m playing it
and accidentally I make– you know, I converted
my whole game play from floating point to integers
to make it a little bit faster, but I forgot to multiply
something by eight in one place, and the way
I found out about it was not by looking
at the code– and I don’t do unit testing because I’m
a terrible programmer. Germick: Ha ha.
[laughter] Wichary: I did it because
the ghosts felt funny when I played it. And I recognized that they’re
doing something weird, and I added this mode
that I could actually see what they’re doing as the–
the bugging had from me– and that’s
how I found out. Oh, okay.
They’re doing something funny. I forgot about “times eight,”
I added in– Germick: Things are getting
pretty hot over here. Wichary: And it worked.
Germick: Do you want to see it? But there it is.
There it is. Ghost of Clyde.
Wichary: Yeah. So–so the great thing
about it is that’s– that speaks volumes about
that actually, you know, it actually worked.
Right? You could actually feel
the differences in personalities of the ghosts. And, you know, they had
literally very little. And so this is the–
these are the algorithms I put together,
essentially recreated from scratch in JavaScript. We didn’t do any sort of
emulation or anything. They’re very simple, right? If–Blinky’s just, like,
targeting the tile. The other guy’s a little bit
more complicated. Inky is–just kind of trying
to offset these two guys, and Clyde is a little bit
more complicated. But really, those are incredibly
simple things, right? Nothing fancy, no machine
learning, no A.I. And it worked,
and I think this is brilliant, and I think this talks about
how amazing Pac-Man was that it has so much nuance
and so much details that I wasn’t even aware of
when I started on this project. Germick: All right,
Team Pac-Man, and Pac-Man captain
what was your name? man: Morgan.
Germick: Morgan. Wichary:
Crazy Morgan also. Germick: Okay.
Let’s vote on a question. Okay. Decisively want to
get on the board with “Technology” for 1,600. Am I–are we in accord there,
Morgan? Morgan: Sure.
We’ll do that. Germick:
Thank you. Morgan: I mean,
we can only go up. [laughter]
Germick: Yeah. I believe in you.
Wichary: All right. So we have this one question,
which is, “How many different
graphic elements were used for Pac-Man doodle?” Might be a tricky
question at 1,600. Nobody really knows.
Is it one? Germick:
Ha ha. Wichary:
Is it 56? Is it 89?
Or is it 123? Germick:
What have you got, Morgan? Wichary: Vote now,
and let’s see what happens. [indistinct chatter] Morgan:
We’re going to go with one. Germick: Okay.
Wichary: Let’s see– Let’s see what
I mean after you answer. [laughter]
Ha ha ha ha. Germick: Morgan has spoken. [electronic tones]
That is correct. Wichary:
That is kind of correct. [clapping] Germick: I–
we could use the points, we could use the points. Wichary:
We’ll give you some points. Ha ha ha ha. Germick:
I will give you 15– since you got it right, I will give you
1,599 for the one. Seems fair to me. Seems fair to me.
I have no bias on this. Wichary:
I can add points, so it seems
a little bit unfair. The actual answer is
123 elements in one sprite. You had the right,
you know, so– that’s why you got points. Because somebody was thinking,
and probably more of you, right? So you know how sprites work,
right? This is one big image and we just cut the respective
slice out of it because first of all it–
it saves us bandwidth. Right? We don’t have
to download 123 images. We just download one,
and it’s much faster. And also once we have one,
we have all of them. So you don’t have
this stupid flickering when you hover over things,
you know. Sometimes you see it
on the websites. So we did that. We also do this on Google,
right? And for–
this is kind of where it– where it started for us,
probably. This is a sprite
from Google.com and we do it everywhere else. Let me actually show you
how it works. It’s kind of fun to see,
to visualize this. So you know, again, let me
play a game really badly. Germick:
Ha ha. Wichary: Let me kind of
slow it down. And, you know, if you
take away the sprites, it’s actually just diff
elements running around. It looks kind of
like “Tron.” It’s actually kind of cool
to play. You know, let’s focus
on Pac-Man, and this is what
Pac-Man does. But really, you know,
if you just get rid of CSS overflow hidden,
that’s what’s happening, right? Just one sprite
and the same with, you know, every ghost has two, kind of,
movements to– so they’re, you know,
[indistinct], et cetera, et cetera. This other guy–we can also
just show all of them if we want, which is,
you know– [laughter] Let’s try to get killed because that actually
looks kind of cool. I always get a kick out of it. Wait!
[laughter] So yeah.
That’s the story. And–and this is actually
a technique that we– that we used somewhere else.
Can you talk about this doodle? Germick:
All right, sure. So you know, we try to honor
different holidays, different notable birthdays,
and sometimes there’s conflicts, and Rube Goldberg
was one such conflict where there’s no way
we can’t honor Rube Goldberg. He’s a cartoonist,
he was an inventor, he was hilarious, he– and he was also born
in San Francisco, and his birthday happens to be
on the Fourth of July. So we thought, hey,
instead of, you know, instead of, like, you know,
letting this one go, maybe we can combine the two
and we created what we now call a “tandem doodle.” So in–in–
in Flash I animated this– this doodle to kind of show,
you know, what a Rube Goldberg device
that was excessively patriotic might look like. But we didn’t want to use Flash
on the homepage because, you know, it wouldn’t work
on iPads, it would, you know, potentially
could be security issues and, you know, we just try
to find the technology that’s right for the occasion,
and at this point, we thought we could
try a little harder. Wichary: Yeah, so Flash
is out for, you know, obvious reasons,
even though we love it for, you know, working on–
on some of the animations- Germick: And we use it
in Pac-Man actually. The sound is done– Wichary: Yeah.
Spoiler alert. Just another question
like this– Germick:
Helps with Pac-Man– Wichary: [laughter]
There’s the–there’s the– Germick: It’s a memory
retention question. There’s all kinds of–
Wichary: I hope it’s my team. We can’t do
animated gifs because, you know, they look kind of weird and we’re not really
in control, you know. We don’t know
if it’s solid or not. We could load each frame
individually, but that’s a lot of bandwidth.
Right? So what I did, I wrote
this little program– again, I actually wrote it
in Canvas and JavaScript, which analyzes the differences
between each frames and just try to find as small
as possible rectangle to, you know,
cover the differences. So you see,
it created this sprite just for this animation.
All right? Germick: So now you’re starting
to see why I talk to Marcin when we have a technical
challenge on the doodle– on a doodle.
Wichary: And– Germick: And–and I think
it’s worth mentioning you did this on a bus
in 45 minutes. Wichary: Oh, that’s almost
exactly not true. But–ha ha.
[laughter] No. So–so now it’s–
that you kind of have this sprite in mind,
this is how it looks, right? So we overlay a new diff
which every frame would adjust the proper sprite. And if you can
visualize it this way, it may be easier to do it
this way. Ohhh! Ahh!
man: Ahh! Wichary: We–and this is–
this–this part– [applause]
man: Whoo! Wichary: This part
is three extra lines– Germick: I’m going to give
Pac-Man team 20 points just because that was
so exciting. [laughter] [scattered applause] Their question. Wichary: This is three
or four lines extra CSS just for this effect. So that’s really,
really fun. Again, I get really–
I get a kick off, you know, and it just compresses
into this guy. So I get a kick out of trying
these kind of things and– and the fact that they are
possible now. This is the code to just
animate the Zulu. I call this technique
“The Crushinator.” Anybody knows what
the reference is? Germick: Nobody knows
what the reference is, Marcin. man:
“Futurama.” Wichary: “Futurama,”
yes, thank you! Can I get some points?
Germick: Yeah, sure. In your honor, I’m going
to award Pac-Man team 20 points. [laughter, applause] Wichary:
Ah. All right. We also have this
other Google– Germick: Wahm!
Wichary: Yeah. Buckyball. And this is the original
prototype in Canvas that– that Chris Holm did, another–
another person on our team. But, you know, Canvas
still is not really accessible everywhere, so what we did
was essentially just created a sprite with all the possible
lines in the sprite. Here’s a reference
from the same show. You gotta do what
you gotta do, right? So– All right.
Germick: And–and one– one more spoiler
while I’m spoiling. If you guys–for those of you
who don’t have your homepage set to Google.to,
the Tong– Tonganese version
of our website, the doodle
that’s going to be live starting 9:00 P.M. Pacific Time
in the U.S. uses the Crushinator and it’s
more sophisticated animation, but you can say you know
how it was done. Wichary: Is that–so
team Ms. Pac-Man right now– Is the voting–
is the voting working? It looks kind of funny.
Germick: Yeah. Wichary: It’s a little bit–
okay. Germick: So it looks like
“Use feedback” for 200 for Team Ms. Pac-Man? Wichary: No!
Germick: All right. Wichary:
Let’s do the right thing. Germick: Okay.
[laughter] Wichary:
It was very competitive. Okay.
[laughter] Wichary: Which of those
was the most– Germick: But you could
just score this, because this is
totally subjective. Wichary: But since all of you
know me already– we’ve spent 29 minutes together;
let’s try to answer this. These are
the actual bug descriptions I wrote for myself. “The eyes of the ghost
should betray next move.” “Proper death
for Ms. Pac-Man.” “Some people
can’t change directions.” Germick: These sound like
critiques of actual people. Wichary: Ha ha ha.
[laughter] “Could stop
with mouth open.” I’ll explain all of them. “Ghosts feel funny.”
You already know what that was. “Eyes should travel home
even during ghost eating–” English is a second language,
by the way. Germick: Ha ha.
[laughter] JavaScript is your
first language, I’m assuming? Wichary:
Yeah, really. Okay.
[laughter] Let’s–let’s try voting if–
if we can. Let’s–How–
how–eh. Some votes are, okay,
coming through. Try to think the way I think.
Does this help any? Germick:
This is working. This is good.
Wichary: Okay. Well, it might be the
responsibility of Team Captain. man:
Ha ha ha ha. Germick:
Wow. That count– Killingsworth: Yeah,
let’s go with number five, “Ghosts feel funny.” Wichary:
That’s not the right answer. Germick: Ohhhh.
man: Whooo! [applause]
Wichary: Okay. But let–let me–
so the “Ghosts feel funny,” you already know
what it was. It was actually an interesting
bug to fix, but I like this one much more,
which was “Some people cannot
change directions.” Germick:
Yeah. Wichary: But I’m going to talk
about it in a second. Let me talk about
everything else. So in Pac-Man, one of those
many, many little details is that the ghosts kind of
change their eyes’ direction just a moment before
they change directions, so you can see where
they’re going to go for, like, you know,
100 milliseconds. And, of course, we wanted
to have that too because we wanted to pay
proper tribute to Pac-Man. Right?
Proper, that– so Ms. Pac-Man
when she dies, she does a little bit
of a different animation with a different
sound effect. Germick: So it sounds
like a funeral or something. Wichary: “Could stop
with mouth open.” Pac-Man, when he hits the wall,
never stops like this. A profile. It always kind of just, like,
does a little bit or nothing, which is, again,
never documented anywhere but I noticed it
and I wanted to add it in. “Ghosts feel funny,”
you already know. “Eyes should travel home even,”
blah, blah, blah. This is when Pac-Man eats
a ghost, everything pauses. The whole game pauses for, like,
a couple hundred milliseconds or a second or so,
but if another ghost is already on its way home,
it’s still going. So again, one of those things
that I wanted the game to be as–as true to the–
to the original as possible. “Some people can’t
change directions.” That was actually
the most interesting one because–this is the story. About one and a half weeks,
or something ridiculously close to the launch date, some people who
are testing the doodle at– at the–you know,
at work are messaging me saying, “Hey,
sometimes I changed– I wanted Pac-Man to go up
and it doesn’t go up,” or, you know, “Anyway, sometimes
it doesn’t register it.” One of these guys right here,
Jonathan, another bug test– bug, you know, reportee,
and–and I’m like, “This is not the kind of bug
I want to hear about one and a half weeks
before the launch.” Germick: Some people
can’t change directions. Wichary: Yeah.
It seems pretty serious. So I’m kind of trying
to investigate, I’m with Jonathan
on a mailing thread, and what happens,
what we find out is this: when you play a game
for as long as– you know, when you’re a kind
of a good player, what you want to do is
you want to tell Pac-Man to change directions
much in advance, right? So for example, I’m going–
I want to go up. I’m going to press “up”
right now, and Pac-Man remembers
it is going to go up at the first possible
moment. He’s actually going to
cut the corner a little bit, so it saves you
a couple of pixels, and the ghosts
don’t do that. That’s pretty great, right? That’s one of those little,
you know, “left” and it goes left. But if you’re not
a good player or if you’re not used
to video games, what you’re going to do
is you’re going to wait and press, right,
“left” here. You know. Okay, that’s pretty solid. Except, sometimes
you’re going to miss. Sometimes you’re going to be
one pixel too late, or two pixels too late,
and the game’s going to be, like, “Well, it took you
too late.” Right? So I’m a usability person.
This is a usability problem. That’s a pretty simple fix,
right? I thought about it
a little bit. Well, what I can do is, even if you’re one
or two pixels too late, I can implement a check
that would, you know, like, forgive you. You know, like, pretend
you did it in time and just put you back in the,
kind of, original way. Right? I added it, I sent it to people,
people were like, “Yeah, it works great now.”
Awesome. Right?
Problem solved. Except now I’m changing Pac-Man.
Right? Do I want to be the George Lucas
of Pac-Man? Right? Do I want to–
[laughter] Do I want to start
revisiting the old game and making it better? Germick: Does that make me
the Jar Jar–? Wichary: Yeah.
[laughter] You know, the only two things
we changed about Pac-Man is Ryan created the board because it needed
to spell “Google” and I wanted to add
Ms. Pac-Man. But, as I already mentioned,
I did it in a– I tried to be respectful
to the original game. Right?
So we have a problem. What do I do?
Well, I go and play Pac-Man. I go, we have a Pac-Man game
at the campus and I start playing it,
and as I played I realized, somebody’s already done
the same thing 30 years ago. They implemented exactly
the same fix I was thinking of. That’s not documented
anywhere on the web. I never found
a mention of it. But, back in the 1980s, when nobody cared about
human-computer interaction, somebody was actually thinking
about stuff like that and implementing the fixes too.
It was amazing. It was, like, you know,
this is like a– like an anthropologist
or whatever or an archaeologist finding a dinosaur,
like, for me. Because this is like
intersection of computer history and human-computer
interaction, and somebody’s already
thought about it. So this is the code
that I added. Right? It’s–
it’s very simple. I skipped some boring details,
but, you know, it was a simple fix,
but it was heartening to see I’m just really re-creating
what they’ve already done. Just as a side note,
you can read the comment. It’s an actual comment
from the resource. We were playing Pac-Man
with Ryan for awhile and, you know, I thought
the code was rock-solid and at some point Ryan
went through the–the wall. Germick: I’m just that good.
Wichary: Yeah. Germick: I think
that’s the issue. Wichary: I’m like, “Holy crap,
why did that happen?” And I had no idea why,
so I eventually added a check, not to prevent going
through the wall but to detect if you’re
going through the wall and then, like,
putting you back, you know,
because I had no idea what to do,
and hopefully it helped. Nobody reported a bug that–
that– that went through the wall. But, you know, again,
sometimes you just have to do what you–what–
what’s–what’s the– the only thing possible.
All right. Team Pac-Man. Germick: All right.
Team Pac-Man. Morgan, what do you say? Morgan:
I know. I’m–I’m waiting
for two seconds. Germick:
Okay. man: How about
“Users feedback for 1,600”? We need it.
Morgan: Okay. Guy in the green shirt
says 1,600, “User feedback.” Germick: All right.
Morgan: We’re doing that. Wichary: Wow,
everybody’s 1,600. Okay.
Germick: Way to– way to represent.
Okay. Wichary: This is one
of the tweets we got. We got a lot of tweets. We’re very happy with
a lot of the feedback. This is one of the tweets
we got, that Pac-Man in HTML5 works great on Opera and Wii,
which was amazing because we never tested it
in Opera and Wii. Right? [laughter]
There’s only so much you can do, but because we use HTML5,
you know, it worked everywhere
that supported HTML5. Except did we really use
HTML5? Well, here’s a question
for you. What was the only aspect
of Pac-Man where we actually used HTML5? [indistinct]
Wichary: All right. So was it “audio,”
was it “visual composition,” was it “user interface,”
or was it “networking”? So what do you think? What’s the only part of Pac-Man
we actually did use HTML5? Everything else was just
all solid HTML4. [indistinct chatter] Germick: Lot of talk,
lot of talk. Wichary:
Ha ha ha. Germick: Wow. This is a good,
like, memory game here. Morgan: Okay, have we heard
from this side? Is it three or four?
What do you guys think? man: Three.
Morgan: Three? We’re going to go with three,
“User interface.” Wichary: That is correct.
Germick: That’s correct. Wichary: All right.
[laughter, applause] Give them some points. Germick: But I’m not proud
of what was done. [laughter] So again
I’ll go for 1599. [laughter]
Wichary: All right. This is among the few lines that actually had to do
with HTML5. There was the touch, you know,
the swiping on any touch devices that–that we added, and
we did test it extensively on– on those that we had
running around, laying around,
or whatever– but not Opera and Wii, and it was pretty fun
actually. You could tap to move or
you could swipe to move and– and then we got, you know,
nice feedback like this. Again, we didn’t really
announce it. People discovered it
on their own. And that was part of
what we wanted. Right? We wanted to just delight
the users by adding things that they didn’t think
were possible. Germick: I mean, I think in
general what gets us excited when we make a Google logo
is when, you know, somebody has a–
an emotional reaction to it. And one emotional reaction is,
like, desire. So you see Google Pac-Man,
you want to play it. When that desire is met, I think
we’ve done a really good job. Wichary: Yeah.
So here’s another thing, for example, that gets me
excited about HTML5, and hopefully
we’re going to be able to incorporate it more
and more in–in–in– in all the doodles that we do
that are maybe interactive or animated.
This is a doodle that– Germick:
Mike Dutton did. And it’s for Nam June Paik,
a–a Korean video artist. Wichary: And I was thinking,
you know, what would it– you know, how could we improve
it just as a– as a kind of, a,
you know, playing around with HTML5,
right? So we can just take–
take the doodle, stop it, we can just, you know,
we can zoom it in using CSS3, right, because now
it’s kind of easy. And here’s a video tag.
Right? HTML5 video tag,
and everybody want– knows why they love
HTML5 video. Right? Because it’s, you know,
it’s not as slow as Flash, it’s integrated,
it lets you go about your life, et cetera, et cetera.
Right? We all have heard it,
but what excites me about HTML5 video is that
it’s now a first-class citizen on the page.
Right? I can do with it whatever I can
do with any other diff or any other element
lying around. So that’s only to silo
that doesn’t care about z-index or Flash
is around. So what I can do,
you know, I can do a scene-to-scene
transform to do it something like this.
Right? It also respects
the alpha channel, which is amazing. It didn’t use to happen,
and now it’s here. And–and I can also just add
little CSS3 transformations and transitions
to make it just kind of, you know, power off–
man: Ah! Wichary: And power up.
Right? Like old TV. And–so this is
the demo put together. And now on top of this, you still see
all of these effects that the presentation does.
Right? With the interlace
and the flickering, and the– and the kind of banding
and ghosting and all of this. All works really well. And I think
that’s pretty amazing. Again, that–that makes me
happy as a designer because I can do interfaces
that don’t look like interfaces of the old days. They are really exciting
and they, you know, some of them, you know–
pretty nice. Yeah, so– Germick: All right.
Team Ms. Pac-Man. Wichary:
Team Ms. Pac-Man. Germick: Chad?
We need a comeback. man:
Oh, yeah. man:
Programming for 3,000. Wichary: Ha ha!
Germick: Ha ha! Wichary:
What’s going on? Germick:
Executive decision? Killingsworth: Let’s go with
“Technology” for 800. Germick:
Sounds fair. Wichary: I like how people,
like, readjust their– Germick:
Okay. Wichary:
Oh, this is a nice one. This is–
this is a tricky one. What was the frame rate
of the Pac-Man doodle? Was it 30 frames per second?
45–Is this thing on? 45 frames per second?
Was it 60? Or was it 90? What do you think? woman: 60.
man: 90. Germick: Little help from
your friends on Team Pac-Man? Wichary: [chuckles]
Germick: Or was it–? We haven’t been the straightest
of shooters, have we? Wichary:
Hmm, interesting. Germick: Might have to make
a tough call, Chad. Wichary: I think–yeah.
What do you think? Killingsworth:
I have pretty adamant users that it’s three, “60.”
Wichary: Okay. It is actually not three.
[electronic tones] Wichary: It’s actually every
other answer, but three. Germick: Ha ha! Wichary: So–
Germick: Wow. I’m going to give you guys
some points because that was
amazing coincidence– like, odds you played against. I’ll give you
three points for that. We’re representing
for number three. Wichary: And–
and this is, again, just because I am
a kind of lazy programmer, so 90 goes into 45 divided by 2,
goes into 30 divided by 3. So we had this, you know,
procedure that said, you know, if you can do 90,
just cut it in half or cut it in three times
or whatever. Right? 60 doesn’t really fit
neatly anywhere, even though it’s a standard
thing you would think of, except
if you’re in Europe. But, so this is the kind of–
and you know, now we have the request webkit
animation frame or whatever or moz animation frames,
so it’s kind of a nicer thing. We don’t have to worry too much
about stuff like this, but this was the original
Pac-Man. And, since this is Google
homepage, right, we really have to worry about,
you know, things not eating too
many cycles when people just, you know, open Google.com
and leave it there. Right? And– and doesn’t consume
too much battery life. So this is a– a Jules Verne doodle
that we did. When did we do it? Germick:
On February 7, 2011. Wichary: Yeah. So–so, you
remember this guy, maybe. You know, it could go up,
go down, and if you kind of
leave it alone, you know, it’s kind of like
going back to the surface and it’s kind of bobbing
on the surface, but all of this kind of
consumes energy. Right? So we had a couple of things
that we changed. For example, you know,
if nobody’s interacting with the doodle–
hovering over it, playing with it– at some point,
it’s just going to stop. Right?
So it’s in the– if it’s the homepage
in the background. it’s not going to do anything
to your processor. And we even–you know,
we care even enough to– to make sure that if you hover
over something, we throttle the hovering so,
you know, it’s only as fast
as we need it to be. Right? So it doesn’t fire too
often because some browsers are firing a lot of
hover states, you know, when you move mouse–
move around. So we just kind of
“time out” it, and it actually works
pretty well. So there’s a number
of those techniques that we have to develop
to make sure that, you know, that we don’t kill browsers
of innocent people, I guess. All right. Germick: Okay,
Team Pac-Man, back up. What do you got? man:
Programming for 800. Wichary:
Why is your team winning? Morgan: We’re going for
“Programming” for 800. Germick: Okay.
Wichary: Yeah, like– Germick:
Leader has spoken. Wichary: It’s–
it’s correlation and causation. The guide to storing– Germick:
So which of the following is not a proper way
to control Google Pac-Man? And again, “proper.”
Wichary: Yeah. Germick: “Arrow keys,”
“W-A-S-D,” “Clicking,” or “Swiping”? Those are your– Wichary: Yeah. Not–
Germick: Options. Wichary: What’s the only way
you cannot control Pac-Man? man: Ah-choo!
Wichary: Bless you. [indistinct chatter] Germick: Debate–there’s some
fervor and debate going there. man:
It’s got to be “Clicking”. Morgan: We’re going
with “Clicking” because everybody
likes that answer. Germick: That’s a no?
Wichary: No. You can actually–you can
control Pac-Man by clicking– Germick: This is what we call
a “trick question.” Wichary:
Yeah. It is–it is a trick question
because “W-A-S-D” is the one where you can’t
control Pac-Man, you can only control
Ms. Pac-Man. Right? Germick:
But I kind of feel like– that was unfair.
audience: Ohhh! Germick: And you deserve
some points. Wichary: Let’s–
so–so that’s the thing. But, here’s–
here’s the funny thing. So once we started doing
all those interactive doodles, we kind of have to worry
about people understanding how to interact with them.
Germick: Right. Because it’s not like peo–
we as a company try to get people off our search
page as quickly as possible. You know, our strategy is
to be useful and, you know, not to suck up your time
but to get you to where you’re going
as quickly as possible. Wichary: Yeah.
Germick: So we–and we– you know, we’ve–
we don’t–we don’t– we don’t anticipate people
sitting there for a long time trying to click
and figure out what’s going on, so we try to have
our user interfaces on our Google doodles
as intuitive as possible. Wichary: Yeah.
And the other thing is that, you know, many of the people
who come to–to– to see the homepage, you know, they’re not–
they don’t play video games. They don’t use, you know,
they’re not used to some of the convention
that we might be used to. So for example, this was
the Jules Verne doodle. This is the original sketch
that came from illustrator Jennifer Hom,
and you know, originally it was just
meant to be an illustration and then we thought, you know,
we could do something more exciting about it
since, you know, Jules Verne
loved exploration. Maybe we could do something
with exploring as well. And this is the first prototype
that we had. So it’s very simple
and it operates exactly the same way
that Pac-Man did. You can use arrow keys
to move it around. We actually don’t have
left/right, just up and down. But nobody’s going to
figure out that that’s possible. Right?
It doesn’t look like– you would–wouldn’t–
with Pac-Man, it’s easier because it’s Pac-Man.
Right? You kind of know
what it’s going to do. So we’re going to try
something new. Right? So we wanted to do
this interface that was a little bit more,
you know, “Jules Verne-y,” if you will.
And, you know, try to do this guy where
you kind of like rotate it, but it’s kind of
a weird thing. Right? It’s kind of like–
doesn’t feel– it’s kind of circular
but it’s directional and it’s a little bit confusing.
Right? So we weren’t
very happy with that. The next iteration was,
you know, we wanted to add
this regular joystick– try to make it look a little bit
more, you know, again, like it belonged to the–
to the–to the era, but otherwise,
it’s just a standard thing. And it was the first time
actually we ran usability tests on our doodle. It was just, you know, like,
grab some Googlers in the corridor or whatever,
but we did it. And what we found out,
a couple of interesting things. First of all,
nobody figures out that you can actually
interact with this thing. It looks like a joystick, but otherwise it’s not
very exciting, right? And the other thing was
that people inexplicably tried to click on the dials. We never really found out why,
but it’s kind of one of those things that
you just find in usability. Right?
Usability– usability won’t answer
some questions, but at least it will give you
the problems. So what we ended up doing
was this guy. Right? You can see it evolved
quite a bit from the original, and first of all,
this looks like a huge lever. So you kind of
want to mess with it. It has up and down. It’s a little bit more
pronounced, so you know that, you know,
that this is the thing to do. And check out what happens
when I click on those guys. The lever actually
lights up. It’s a kind of like
a cheap trick, you know, but, you know, gets your
attention where it needs to be. Right? And then of course
you can still do– you can still do up and down
with arrow keys. And what we also added– and it’s hard to demonstrate
here because this is all wired– but we also added the thing
on browsers that’s supported, you can lift it up
and kind of tilt it. And it would use
accelerometer, not unlike what I did
with the Power Glove before to– to get it running. It was so new that,
you know, we actually had, like, three different
code files, depending if you’re running
Mozilla or Chrome or IOS devices, because they all report
very different numbers, which was really,
really interesting. But what this allows us–
what it allowed us to discover, you know, got some really nice
feedback like this. You know, people didn’t realize
they have acceler– It was great. Right? It’s like, we’re at this–
we’re at the point in time where, like, people are finding
out in their browsers that they have new hardware
or something. Germick: This–and it was also
probably the largest deployment of CSS3 on any single project
ever on the web. Wichary: Yeah. So this was
really, really exciting for us because, you know, we could–
we could– and that’s what
we’re trying to do. We–we have, you know,
we have new ideas for other things that are
in HTML5 that are really, really experimental,
but, you know. I guess, stay tuned.
Germick: Yeah. Wichary: I think this is the–
yeah. Germick: Great.
Oh, there we go. All right.
Team Ms. Pac-Man. Hurting over there.
Wichary: Should we do– should we do one more
and Q&A? Germick: One–one more–
Well, do we have a finale? Wichary: Yeah. We have to do–
we have to do something. Germick: Do you guys
want to go for a finale? man:
Finale for sure. Germick: All right.
Wichary: All right. Germick: I think
we bring Chad up. I think what we have to do
is bring Chad up. Wichary: So what’s happening
in the finale, we need to one person from–
It’s very, kind of, by coincidence
worth 1819 points. Germick: Wow.
Wichary: And we need somebody– Germick: Wow,
that really works out. Wichary: Seriously, it’s just very, very, very,
very weird that it happened. Germick: Chad, Morgan, you guys
did a great job standing up. First of all, round of applause,
no matter what happens. [applause]
Earned your hats. Sir, please come to the stage. You’re going to play
for your team and for the grand prize
of honor, because we don’t really have
any more prizes. Wichary: But–so it’s actually
incredibly simple. You have to survive
15 seconds of Pac-Man. Germick: To the keyboard,
my friend. Wichary:
Anybody can do it. Right?
So yeah. You guys are ready
for, like, applause? You know, giving some–
Okay, 15 seconds. Germick: All right.
Wichary: Arrow keys. Germick: There you go. Wichary: All right.
Let’s make it happen. Germick:
One small twist. It’s first player
Pac-Man. Wichary: Yeah.
Germick: We’re good, we’re good. Fifteen seconds
is all you need. Wichary: Yeah, let’s–
let’s give it up. Come on, come on.
[cheering] Wichary: Go, go!
Germick: All right, ten– [cheering]
Nine, eight–seven– Ohhh! Oh! Six. Wichary: Go, go.
Five, four, three– Germick:
There’s also no energizers. man: No!
Wichary: Whoo! Germick: Oh, he got it.
Congratulations. Great job.
Wichary: Nice. [applause]
Nice. All right. Germick:
There it is. Wow. Wichary: Sweet.
Germick: So close, so close. And Team Ms. Pac-Man,
again, congratulations. Wichary:
Yeah. [cheering, clapping] Wichary: Thank you so much.
Germick: Wow. Wichary: We have
about ten minutes for Q&A if anybody wants
to ask us questions. Germick: Yeah.
Wichary: We have mics. Germick:
There’s mics on either side. Come on.
Wichary: Yeah. man: [indistinct]
Wichary: Sorry? man: Are you hiring?
Germick: Google’s always hiring. Wichary: Yeah.
Germick: I think that’s true. Wichary: Are you hiring?
Germick: I’m hiring. Wichary: Yeah.
Germick: I mean– Wichary: We–we–
Germick: Depends– I mean,
depends on the work, I guess. Wichary: We’re definitely
hiring for the– I’m on the User Experience team. We’re definitely hiring,
so you know. Germick: Doodle–
Doodle Team is hiring as well. If you guys are illustrators
or even– we have a [indistinct]
for Google engineers, so if this stuff
sounds fun to you, let me know.
Wichary: Yeah. And this is
kind of what I do. Like, this is my work.
Right here, what I do. This presentation stuff– not all of it, of course.
But it’s–it’s a lot of fun. Any–any–
Yes, sir? man: Yeah, did you guys
do any analytics on how many collective
person hours were consumed
by the Pac-Man doodle? Germick: We didn’t–we don’t
have any numbers to share, but there was an outside company
that estimated, I think, 4.8 million man hours
spent on Google Pac-Man doodle. Wichary: Billion–
billions. Yeah.
Germick: Yeah, so… Rome wasn’t built in a day, and it definitely wasn’t
built on Friday, May 21, 2010. Wichary: Yes, sir? man: All right.
I have two questions for you. One is, why didn’t you
look at the code when you were doing
your Pac-Man doodle? I know it’s kind of cheating
and all that, but I find it interesting. And the other question is–
It’s–it’s– it’s more a reflection
than a question, but I love the doodles and
I don’t see them much anymore because Chrome
has the omni-bar so you never go
to the homepage unless– Germick: Chrome Team!
man: Somebody tells you, “There’s
a great doodle today.” So how do we solve this? How do I get Google doodles
back in my life? Germick: You do two–two ways.
All right. So we’ll answer
your questions in reverse. One, you set Google
to your homepage, and two, in the search results
of every doodle, the logo changes as well. So if you click on that logo, it’ll take you back
to the homepage and you can have the–
man: Okay. Germick:
Full immersive experience, and–and stay tuned
for other features we’re working on where those
might be more visible to you. Wichary: Yeah. We–we–we’re
doing some experimentation. man: All right.
And then the code. What–why–
why weren’t you able to just use the code?
Wichary: Yeah. So–so there’s
a couple of things. One–one was that, like, Namco,
they were incredibly supportive and they gave us
a lot of feedback on– on the thing, but they’re kind
of guarding the code, you know. It’s their secret source,
and–and– but also, like, I’m…
like, you know, I programmed in Assembly
like many, many years ago and I don’t really, you know,
I couldn’t– couldn’t read it. But the thing is that–
what was amazing is the number of people
on the Internet that essentially reverse-engineered,
like, 80% of Pac-Man. There are, like, websites
like the Pac-Man Dossier where they’ll, like,
show you all the numbers and all the techniques. So it was easy
to just look at them and, you know–
man: Mm-hmm. Wichary: And try to–try to–
try to figure it together and recreate it in JavaScript,
which we wanted to do because, you know,
it felt like a proper tribute. Right? It wouldn’t be a tribute
where we just emulated it. We wanted to do it using
technologies that we believe in. Germick: I think it’s similar
in the way we did the Rube Goldberg doodle. Marcin basically built
this entire contraption of, you know, CSS3 and Canvas
and JavaScript to create the sprite,
and it was almost like, you know, a mousetrap
or something itself. Or, we did a Charlie Chaplin
video, you know, and we did it, you know,
we shot actual video and– in Niles just across
Dumbarton Bridge. Wichary:
Mm-hmm. Germick: And, you know,
we did it– we released it
as a YouTube video ’cause we thought that was
the most fitting tribute. Wichary: Yeah.
man: Thank you. man: Hi. I actually used to
work on the Calendar Team and one thing we had way back
then for a short period of time was a calendar that actually
showed the doodle– Germick: Yeah.
man: Every day. And I was wondering–
actually kind of Josh’s point– I started it because I didn’t
see the doodles much anymore– Germick:
Sure. man: Is there any chance
that that could come back? Germick:
There’s definitely a chance. That’s a great idea.
Yeah. And like Marcin said,
there’s–there’s a– a lot of exploration and ideas
around how to bring this up because we–we’re very
flattered that people enjoy them and we’ll certainly keep
making them as– as long as people are
interested to see them. Wichary: Yeah.
Thank you. Germick:
Yeah. Thanks. Wichary: I love Calendar,
by the way. Germick:
Yeah. Me too. man: I was just wondering
how many hours and how many people worked
on the Pac-Man doodle. Wichary: Ha ha!
Germick: Ah, well– Wichary: We actually had
all of these questions that you’re asking
as part of the presentation, but we just ran out of time. man: Oh, it’s in there.
So I know. Exactly. That’s why it sucks
that you guys had to stop. We should just go on
through the I/O and– Germick: Let’s go drinkin’,
and we’ll play a little game. Wichary: Should–should we try
to find this question? Germick: Ha. Sure.
Well, I mean. But–but–but your answer on
both fronts is kind of “a lot.” But, you know, it wasn’t really
tallied in terms of man hours. It’s basically [whistles]
a little crazy and just does whatever it takes
to get it done, which is awesome to work
with somebody like that. It’s actually something I have
to take great responsibility for because if I suggest something
that would maybe improve it, like, he’s compulsively–
will do it. So you know, I’m careful
with my suggestions. But, the question here is–
you know, yeah, we didn’t– this is another trick one, and since we didn’t
really tally. It was a labor of love and,
I mean, I had to fly to Japan to negotiate rights
to work with Namco. I mean, do I get
to tally the hours where I spent watching “Beowulf”
on the flight? I don’t know.
Wichary: Ha ha! Germick: I certainly would like
those hours back in some way. But…yeah.
Wichary: Yeah. Germick: In terms of
collaborators, I mean, Marcin can tell us, like,
a lot of people helped. Wichary: Yeah.
This is– the is the progress
that we had after one hour. So not very exciting. This was actually still
when it was a vector game. Because I didn’t know
any better. I had to rewrite it
two times after that. One when I set, you know,
floating to integer and one when I went from
vector to actual bitmap. So that’s one thing.
This is–but this is– Germick: This is a version
I made on my Trackpad in about 15 minutes, and Marcin
said, “Okay I’ll do it. Just give me a damn mock-up.”
And– Wichary: Sorry.
Germick: Ha ha. No. He said it in
the friendliest way. When–with the Polish accent,
it just comes across as a regular speaking voice.
But–but–yeah. man: [indistinct] Oh, you just
drew it yourself by hand. Germick: I made it on, like,
my Trackpad in Adob– in Illustrator.
Wichary: Yeah. man: Ah.
Germick: No. Yeah. Wichary: Yeah, and I just–
I just made this quick mock, and actual–like,
the ghost in Pac-Man actually, are like rounded-corner diffs. They’re not even graphics,
you know. Germick: But, yeah,
this was enough for us to sign a share with Namco and share with
our internal stakeholders to get a green light
to make it happen. Wichary: Yeah. And this was
still the same day. So–so– man: Same day
you had the idea? Germick: It was actually also
his birthday, which I forgot. It’s a touchy subject.
Wichary: Yeah. Ha ha ha ha. This is actually the page
that I talked about, you know. This guy, Jamey Pittman,
who just put together all of these things about
Pac-Man, including the– I’m going kind of fast–
but, you know, numbers, algorithms,
and stuff like this. Essentially, 80% of the game
is right here. And we got a lot of
feedback from Namco and, you know, I just
played the game a lot as well and I had this, like,
running tally of– This–
we got some cool feedback. Some people thought
that we actually emulated it– which was– I–it was–like,
I was very happy. Right? Of course, there were
other people who thought the exact opposite.
Ha ha. Germick: No. Stings.
Still stings. Wichary: Yeah.
Germick: Yeah. We sympathize with
the Atari Pac-Man people. man: Worse than the Atari one?
Wichary: Yeah. man: Everybody at-reply
to this person right now. Wichary: Yeah. Ha ha.
I–I like this one. You know, with–
with a lot of volume and we got really
a lot of feedback. It was really very flattering
and–and–and–and– and very touching.
Germick: Yeah. Wichary: There’s always,
you know, a long– a huge variety of–
of tweets or comments you’re going to get.
Okay. Who was–who’s on first?
Germick: Ah, what time–? You were standing
the longest, sir. Why don’t you give us
your question. man: So my question
is actually–the Google doodles, they serve as really great
technology demos for doing things without Flash
and for a while without HTML5 or CSS3, but when you go
to view source on that, of course, all the Google stuff
is completely packed and you can’t
see any of that. Do you guys have any plans
to show off any of your source code
as technology demos? Germick:
That’s a great idea. So for the U.I. experiments
that Marcin showed for Jules Verne, you actually
posted on your blog pretty robust examples
of how we did that, and I think the code there
is not packed. Wichary: Yeah.
This–this is– yeah, this is your chance
to look at the Pac-Man code. We will scroll it
really quickly. Unfortunately,
we can’t share this one because, you know,
part of it belongs to Namco. Germick: Yeah.
Wichary: Right? So that’s a little bit tricky.
But we do have, you know– Germick:
We can show you the code behind our first
interactive doodle. man: Wait,
what part belongs to Namco? man:
The crusher. Wichary: Well, the–the–
the algorithms that go over and the way that, you know,
that the game behaves. man: Oh, so they–they didn’t
give you that part? Wichary: They didn’t, but–
Germick: They– they gave us our–
their blessing to emulate it. Wichary: Yeah. man: Oh, it belongs, like–
Wichary: Yeah. man: The intellectual
rights belong to– Germick: Right.
Wichary: Yeah, you– Germick: They let us reuse it,
though. man: Oh, I see. Wichary: This was–
as Ryan mentioned, this was the first
interactive doodle. It was actually–
when was it? 2000? Germick: 2010, January.
Wichary: Yeah. It was back when we actually– Somebody did it by hand. Germick: Yeah, Chris Holm,
one of– another doodle engineer, yeah,
actually wrote it all by hand. Wichary: Yeah.
But of course now– now we have JS optimizers
and compilers that– This is Pac-Man code again,
just, in a way, you know– We don’t really do it
as much to obfuscate the code but to make sure–you know,
the compiler also does a number of checks,
and of course the code is more compact,
so the latency is lower, et cetera, et cetera.
Germick: Yeah. And you can–and–and–
and you can imagine with, you know, hundreds of millions
of views of this stuff– Wichary:
Yeah. Germick: You know,
latency becomes an issue. Wichary: But I–
I’ve been trying to convi– convince these guys to have
a, like, a proper blog where they could share some
of the techniques and– Germick: Yeah,
would you guys read it? If we had a blog,
would that be interesting? [cheers, applause] Good to know. ‘Cause I need a place
to talk about my feelings. Twitter just doesn’t–
140 characters– Wichary: Can I have, like,
that Power Glove picture on top in the masthead?
Germick: Sure. Wichary: Like–like in Face–
Facebook there? Germick: Yeah, yeah.
Wichary: Okay. man: Yeah, I had a question.
I came in late for the talk, but I love the–
the way that your– the users can all interact
with the– the actual presentation.
Wichary: Yeah. man: So is–is that, I–
I mean, I saw you used appspot. How does that work? Did you explain that
in the beginning, or–? Germick: We explained that
it probably wouldn’t work in the beginning,
but then it kind of did. Wichary: It–it–so–
it’s–so–I’m actually, so–so for this guy
I’m using web sockets, right, and no JS, and–
and it’s very exciting because it’s–
it’s–it’s very fast. For this guy, it was
just polling essentially. So every time you–
you use your device, it– you know, every two seconds
it asks, you know, “Should I display
a question or not?” And this guy, every one second
asks the server, you know, “What’s–what’s
the tally on the answers,” et cetera, et cetera. It’s–it’s not even like
a hanging get or anything, it’s just regular gets. So predominantly because
I’m, like, super lazy and it worked, the– there’s something
really exciting about– in App Engine now called
“Channel API,” and I would hope to rewrite it
using that maybe for next time. Germick:
Mm-hmm. Wichary: Does this answer
the question how–? man: Yeah, yeah.
It does. Wichary: I know how technique
actually does– man: And–and so the–
your whole presentation is a– is an app unto itself as well.
Wichary: Mm-hmm. It’s–yeah,
it’s an HTML5 website. man:
Yeah. Wichary: It’s like
a huge website. You could actually–I know some
of you maybe not noticed it, but it was kind of running–
started running kind of slow– Germick:
Choppy, yeah. Wichary: After
about 50 minutes, so I had to refresh it
quietly as it–so it’s– you know, so it’s
still a little bit tricky, but, you know, it’s–it’s–it’s kind of
“cutting-edgey,” if you will. man: Mm-hmm.
Is there– is there source code
for part of it– Wichary: Ah–
man: Or all of it? Wichary: We might–I kind of
want to expose some of it. man:
Mm-hmm. Wichary: Again, like, a–
a lot of what we have there is, you know, kind of proprietary–
Germick: Yeah. Wichary: Like the Atari
and Namco pictures and whatnot– man:
Mm-hmm, mm-hmm. Wichary:
And–and–but–you know– man: But maybe in–
maybe even just the framework of what you used
to create this, so we could–because
I’d love to use this for, you know, my own presentations
or things. Wichary:
Cool. Yeah. man: It’d be a really cool
way to do it. Wichary: Yeah, the–we–
we’re also dabbling with HTML5 slide decks,
you know, like some other
I/O presentations use HTML5 slides that I–
that I helped put together and–and, you know, so– Yeah, you can–
you can– Germick: Somebody set up that–
HTML5rocks.com? Wichary: Yeah.
So–so– you know, it–it–
if you could like, ping me– We used to have a–
Germick: Yeah. Wichary: We should–
we should pull up the– Germick: Final slide?
Wichary: The final slide. Now it’s worth 10 points.
Okay. Yeah. Feel free to, like,
ping me to remind me, because one of the great things
about working at Google is that, like, there’s always
so many cool things to do that I’m always behind on–
man: Mm-hmm. Wichary:
What I’m– man: Okay,
thank you very much. Wichary: Yeah.
Anybody else? We’re, like, one– man: You’ve got two minutes
left. Go over another question. Germick:
We’re two minutes over. Wichary: It’s actually counting
backwards, so we already– Germick:
But we’re the last talk, I think, so I–unless
they’re going to throw us out? All right.
We’ve got one more encore. “Free Bird.” Wichary: Wait, so do you–do you
guys want to do other ones? man: Yeah!
Wichary: Wow. Okay. Okay, here’s–I’m going to–
I’m going to tell you a secret, and you might hate me for it.
Germick: Ha ha. Wichary: But, the order
of the questions was rigged, so every question–
every first question in a given category
was the same because we wanted
the cool one to be first. So it was worth 200 or 1,600
depending–it doesn’t matter. [laughter, applause] Germick: Basically everything
about the game was rigged. Yeah.
Wichary: Yeah. You gotta do
what you gotta do. man: So like, there’s not
that many questions, or–are there–is there–
is there that– Wichary: Yeah, we–
we have many– Some of them
are just kind of lame. Germick:
Ha ha. Wichary: Okay, so you saw
this guy, right? Okay, what do you want to do?
Which one? Germick: Call it out.
Team choice. man: Technology.
Wichary: Technology. man: [indistinct]
Wichary: So we did this one. So no matter what order I–
I do, it’s going to con– I have to go through them.
Okay. man: [indistinct]
Wichary: All right. Germick: This is a good one.
Wichary: This is a tricky one. I don’t know
if you can still vote. You probably might have to
refresh your– your client if–
if you can’t connect. Was it Internet Explorer
or was it Google Chrome? [laughter] Germick: This might seem
self-serving. Wichary: I–
there might be more browsers. I keep hearing about it,
but–but I–I don’t– No, I’m joking. I don’t know if you can vote,
but what do you think? man: Someone voted for Chrome? man: You’re nuts! Germick:
Ha ha ha! man:
Hey, why did one go away? Wichary:
Someone changed their vote. So yeah.
I don’t know if voting works. It’s actually a trick question
in that it’s kind of both. Ha.
In a very different way. So–so there–there’s–
there’s some, like, old Internet Explorer bug
that, you know, the background position
when you have to do, like, exit command,
whatever– I don’t know
how many of you know it. So I kind of have to,
like, for some older IE I had to use–
not even use CSS but, like, I invented this other technique
that you just put an image and you crop it
using a diff on top of it. So that was just required
from–from IE. But for Chrome, for example,
when we did Jules Verne doodle, right, we had this thing
where you could lift it up and kind of move it around
to use accelerometer, right, which was great. Many people got
quite a kick out of it, but the thing is that it was
just reverse-engineered by us on Chrome Team. So we literally
had this situation where my friend Chris and I, we got our identical MacBook
Pros in the air, we turned left,
and his doodle went left and my doodle went right,
and I had no idea why. And it turned out
that his model of MacBook had a little bit different chip
to do the– the gyroscope or whatever, and we actually gave feedback
to the Chrome team, to the engineers,
and they fixed it for us in– in–in the actual Chrome. So in both cases it’s kind of
funny because you’re– you–you’re–you’re book–
you know, bookended by, kind of, old technology
and new technology and they both cause trouble.
Right? It’s easier sometimes
for old technology because you’re used to it
giving trouble, but still, it’s–it’s–it’s–
it’s funny. Do we have anything else here?
I don’t know. Yeah. Oh, here’s
an example of– for example how Google Verne
doodle breaks down. So this is the optimal
CSS3 experience, right, where it rotates around. You can see the dials on the
left kind of rotating, right? Again, just CSS3. This is how it kind of
looks on the other browser. Right?
It just moves around. The alpha channel
is a little bit different. Germick: It’s all–it’s all–
no–yeah, there’s no alpha. There’s just bitmap.
Wichary: Yeah. Germick: Hard edge–
Wichary: There’s no transitions between frames,
so it’s a little bit more, you know, choppy. And the bottom one
is just a static image for those browsers that–
or users that don’t use JS. But it’s another thing
that we want to do. Right? We have–we–do you want
to talk about it a little? Germick: Well, I think–
I mean– a question we always
ask ourselves is, like, you know, we want to just
surprise and delight users, like I–that’s sort of our
mantra at the Doodle Team. And we always ask ourselves,
like, you know, how– you know, if we try to cut–
do cutting edge, like, so far, like, you know,
if we use Canvas, we’re cutting out,
like, “X” number of users. If we use WebGL, we’re cutting
out “X” number of users. So we’re always
trying to push the edge and push ourselves further,
but it’s al– it’s also a judgment call
for what we want to do, and I think one thing that’s– one thing I like about the way
that these guys– that our engineers work is that
we don’t filter out browsers. We filter out features. So we ping your browser
and see, like, okay, if you’re using IE6 to,
you know, can– do CSS3 transitions work? We don’t look
at the browser type, we just see
is that capability there, and I think that’s cool
’cause it’s, like, hopeful that maybe one day
IE6 will use CSS3. You never know. But, you know, that would be
future-proof in the– in the sense that it would work
on a future date. Wichary: Yeah,
so just one example, that we just detect
the feature and we– we try to do the best
and we know that translates 3D even though it’s not 3D. It’s sometimes
hardware accelerated. So we try to do that first.
Germick: Yeah. Wichary: If it doesn’t work,
we do regular CSS transforms. If it doesn’t work, we just move the object
the old-fashioned way. Germick: And–it–
and we really aren’t, like, technology agnostic–it’s just
about what the best solution is for the problem at hand.
So we–we’ve– we did a doodle, we did a–
a doodle for Robert Bunsen in March, which used–
it was subtle, but it used Canvas. So if your browser
didn’t use Canvas, we just showed you
a static doodle. And we’ve, you know,
made decisions where we’ve dumbed-down things, so we–
’cause we wanted to see if we could make it work
all the way back to IE6. Like, Pac-Man is an example
where, you know, we didn’t do some things
we maybe were able to do in I–in CSS3 or–
Wichary: Yeah. Germick: You know,
HTML5 because we wanted as many people
to play as possible. Wichary: Yeah,
this is another example. We had this little
particle doodle that led up to Google Instant
when it launched a while back, and the original
implementation, kind of, on the left was–
just wasn’t fast enough in some of the browsers, right,
some of the older browsers. And we actually had Chris Holm
just reach out to every– Germick: Yeah, he basically
sent an e-mail to a list, like, he would–
he had– Wichary: He’d tell–
Germick: “Help me.” So we had mailing lists
at Google for [indistinct] and we have–a lot of
interesting people said, “Help me write a program
that says how can I spell the Google logo
in the minimum amount of balls.” And–and it came back– it came back like this.
Wichary: Yeah. And some people
got really excited because it’s essentially like an
algorithm/math kind of question. Right?
So we got a lot of– a lot of help from,
you know, people who are much smarter
than–than we are, I guess. Okay.
Anything else? We can do, like,
one more maybe? Right? Some–
Germick: Yeah, yeah. Wichary:
Technology? man: Could I ask you
real quick–? Could I ask you
a doodle question? Germick:
Yeah, yeah. Sure. man:
You had a doodle a while back that had a number
of words in– bounded within the word
“Google.” Germick: Right. It’s the
anniversary of JFK’s famous– man: Yeah, exactly.
Germick: Speech, yeah. man: Was that hand-drawn,
or was that–? Germick: Yeah, that was–
that was very low-tech. Yeah. That was just, like,
Mike Dutton doing– doing the Lord’s work and–
Wichary: Yeah. Germick: And plotting
those images to get a– to get a visual.
Wichary: Yeah. And I–and I think that’s–
that’s a little bit of– of a choice we have to make
as well. We don’t–
Some people are voting. This is funny.
Germick: Ha ha ha. Wichary: The–like–
you know–it’s– it’s easy to get on this
like slippery slope, like, everything’s going to have
to be interactive now, and animated–
Germick: Yeah. Wichary: And crazy
and exploding, and, you know. Like, I kid you not,
my internal title at Google is “The Michael Bay of Doodles.”
Germick: It’s true. Wichary: Which is, like,
half kind of complimentary– Germick:
Flattery? Wichary: And half kind
of derogatory, because, like, I don’t want to be
the Michael Bay of doodles. I don’t want, like, every doodle
to be crazy, right? Germick: Well, who do you–
you said you had somebody you wanted to be. You–you wanted to be the
Leonardo DiCaprio of doodles? Was that–? Wichary: I–I actually like
Michael Bay. Ha ha.
man: [indistinct] Germick: Dexter of doodles?
Kidding. Wichary:
The J-Lo of–? Okay, so– Oh, this–
this is kind of fun. Okay, which of these Pac-Man
doodle features were first? So Pac-Man, you know,
some of the things that we did were the first for doodle. So remember,
this was a year ago. So “a doodle with sound,” “a doodle that ran
for 48 hours,” “an interactive doodle,”
“an animated doodle,” or “a doodle using Flash”? So which one of those
we did for the first time with Pac-Man doodle?
man: Five. Wichary: Yeah.
man: Two sounds good. Germick:
So the answer is actually– it actually is
one, two, and five. man: Ah.
Germick: Yeah. man: Always cheating.
Germick: Always cheating. So this is our– this is actually our first
interactive doodle, and this was something I did
in 2009 for Halloween, because we’d done–
we looked back at all the doodles
we’d done for Halloween– we’ve done Halloween
every year since two– since 1999–and–
and it was like, what have we not done yet? We’ve done, like, costumes
and ghosts and scary stuff, but I was like, but candy
is the best part of Halloween. Wichary: Heh heh. Germick: That’s how I felt.
Does it–do–could we–so– So the way it works
is, I was like, okay, for those that are curious,
you’ll just get simple piece of candy
on the homepage and then it’ll entice you
to click and then, you know, very simple, it’ll swap out
an image for the whole– with the whole–We didn’t use
an algorithm for this. The– Wichary:
Ha ha. Germick: We would then have,
you know, candy appear in the shape of the–
of the logo. Clicking again just made
a big candy mess, and for the curious
clicking final times was like the hangover of,
when you just, you know, ate so much candy–
Wichary: Ha ha. Germick: So it was another
type of way to, like, have a connection
with the user. Just a little, cute,
you know, story arc of– of, you know, the process of
Halloween candy overconsumption. Wichary: You click again,
you have, like, antacids or something.
Germick: Yeah. Yeah. man: Can I just ask
a quickie question? Wichary:
Oh, sure, please. man: So I mean, the original
Google homepage, right, was supposed to be this
super quick, like, nothing’s on the page
but the Google logo. So how has your–
how has this– I mean, as this is getting
more and more intricate, you’ve got this–
the whole video. How does, I guess,
Google or your bosses or whoever respond to the fact
that you’ve got now, like, YouTube videos–
Germick: Uh-huh. man: You’ve got,
you know, all of this, you know, Pac-Man. Surely this is not the simple,
plain webpage– Wichary: No. man: That the original–
I don’t know. I was reading blog posts
about this, so this isn’t really
my question, but– Germick: Sure it is.
man: Do you– do you know what my question is,
though? Germick: Gotcha journalism,
yes. No, yeah.
No, cool. Yeah, so we–
so a couple things. One, you know, the first–
Here’s a factoid for you guys. The first doodle
appeared on Google.com before Google
was incorporated. So September 4, 1998,
Google became a company, officially in the eyes
of the law, and– August 30, 1998,
there was the first doodle of–Burning Man logo
appeared on Google.com when Larry and Sergey went–
went to–went to Burning Man. And, so you know,
we have–like, we do have, like,
high-level support to do fun stuff
on the homepage. And, that said,
we care a lot about users seeing stuff
really fast. And you’ll notice, if you look into
any of the doodles that we do– like the Chaplin video
or Pac-Man, that are more resource-intense–
resource-intensive or require something to,
you know, download in the background
or whatever– we always show
a static image first. So the Chaplin doodle,
for instance, was a slide play
on the YouTube player where the mustache
was the shape of, a play button was in the shape
of a mustache. That’s actually a static image
that clicked through to the video,
then loaded later. Or if you look at the doodle
that appears in– now in Tonga and other parts
of the world as time rolls on, we show first a static image
that will then swap in with a much larger sprite
that cycles through. Wichary: Yeah. Yeah. We have–we have–
so there’s obviously, you know, part of it
is user experience. Right? But, yeah, we have very specific
rules about, you know, I think we have like 300K–
we can’t exceed– Germick:
Yeah. Wichary: On the initial
page load. Right? 300K. Germick: But even then
we always try to– We–the–the–
we work very closely with our team that serves
the homepage, and it’s a pretty complicated
and sophisticated structure to serve
that many pages, so there’s a lot of security
checks and that kind of stuff, and we take fun, you know,
very seriously. And–and–and they–they–
they are very clear, and– and we totally
agree with them, that we want to get pixels
to the page as soon as possible. So we don’t want–
Wichary: Yeah. Germick: Be sure a page
doesn’t look broken, but then we can load
all kind of fun stuff once the user, you know–
Wichary: Yeah. Germick: You know,
shows their intention that they want to play. Wichary: And–
and we did actually, on a couple of occasions,
had to pull the doodle because we–we–
we realized it’s–it’s– you know, it’s not fast enough,
or it’s– power co–
consuming power or whatever. Germick:
Right, no. So yeah, we– we definitely–
yeah, we listen to users. So for instance, Google Pac-Man
played on auto-play with sound after 10 seconds
in the initial–initial launch. And it was probably hilarious
in some meetings, you know, where people were not
really paying attention and Google Pac-Man
started playing. But, users also didn’t like
that that was happening– [siren whoops] For example, and so
you know, within, you know– in that–in that span
of the first day, we actually
re-launched it quietly where sound wouldn’t auto-play
if–if you didn’t im–im– if you didn’t
implicitly say– you know, click and say,
“play the doodle.” Wichary: Okay.
Should we wrap it up? We’re 15 minutes over time. Okay?
Germick: Yeah. I think we’re good.
Thank you guys so much. Wichary:
Thank you for coming. [applause]

16 thoughts on “Google I/O 2011: The Secrets of Google Pac-Man: A Game Show

  1. I ♥ Google for the dedication to deliver quality to users. This guy travelled to japan to get rights for the Pac-man doodle! Awesome! Google rocks!

  2. I don't wanna be the george lucas of pacman! I don't wanna be revisiting an old game. LOL! Is he italian? Strange accent

Leave a Reply

Your email address will not be published. Required fields are marked *