Google celebrates the 40th birthday of the Rubik's Cube in the most joyous way possible - a playable doodle.
As design toys
go, you can't really beat the Rubik's Cube. Unbelievably, the retro toy
is celebrating its 40th birthday this year and search behemoth Google
has joined in the fun with one of its famed Google Doodles.
But there's a twist, if you'll pardon the pun. This Google Doodle is an interactive online version of the toy written in CSS3, meaning you can relive your childhood or challenge your family and friends to a speed contest right from your browser window.
More brilliance from Google, and one that will certainly be getting added to our list of the best Google Doodles ever. You can play Google's Rubik's Cube here. Tanya Combrinck of net magazine spoke to one of the guys behind the doodle, Mark Lundin.
What's your coding background?
I've worked as both an interaction designer and coder for
the last 10 years. Like many, I've no formal background in the field but
it's something I've become very passionate about. I work out of a small
studio in Bristol on both commercial and personal projects.
How did this project come about?
This year marks the 40th anniversary of the Rubik's Cube and
to celebrate it, Google approached me to help develop an interactive
digital Rubik's Cube. It was going to be used as a doodle, in an installation in New York and as a series of experiments. It was such an exciting opportunity to be involved in, I couldn't say no.
Over the last few months I've been working closely with the
Google Creative Labs team in New York and the Doodle team in California
to help craft a little playable puzzle. It's one of the most technically
ambitious doodles to date, and something we're all immensely proud of.
Do you have many fond memories of the puzzle?
Many people who grew up in the '70s/'80s have really strong
associations with the Rubik's Cube; after all, it was such an iconic
puzzle, simple to grasp yet so and so frustratingly complex. I on the
other hand just didn't get it. It wasn't that the whole Rubik's craze
passed me by, I still vividly remember them at school, but I just didn't
get the intrigue. That is of course until I started building a digital
one from scratch. I spent a lot of time attempting to understand group
theory and mathematical symmetry, most of which utterly failed, but it
did give me a whole new appreciation of it's complexity. Oh, and I
actually managed to solve it on my own for the first time.
Advertisement
What technologies did you use to make it, and why did you pick the strategy that you did?
It was important that the doodle reach as wide an audience
as possible. This, unfortunately, immediately ruled out some of the
usual candidates. Whilst WebGL is becoming more prevalent amongst high
grade interactive experiments, there is still limited support amongst
mobiles devices, most notably of course on iOS. Canvas on the other hand
is a slightly more mature technology with much broader support.
However, even though canvas contexts are generally hardware accelerated
these days; drawing to canvas is still essentially a 2D operation. This
means functionality such as projecting and sorting geometry has to
happen manually. This incurs significant performance overhead;
especially important on mobile.
In the end we opted for CSS3 as our rendering option. Although 3D transforms are still in draft form, they have broad support
and they're super fast. Most modern browser generally hardware
accelerate 3D CSS which means all the overhead of rendering is performed
on the graphics card. Without getting into too much detail, this
generally means good things for interaction developers.
What did you do to make sure it worked well on
mobile? Was it tricky to make something that worked well with both
desktop and touch?
Mobile was always an important component, and the getting
the style of interaction right was even more so. We wanted to make sure
there was a close correlation between mobile and desktop experiences, so
we went though a number of prototypes to test out various controls
styles and methods. Initially we used a freeform style as you can see here.
Although this is a very natural way to explore the cube, it was
problematic if you actually wanted to solve it. In the end we settled on
a more structured interaction which worked far better on mobile. You can follow @Mark_Lundin on Twitter. Words: Craig Stewart
