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.
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.
Craig Stewart is a writer, SEO strategist and content marketer, and is a former editor of Creative Bloq. Craig has written about design, typography, tech and football for publications including Creative Bloq, T3, FourFourTwo and DSG, and he has written a book on motoring for Haynes. When he's not writing, you'll usually find Craig under his old car learning about DIY repairs the hard way.
