Google’s crushinator

So this is the Doodle that we had for the 4th of July A few years back We actually wanted to do a doodle for Rude Goldberg but his birthday was the 4th of July so we felt what if we do a tandem doodle an overly patriotic rube goldberg contraption Right ? So here we go ! It’s a cute little animation, right , that works really well But now think about it. How would you actually put it on Google homepage in a way that everybody would enjoy it you have a couple of options uh… 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’t
stop them you don’t really know what’s happening with them You don’t know when they load exactly, each frame, you know Sometimes they’re slow when they’re loading HTML5 video, Flash video or Youtube uh… Flash and Youtube are kinda cool but kinda heavy and also
wouldn’t work on iOS HTML5 video, in reverse, wouldn’t work on all browsers Individual frames : a lot of latency, a lot of bandwidth CSS3 animations : you could imagine kind of recreating all of this in CSS with transforms and stuff like that That’s not gonna work on older browsers either. so we invented our own thing uh… that we called, I called Crushinator. It’s a Futurama reference. I don’t know how many of you remember this The way it works is essentially it looks at every
frame and compares it to the next one and create a sprite out of the
difference between those frames. So you can kinda see
how it’s been created right here it’s all by the way done in JavaScript which is pretty cool right Everything we used to have to do on a server, we can now do it in JavaScript So it creates this sprite slowly with you know all of that deltas essentially between frames right You can see it, now it goes to the end and now when you play it it actually just covers every frame with a new delta right
so this is a nice simple illusion and actually it’s easier to show it this way it just, you know, overlays every new
frame on top of the other one and it 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 so we have it and we use it in a
couple of doodle scenes and again if you don’t view source, and
some people do and actually it’s pretty cool when they reversed engineering it uh… you don’t know any better because it just
looks like a regular animation And it’s kind of really the point oftentimes

One thought on “Google’s crushinator

Leave a Reply

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