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.
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.
