Rubik’s Cube Explorer
A digital expression of Ernő Rubik’s Magic Cube—approved by Ernő, himself. My Rubik’s Cube Explorer was included in the “Beyond Rubik’s Cube” traveling exhibition, was the source of that exhibition’s branding, served as the foundation of Google’s Chrome Cube Lab platform, and was featured as a “Doodle” on the Google Search homepage—the most popular website in the universe.
What began as a weekend experiment at home snowballed into meeting Mr. Ernő Rubik—creator of the famous 3D puzzle cube—at Google Creative Lab’s office here in New York. More recently, the Cube became a point of discussion between myself and physicist Brian Greene at Columbia University when riffing on the lossless information compression that occurs along the event horizon of black holes. This is the story of how my disparate obsessions with Rubik’s Cubes and the World Wide Web joyously intersected during my time at Google Creative Lab—and how that resulting joy and wonder continue to ripple outward to this day.
Before we venture down the rabbit hole of how this project came to be, here’s a short “behind the scenes” snapshot that captures the midpoint of our journey. (Thanks to Erez Horovitz who was piecing this unfinished video together back in 2013—before his documentation efforts were deprioritized in the face of other pressing Lab initiatives.) By the time this video was shot, I’d created my ERNO
software toolkit, contributed to the upcoming exhibition’s branding, and we were in talks with the Google Doodle Team about perhaps replacing the Google logo with an interactive Rubik’s Cube for a date yet to be determined.
An unfinished “behind the scenes” video documenting how we created the “Beyond Rubik’s Cube” exhibition branding. Created by Erez Horovitz, spring 2013. Look at that—I still had hair! And a whole lot of “tired dad” energy. Note too, that Chrome Racer poster taped to the column behind my monitor. And yes, that’s Evan You (creator of Vue.js) working behind Johnny Selman. The Lab was a cauldron of young talent.
It’s interesting that I felt compelled to describe myself as “doing software development.” (I was so loathe to employ the term “creative technologist” at the time, which is clearly what my Creative Lab role was in retrospect.) It’s also a bit disingenuous the way that Richard and Johnny Selman are positioned as “typography nerds” which implies that I don’t also belong in that category. (Anyone who’s worked with me knows.) With an eye towards screensavers and poster designs, I’d already included display type on my cube simulator well before we attempted to use it to rebrand the exhibition—even building a quick interface for altering the display text on the fly. But let’s start at the proper beginning…
Sparking an obsession
Josh wouldn’t have described himself as a “genius” per se, and that made it all the more amusing when he visited us State-side during his years of living abroad in China, and demonstrated a newly self-taught ability to solve Rubik’s Cubes. (He exhibited this for us many times; eventually to the exasperation of friends and family.) There was the standard 3×3×3 cube, sure, but he also added 4×, 5×, and more to his repertoire. We’d grown up together. He was primarily a musician—bass and banjo—but after developing a fascination with Chinese culture in college he taught himself Mandarin and shipped off; ultimately lived there just shy of a decade. So perhaps I shouldn’t have been surprised or confused by this latest example of Josh’s impressive willpower as an autodidact. But there’s just such a mystique around Rubik’s Cubes that his facility with this particular obsession left an outsized impression on me.
As Josh built a new life for himself on the other side of the globe, I was wrapped up in my own journey. I’d conned my way into graduate school off the back of my rising profile as a quirky young designer in New York—and even managed to graduate. (No small miracle given what a pain I was.) But by the time I left school, the economy was eating itself. The housing bubble had collapsed, melting down Wall Street, and setting fire to just about everything. Additionally, the print industry was gasping for air as social media and the earliest iPhones burned through periodical readership and its accompanying advert dollars. That is all to say, jobs were scarce.
How many visiting German design students can fit inside a Manhattan studio apartment? Our old “shoebox” on South Street where my then-fiancée and I spent those lean financial years between graduating and relocating to London as newlyweds. Our bookshelf divided the “bedroom” from the “living room”—and that’s all there was to this tiny living space. (A composite of two photographs.)
Rare downtime
I’d recently met my now-longtime friend, Robert Pietrusko, on a contract gig with Diller Scofidio + Renfro; the Exit exhibition centerpiece for Paris’ Fondation Cartier. Despite the success of that effort I found myself jobless in the early months of 2009. It was bitterly cold—“polar vortex” only begins to describe it—and lacking spending money I was confined to our little South Street studio apartment within a building that was rumored to have once housed the Ghost Dragons street gang. Each weekday morning my fiancée would head off to her rent-paying, full-time job, leaving me to fester in our 500 square foot shoebox of a living space with its bleak view of the East River and its periodic parade of suicide jumpers. I believe “dismal” is the word.
I attempted diligence; updating my old iQuit internet gag, planting the experimental seeds that would flower as Browser Pong, and even began publishing early efforts in the exciting new field of marker-based augmented reality—all in an effort to rekindle the buzz I’d cultivated prior to graduate school; in the hopes of landing new work. But it was rough going. (I did occasionally book some absolutely mind-numbing temporary contracts to make ends meet—like a limited-time promotional website for a well known pet supply company.) But regardless of my persistence in “hitting the pavement”, I had downtime. What to do?
Learning to solve a Cube
I don’t even recall how that Rubik’s Cube came to be in my possession. But there I sat, alone in my bleak Manhattan shoebox with YouTube, a Rubik’s Cube, and memories of Josh repeatedly shuffling the thing from chaos to order and back again. I typed “How to solve a Rubik’s Cube” into YouTube’s search field, quickly settling on a two-part tutorial, and got to work. Even though I was learning the simplest solving method (layer by layer) it took weeks for me to show any progress. Much brow sweat later, muscle memory began to kick in and I could solve a layer or two without constantly referring to the tutorial videos.
Dan Brown’s original “How to solve a Rubik’s Cube (Part One)” video from Friday, 22 June 2007. (See also “How to solve a Rubik’s Cube (Part Two)”.)
I began to understand why Josh had taken to constantly shuffling and unshuffling a cube. I had assumed it was bravado, but it wasn’t. (Or at least, wasn’t limited to exhibitionism.) It was a self-soothing fidget—and a very satisfying one as it could be mixed, and then resolved. Resolution is no small thing. The outside world may be a noisy dumpster fire, but within the world of this little Cube everything could be coaxed back into calming alignment. I began carrying a Cube with me on the subway. (Remember when subway stations didn’t have cell service?) When I landed some freelance work with Wieden+Kennedy, my Cube traveled with me on the flight to Amsterdam, and then to the W+K office. It became a stress ball that I’d shuffle single-handedly while mulling over complex problems. Twisting a Cube had become a part of my thinking process.
Solving a Rubik’s Cube in about two minutes—not exactly speed cubing—while sitting in the Wieden+Kennedy office in Amsterdam on its iconic red staircase. I was there collaborating on a promotional website for EA’s FIFA 10 with Jamie Kim, et al. Months later I’d streamline my solve time to under a minute. (Still far from speedy. But short enough to captivate a small audience of colleagues.)
Cubes at NYU
That autumn I created and taught a graduate course titled “Visualizing data: Code meets graphic design” for NYU’s Interactive Telecommunications Program (ITP). I knew that much of the software and techniques that my students would need to use would be new tools for them; new learning curves. This always carries the danger that the more “nobly stubborn” folks will waste precious time trying to learn and solve every little code detail on their own, rather than simply search online for usable code samples and solutions. (A painful lesson I’ve had to learn myself repeatedly.) In a one-semester course there just isn’t time for that. Starting with pre-baked, functioning code allows one to focus on the overall user experience—to pour effort into finessing what’s being communicated through the presentation itself.
In order to prime this behavior of Googling instead of futzing, I started with something involving no code at all: For their very first assignment I asked the students to arrive at the next class prepared to explain to me how to solve a Rubik’s Cube. I gave no further instruction; how to parse and define the rules of this challenge were up to them. I wasn’t asking the students to learn to solve the Cube—that would take too long. I just wanted them to Google for a reasonable answer, then show up with that in-hand, perhaps having read through it enough to be able to speak to it in broad strokes. I was greeted the following week with varying levels of success. (I’ve since learned not to scare students like that anymore, and to always be more empathetically explicit with assignments.)
The Astor Cube (also known more properly as “Alamo”), sits in Astor Place, near the former location of NYU’s Interactive Telecommunications Program (ITP) on Broadway in Manhattan. (Photograph by NicoARicoA via Wikipedia.)
Tangent note: To me, invoking the Rubik’s Cube at ITP was also a bit of a personal pun. Back then, ITP was still in Manhattan, located near Astor Place. I’d often pass the nearby Astor Cube and recall fondly how my old zine friends, the Poor Children, had demonstrated to me that one could spin the large cube sculpture—if you put enough muscle into it. I had cubes on the brain.
Cubes abroad
I concluded 2009 by getting hitched and relocating across the Atlantic to London. My Cube obsession followed me to an artist residency at ZKM in Karlsruhe, Germany—the Cube often sitting within reach of my computer mouse as Bobby and I designed and coded our art exhibition pieces. My Cube obsession bugged my wife enough that she eventually asked me to teach her the moves. Somewhere between New York and London she learned to solve the Cube faster than I ever could, imbuing me with an appropriate mixture of pride and consternation.
Creating our trans_actions exhibition piece during the early months of 2011 with collaborator Bobby Pietrusko in our Artist in Residence office at ZKM in Karlsruhe, Germany. Note the Rubik’s Cube stationed by my mouse; employed as a stress ball of sorts.
My Rubik’s Cube was a vibrant, colorful respite—contrasting the brutal, desaturated void that Bobby and I happily chose to toil within.
Joining Google Creative Lab
Our time in London spanned nearly three years; returning to New York permanently in 2012—with a new baby in tow. I was still slightly jet-lagged during my interview with future manager, Mr. Iain Tait, and the team at Google’s massive Manhattan office. Iain and I had met a few years earlier as speakers at the Creativity & Technology conference in London. (He was with Wieden+Kennedy’s Portland office at the time—and would rejoin W+K years later following his post-Carrousel years at Google.) My Code Play presentation in London had amused him and we kept in touch afterward. I’d also had the pleasure of meeting Iain’s Creative Lab co-conspirator, Ben Malbon more recently during my “lightning talk” at Google’s beach presence for Cannes Lions. I was welcomed into the constantly churning Google Creative Lab family where I met a score of notable characters—too many to detail here.
Iain Tait as a boutonnière; from his prom-themed leaving drinks that marked the end of his Google tenure in mid-2014. I’d like to think that after I left the Lab in late 2013, Iain felt it was just too sad to stick around and so began plotting his exit. (Ha!)
One of Iain’s responsibilities at Google was—or at least appeared to be—employing unusual means of marketing Google’s Chrome Web browser. To that end, our team (along with talented external production partners) created two fantastic browser-based games, Racer, and my spiritual sequel to Browser Pong: Roll It. (Naturally, each of those have their own stories worth recounting.) Our team kept pushing the edge of interaction and quirk in the modern Web browser, both on desktop and on mobile. This process demanded frequent experimentation. What’s possible within these constraints? What’s unexpected? What’s fun? I recall walking up the backstairs to Creative Lab’s 15th floor perch one morning and thinking to myself “When this ride eventually comes to a stop, it’s going to be a long time before I reach this career peak of creative fun again.” (Reflecting back, how right I was.)
The slow death of Adobe Flash
Thanks in equal parts to the proliferation of Apple’s iPhone and Adobe’s slothfulness, Flash’s viability as an advertising medium was rapidly evaporating. Adobe apparently felt its middleman position in this billion dollar industry was too big to fail; that Steve Jobs would budge on his iOS Flash-ban and no change of business course was required. Meanwhile, HTML5 and WebGL were just beginning to seep deeply enough into the browser ecosystem to become contenders as eyeball-grabbing, interactive advert solutions. (Never forget: on the long timescale, the native Web eventually eats everything.)
Iain approached my desk with an offhand request. He was concerned about this tectonic shift and was musing on alternatives to Flash-based adverts. Could we construct some demos that highlighted new HTML5 features; bits that might one day displace typical Flash use cases? It seemed possible to craft some small interactions and package them into an iframe
rather than a Flash executable. (Pour one out for the good folks of Macromedia. They had a good run.)
Like Mad Magazine, but CSS
For a first draft, we settled on something akin to a Mad Magazine fold-in; a simple, interactive component that could wrap over itself in three dimensions for a humorous reveal. Employing the relatively new HTML5 Canvas would be “cheating”—we felt these experiments ought to be composed of “regular” HTML elements such that we’re not “painting a picture” of interactive elements, but actually manipulating live elements. With these constraints in place, could we do Flash without Flash?
I had a vague notion that the new CSS3 standard was capable of 3D rotations and simple animations, but I’d let my CSS knowledge atrophy a bit and didn’t fully understand what was possible, or how to wield these newfangled commands. (This was in stark contrast to canvas-based WebGL animations which I’d become very familiar with thanks to Ricardo Cabello—AKA Mr. Doob—and his team of contributors to Three.js. Here are just a few bits I’ve made with Three over the years.) I looked around the Creative Lab studio, scanning for anyone who might know a bit about CSS 3D, and blinked when I came to Justin Windle. Justin is one of the smartest, most humble, and genuine guys I’ve ever met in the creative tech world. And he absolutely had the knowledge I was seeking.
Justin hooked me up with some sample code and graciously walked me through it. Thanks to his help I was able to build a Mad Magazine fold-in demo for Iain in short order. But now that I had a first taste of CSS 3D, it felt like there was so much more to explore. I was compelled to investigate further.
Creating Cuber
I discovered that Three.js had a CSS Renderer and this allowed me to use my extensive experience with Three as a foundation for better understanding what was possible in raw CSS. I wanted to go deep, so I created a project for myself: I began experimenting on the weekend with variously sized and oriented cubes that could rotate and move about. Some of this was pure CSS, and some of it was JavaScript—reliant on Three and (the original) Tween.js by Soledad Penadés, et al.
Armed with a hodgepodge of CSS 3D cubes, and an existing love for Rubik’s Cubes, the intersection of these interests was inevitable. I began by assembling my little test cubes into a larger 3×3×3 cube. I then became obsessed with being able to arbitrarily group subsets of this collection, rotate the subset about the core as one unit, and then ungroup them so that the full collection could be ready for the next arbitrary grouping and rotation. It wasn’t long before I added keyboard input, inspired by Singmaster Notation, to control my digital Rubik’s Cube. My rotation notation differs from Singmaster as I decided that minuscules ought to represent the anticlockwise rotation of the corresponding majuscule’s face. (ie. ‘F’ for a clockwise rotation of the Front face, and ‘f’ for the anticlockwise rotation of the Front face.) This adjustment made one-touch commands for any rotation of “slices” trivial, and also inspired my Group
and Slices
JavaScript “classes”—which I put in quotes because I have since become a prototypal inheritance evangelist. (I’m opposed to the outdated and childish world of classical inheritance. While the ES6 syntactic sugar may fool some, JavaScript does not have real classes—nor should it!)
Inventing “Swimmies”
While debugging my experiments, I noticed that the element attribute values in the browser’s Elements Inspector would update in realtime as my cubes translated and rotated. This gave me an idea: What if I could use this debugging feature to create more purposeful animations? Perhaps I could use an HTML comment node as a 2D target canvas? I’d previously investigated ASCII animation in the form of My First Time, a student project that created a live ASCII animation in OS X’s Terminal window, and thought this might be a fun investigation of similar output. And so this side-project yielded a “side-side-project” that I would eventually formalize as “Swimmies.” (This hack is running live right now on this very website you are currently reading. If you are on a desktop machine and so interested, you can open your browser’s Elements Inspector to view it executing live.)
Once I realized that I could animate values in the browser’s Elements Inspector, I set to work on a side-side-project, Swimmies, which used HTML comment nodes as an ASCII animation canvas. I thought this was genius, but my assessment was never widely embraced.
The original (jittery) inspiration for Swimmies: Watching DIV element attribute values update in realtime as I rotated and shuffled my CSS 3D Cuber creation. (Again proof that these are real HTML elements and not WebGL, video, or other graphics.)
Joining Team Ernő
I named my little Rubik’s Cube experiment “Cuber” and brought it to work the following Monday. I demonstrated this entirely non-Flash, CSS-based interactive 3D experiment for Iain; explaining how I’d taken my weekend lark to the extreme. I could see from his facial expression that something was occurring to him; something beyond the predicted displacement of Adobe Flash as an advert medium. “Were you aware that there’s a group right here within Creative Lab working with Ernő Rubik on an exhibition all about his Cube and things it has inspired?” I was not. But of course: if this sort of playful work was transpiring anywhere, it would be here. This was Google Creative Lab. And it was perhaps the golden age of Google itself; an organization that attracted talent, excitement, and makers—and most importantly, had a ton of cash to play with. “I think they were hoping to build something like what you have here.” I could scarcely believe my luck: I had colleagues working with Ernő—inventor of the Magic Cube—and it sounded like I might hold the missing piece to their puzzle. (Apologies to Iain for the fabricated quotes above. You definitely said something to that effect, but the particular wording’s been lost to time. And thank you for that nudge towards the “Beyond Rubik’s Cube” gang. I’m grateful.)
That’s how I ended up unexpectedly joining Team Ernő. I wouldn’t say that Brenda Fogg, Thomas Gayno, Richard The, and company needed a browser-based Cube exactly, but they were definitely happy to have one. It meant that we could deliver interactive cubing kiosks for the exhibition, publish a digital Cube on the Web that would be available beyond the exhibition’s physical boundaries as well as promote Chrome, and if truly lucky, we could score a Google Doodle as well.
The Doodle team’s job was to be ruthlessly discerning. In addition to being arbiters of taste, they also had to guard the Google Search homepage from taking on more technical complication than the masses (and their computers) could handle. Google must function, after all. Web standards only; no plug-ins or other fussiness allowed. I’d previously—and unsuccessfully—attempted to lobby for my own Google Doodle in honor of Atari Pong’s 40th anniversary; a project that Creative Lab eventually released as Roll It at Google I/O 2013. (This was a “spiritual sequel” to my earlier personal project, Browser Pong.) If at first you don’t succeed… Amidst all the Doodle criteria for general cultural relevance, relevance to Google’s own brand and culture, and an adherence to Web standards, Cuber actually had a shot.
My Erno software toolkit
There was a hip mantra within Google at the time: “Don’t build the widget. Build the widget factory.” In this context it meant that rather than building a digital Rubik’s Cube, I ought to build a toolkit for generating any number of Rubik’s Cubes that could then be easily customized; hacked and modded to a third-party’s contentment. This was a mantra I’d already embraced on the graphic design side: Don’t create a one-off “fancy” logo. Instead, create a branding and design system that can output the desired style and personality in a variety of contexts.
On the code side I was beginning to express this as well. Bobby and I had already created our Bronson scene-building framework that became the foundation for various data-driven art pieces. But my facility with cranking out widget factories would blossom a few years later through efforts like my Beep.js music synthesizer toolkit, my Autocompose love letter generator, my VR hand controller plugin for Three.js (which would drive Dance Tonite, Day & Night, and the VR version of Airborne), as well as my Handy.js toolkit for recording and recognizing arbitrary hand poses. (You can even find this thinking in Black Swan’s keyboard visualizer, though I never advertised the modularity of this—focussing on the artwork itself instead.)
An early Cuber exemplar demo, illustrating various features available from my ERNO
toolkit, including cubelet opacity, cubelet radii, wireframes, cubelet ID numbers, and hero text.
In addition to tightening up the codebase of this future “widget factory”, I felt it needed a more proper name. (“Cuber” sounded a little too cute at the time, though if I were revisiting this decision today I’d likely favor its straight-forward nature.) “Rubik” was a contender for sure, but seemed like it might get lost in a search context among all of the existing Cube-related things. Meanwhile, “Erno” also paid tribute to Mr. Rubik—but a bit more directly the man, rather than his Magic Cube. And by omitting the accents above the ‘o’ it was easy for anyone to type (including us sillier folks with our accent ignorance). It was short and friendly. And that’s how my Rubik’s Cube software toolkit discarded its temporary “Cuber” name in favor of ERNO
.
Sometimes screens are too ephemeral. As I began to formalize ERNO
, I would print out posters of my experiments and hang them around the Google Creative Lab studio. By causing them to exist in a physical form and occupying particular physical space, I was keeping the various possibilities ever-present in my mind; reinforcing the outputs that I found interesting.
My Rubik’s Cube Explorer
With my “widget factory” taking shape, I returned my focus to crafting an exemplar widget: my “Rubik’s Cube Explorer.” I wanted a single exemplar that could both demonstrate ERNO
’s more useful abilities while also giving a basic overview of how a Cube functions; something I had found enormously helpful when first learning to solve a Cube. For more information about the final form that I published online, see “I am the Cube” below, or jump straight to the live website:
Aiming for open source
ERNO
was open source. (For more about the official, Google release, see the “Chrome Cube Lab” section below.) In lieu of that final code package, I’ve posted a repository of my own, early demo code. Although it’s not Google’s final Chrome Cube Lab package (which has since been decommissioned), this repo nonetheless illustrates the API flourishes that I wrote with the intention of sharing widely. (It may be missing that final layer of touch-interactivity and other small fixes that were present in the final release.) Here are some principles that shaped my ERNO
toolkit:
Separation of state and visuals
I endeavored to keep the Cube’s internal state entirely separate and independent of the visual rendering. My first serious debugging of the twist methods became an invitation to write elaborate console outputs. (See “Cube state inspection” below.) I’d often ask, “Do the 3D visuals match the Console’s ground truth?” And from there I realized that folks may wish to use my toolkit to drive radically different visuals (WebGL, native apps, or even some kind of Cube hardware), so I emphasized this separation in code. Sometimes it made for what seems like method redundancy or extra verbiage, but I think in the long term it was worthwhile labor.
Modular without modules
I tried to break the complexity down into what amounts to classes. I’m a big fan of Prototypal Inheritance but I’d hoped this approach—separating classes into their own separate files—made things clear and easy. (Recall that this was all prior to ES6 modules and imports—so JavaScript modules, which are thought of as foundation today, did not exist yet!) In defense of using classes (boo!) rather than prototypes (yay!) for this particular work, I found it reassuring to inspect things via the browser’s JavaScript console and have the console actually tell me that this specific Array
holds Cubelets
, for example. Seemed like a useful hand-holding for folks attempting to learn and reason around my API.
The bulk of the fun is located in /scripts
. The app itself is controlled by /scripts/erno.js
. From there it should be straightforward to follow along.
Inline documentation
Through code comments I’ve tried to be as clear as possible about what I’m doing and why I’m doing it—up to, and including ASCII art diagrams. This is only partially altruism. It’s perhaps primarily so I can have some chance of understanding my own code at some future date. (Like today—a decade later!) Ever write an app and come back to it a few months after the fact? Yeah–it’s a problem. That’s why I comment so heavily. “The past is a foreign country.”
CUBELETS
Faces are mapped in a clockwise spiral from Front to Back:
Back
5
-----------
/ Up /|
/ 1 / |
----------- Right
| | 2
Left | Front | .
4 | 0 | /
| |/
-----------
Down
3
Evil Tea Crab
I created the following “Evil Tea Crab” ASCII artwork and included it at the head of the erno.js
file—the main file that controls the ERNO
tookit. In the early days of the Lab, it was observed that “Evil Tea Crab” was a nonsense (and somewhat humorous) anagram for “Creative Lab.” Someone—and I’d love to know who—created a vector-drawn crab logo with a furrowed brow, steeping tea, and that became the unofficial Lab mascot—appearing on various posters and other works within the studio. Creative Lab employees became known (at least internally) as “Crabs.” As a nod to this little bit of studio lore, I wrote a quick script to convert a small, raster version of the crab logo into ASCII characters and included that output in the source code as both a gag for friends and a veiled Creative Lab calling card for posterity. Without the room to properly include the steeping tea cup and saucer, it’s just a vaguely threatening crab—but if you knew, you knew.
·~=≠≠x#≠≠=- ·=≈≠xxx≠≈~-·
·~≠#%&$$$$&%x≈~· ~=≠#%$$$$$&%x≈-
~x&$$$$$$$x~· -%~ #≈ -≈&$$$$$$$#≈·
=%$$$$$$$$$$- -≠$$- x$%=· x$$$$$$$$$&≠-
-%$$$$$$$$$$$$$%%$$$≈ ·&$$&%&$$$$$$$$$$$$&≠
·&$$$$$$$$$$$$$$$$$&= ·#$$$$$$$$$$$$$$$$$$≈
≈$$$$$$$$$$$$$$$$$#- ≈&$$$$$$$$$$$$$$$$$
≈$$$$$$$$$$$$$$$$$ ≈$$$$$$$$$$$$$$$$$
·%$$$$$$$$$$$$$$$≈ &$$$$$$$$$$$$$$$=
~#$$$$$$$$$$$$&≈ ·#$$$$$$$$$$$$&x
#%%%&&$$$$$&%≈- =- ·-=≈≈xxxxxx≠≠=~-· -= =x%$$$$$$&&%%&-
≈$$&&%###≠~- ·$&≈x%&$$$$$$$$$$$$$$$%#≠&$- ·-≈###%&&$$%
#$$$$$$$x ·≈$$$$$$$$$$$$$$$$$$$$$$$$$$%≈- -$$$$$$$$~
·x&$$&&%##≈- ~x&$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#=· ·=x#%&&&$&%=
-%&$$$$$$$≠=%$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$&x≈%$$$$$$$&≈
-=≠x#%&$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%#≠=~·
·~≠%$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%≠=-·
≈====≈≠≠≠xx#%$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$&%%#xx≠≠≈=≈
%&$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$&%
··-=x%$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%x=-··
-≈#&$$$$$$$$$$$$$$$$$$$$&$$$$$$$$$$$$$$&$$$$$$$$$$$$$$$$$$$$≈-
·=%$$$$$$$$$$$$$$$$$$%=x%$$$$$$$$%≠~%$$$$$$$$$$$$$$$$$$%=·
·-~≈≠x#%$$$$$$$$$$$$$$$$$$$x -x$$$$≠· x$$$$$$$$$$$$$$$$$$$%#x≠≈~-·
=≠&$$$$$%%%&$&%$$$$$$$$$$$$$$$%≠≠%$$$$%≠≠&$$$$$$$$$$$$$$$%&$&%%%$$$$$&≠~
-$&$≠==x&$$%%$$~~≠#&$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$≠~~$$%%$$&x==≠#%$%$=
≈$$$~ ≈%$$#x&$$~ ·-=≠#%&&$$$$$$$$$$$$$$$$&%%#≠=-· ~$$&x#$$%≈ -$$$x
≠$$≠ #$$%-~%$#~ ··-~~==========~~-·· ~#$%~·%$$# =$$#
≠$% ·$$#·-$&≈ ≠&$-·#$$· #$#
≈$= ~$% -$& &$· %$~ -$x
-& ~$~ &≠ #% ~$~ #=
Hackable from the console
To create the visuals above, I had to invent means of intricately manipulating a virtual cube in ways that truly rip it apart, then glue it back together. I scaffolded my own methods of inspecting and debugging—particularly useful when the visual output didn’t seem to match the logical twists and turns that I was attempting to feed the model. In some cases I built simple, clickable interface elements for controlling the Cube—but even in those instances the first edge of contact was always the browser’s JavaScript console.
Modern JavaScript development often employs closures or modules to encapsulate and hide data; to prevent interaction with it. (This feels like the software equivalent of a “No user-serviceable parts inside” warning.) I crafted ERNO
to be the opposite: a code package absolutely meant to be inspectable and malleable right from the console. This also enables the Cube to be interacted with via bookmarklets, browser plugins, or other fun hacks.
If you’re on a desktop machine, navigate to my Rubik’s Cube Explorer, then open your Web browser’s console like so:
Browser | Key command | Menu location |
---|---|---|
Firefox |
⌥
⌘
I
Option Command I |
Tools → Browser Tools → Web Developer Tools |
Safari |
⌥
⌘
I
Option Command I |
Develop → Show Web Inspector |
Chrome |
⌥
⌘
C
Option Command C |
View → Developer → Inspect Elements |
Edge |
⌥
⌘
C
Option Command C |
Tools → Developer → Inspect Elements |
Type cube
into your JavaScript console, hit Enter, and your console will respond with something like the following:
ERNO.Cube {
cubelets: Array(27),
paused: false,
autoRotate: false,
keyboardControlsEnabled: true,
mouseControlsEnabled: true,
…
From the response we can see that our cube
object is an instance of ERNO.Cube
and has many interesting properties—some of which we’ll detail here.
Cube state inspection
While coding my ERNO
toolkit back in 2013, I discovered the oven-fresh Chrome feature of console text styling. I’d never seen this used “in the wild” before. It was so new in fact, that when I showed this off to fellow browser bruisers, they were gobsmacked. “You can do that?” Yes. And what could be a more appropriate use of color-styling the console output than inspecting the Mondrian-inspired states of a Rubik’s Cube? This gave me a quick and easy way to debug what “stickers” appeared where. As mentioned above, I created a slight variation of the Singmaster notation to label the Cube faces. I then addressed the cubelets with IDs from 1 to 26—beginning with the front, top-left cubelet and progressing left-to-right, top-to-bottom, front-to-back. (The core cubelet has no address ID—making it easily skippable when iterating over all cubelets.) Each of the Cube face’s visual states can be easily revealed with the following command:
cube.inspect()
When in a scrambled state, the above command might yield the following:
Inspecting the state of a scrambled virtual Cube within the browser’s JavaScript console.
We can also ask the console for a more detailed overview of the cube’s state like so:
cube.inspect( true )
In addition to a cubelet index number and background color, we see the color name—or more accurately, the name of the constant property that is an instance of ERNO.Color
—as well as the face-relative named address of each cubelet. (Ex. “northEast
.”) I’ve never seen this compass notation for cubelets belonging to a face of the cube; I just conjured it up out of necessity.
A more detailed Cube state inspection from the browser’s JavaScript console.
The above is equivalent to calling inspect()
on each of the cube’s faces sequentially, ie. cube.front.inspect()
and so on. When debugging, it’s also very useful to ask for detailed inspection of individual cubelets. Here I went the extra step of adding an ASCII diagram to the output.
cube.front.northEast.inspect()
Inspecting a particular cubelet’s state from the browser’s JavaScript console, yielding an ASCII art diagram for convenience.
Writing this description a decade after the fact, I question my younger self’s decision to map through the cube strictly along the positive cardinal axes. While it makes sense in some respects, it causes confusion in others. Note which cubelet is mapped as northEast
on the back
face, and how this only makes sense if you are viewing the cube from the front face rather than viewing the back
face head on. This is perhaps where a trusted second set of eyes would have come in handy, rather than inventing the whole thing solo on the fly. Hindsight. (But in my younger self’s defense, I had done due diligence research on Dice mapping; chirality and so on.)
I could easily go on about even more ways to poke at the state of the Cube from the console. (To understand the basic vocabulary and mapping of the Cube and its Cubelets see the comments at the head of
cube.js
,
slices.js
, and
cubelets.js
within the
/scripts
folder of the source code package.) But let’s move on to what you can do with these cubelets once you’re able to address them.
Cubelet manipulation
What’s more fun than inspecting the Cube? Breaking it!
cube.standing.setOpacity( 0 )
cube.corners.setRadius( 90 )
These functions are chainable. And really, who doesn’t love function chaining?
cube
.hidePlastics()
.hideStickers()
.showWireframes()
.showIds()
.corners.setRadius( 90 )
cube.hasColors( ERNO.ORANGE, ERNO.BLUE ).showIds()
Or within the console we might inspect each of these result cubelets to reveal their ASCII diagrams and properties lists:
cube
.hasColors( ERNO.ORANGE, ERNO.BLUE )
.cubelets
.forEach( function( c ){ c.inspect() })
ERNO
contains other filtering methods, and even a generalized, catch-all filtering method: hasProperty
.
cube.hasId( 0 ) // A Cubelet’s ID never changes.
cube.hasAddress( 0 ) // But its address changes when it moves.
cube.hasProperty( 'address', 0 )// Equivalent to previous line.
These search methods are also chainable.
cube
.hasColors( ERNO.ORANGE, ERNO.BLUE )
.hasType( 'corner' )
.setRadius( 90 )
Solver hooks
The infrastructure for writing solver algorithms is more or less in place, but I never had the opportunity to complete it to my satisfaction. (See “Departing Google” for more on this.) Calling cube.solve()
will set cube.isSolving = true
and then with each iteration through cube.loop()
, the selected solver will be asked to assess the Cube’s current state. In addition to solver hooks, I’ve provided the bare beginnings of a simple layer-by-layer solver. Sadly, I only got as far as solving the Top Cross, but hopefully the solvers.js
code comments and verbose console output can serve as a primer for you to write your own.
Orientation relationships
Lagniappe: As I struggled to write my solver, it quickly became necessary to fully define the idea of orientation / direction, so I wrote a generalized directions.js
helper that makes comparing orientations a little easier:
// For brevity, direction names have been simplified here.
// ie. “FRONT” would actually be “ERNO.Direction.FRONT”, etc.
FRONT.neighbors === [ UP, RIGHT, DOWN, LEFT ]
FRONT.getOpposite() === BACK
FRONT.getClockwise() === RIGHT
FRONT.getClockwise( 2 ) === DOWN
The spatial mapping used here is defined at the head of cubelets.js
. Whatever face you’re looking at has an inherent ‘up’, and from that reference point you can ask what face we’d be looking at if we rotated clockwise by a 90˚ twist, for example.
FRONT.getUp() === UP
UP.getUp() === BACK
UP.getRotation( -1, LEFT ) === FRONT
That last line of code still puts my stomach in knots. Twisting gets weird pretty quickly, but once you’re in the correct headspace these functions make reasoning about the relationships between orientations somewhat closer to the way one might describe solver steps in English. For example, when assessing the Front Cross state of a layer-by-layer solve, you might ask: “Is the up color of the front face’s up edge cubelet the same color as the up face’s center cubelet’s up color?” Having intuitive ways to indicate relative orientation in the toolkit helps tremendously.
A missed opportunity
Let’s be honest: An animated digital Cube may look neat, but compared to a physical Cube it’s entirely unsatisfying to solve. (This was the elephant in the room as we discussed early plans for the Google Doodle.) For me, the raison d’être for a digital Cube would have been this: Imagine holding a scrambled physical Cube, a bit frustrated after a few unsuccessful attempts to solve it. But you show it to your Web cam, then watch as the digital Cube twists itself into the exact configuration of the physical Cube in your hands. And now the digital Cube can give you step-by-step instructions to solve your real Cube! In this way the digital Cube acts as a sidekick to the real one; a guardian angel sitting on your shoulder that can guide you from shuffled to solved—or from any Cube state to any other.
To create this functionality we’d need a means of pathfinding between any two arbitrary Cube states. Want to create a checkerboard pattern on all sides? Or perhaps you’re making one of those giant mosaic murals composed of Cubes, and need to shuffle each one into a unique state to match the intended illustration. This was the golden über-solution that I was working towards—but never had the opportunity to complete. Shout out to Jason Streigel who was taking this exact approach to writing the ultimate solver for ERNO
. My own incomplete solver was painstaking and specifically meant to mimic the layer method that I had first learned to solve the Cube. But Streigel’s was better; more abstract and much more flexible.
Why were we unable to complete our solvers? Time was not on our side. (See “Departing Google” below.) Perhaps in the next life.
Assisting the traveling exhibition
Flush with cash, Google had been supporting cultural engagements that aligned with its brand. Liberty Science Center’s planned exhibition—a rare collaboration with Mr. Ernő Rubik, himself—was just such a vehicle. “Beyond Rubik’s Cube” would debut at LSC, then travel the world for years to come, prominently pulling Google’s logo along with it. I don’t recall what the actual figure was, but for the sake of scale let’s say Google had agreed to assist LSC to the tune of a million dollars. And that sort of sponsorship entitled Google to make recommendations on content and so on. (The particulars of this are beyond me; in the realm of Brenda Fogg and Thomas Gayno’s expertise. And those two are wonderful human beings, by the way.)
Ernő Rubik at the Genius Gala (09 May 2014) celebrating the launch of “Beyond Rubik’s Cube” at Liberty Science Center in New Jersey. (Considering the significant financial backing, it’s ironic that the step-and-repeat wall here does not contain a Google logo.) Photograph by Babak Mansouri.
Liberty Science Center’s press release summarizes this Google partnership and the scale of the traveling exhibition:
LSC and Google team up to celebrate the 40th anniversary of the Rubik’s Cube, the world’s best-selling puzzle, with a major international exhibition. On the 40th anniversary of the Cube’s invention (April 2014) the interactive Rubik’s Cube Exhibition, which explores the interplay of design, engineering, mathematics, and creativity, will open at Liberty Science Center. It will remain at the Center for six months and then travel around the world to art museums, science centers, and alternative exhibit spaces for up to seven years.The exhibition will include a working Rubik’s Cube made from $2.5 million worth of diamonds, elaborate Cube artwork, Cube-solving robots, virtual reality simulations of Cubes that aren’t really there, a glowing 35-foot-tall Rubik’s Cube that can be manipulated by anyone with an Internet connection, and a tiny nanoscale Cube.
Google will be the creative partner of the Rubik’s Cube Exhibition and will join LSC in presenting a stunning digital and in-person experience. “At Google, we are all about tackling tough challenges with as much accuracy and speed as possible,” said Lorraine Twohill, head of Global Marketing at Google. “The Rubik’s Cube embodies this drive, encouraging people around the world to try their hand at one of the world’s most iconic toys. We are happy to contribute to Liberty Science Center’s worldwide effort to use the Cube to get children excited about science, technology, engineering and math.”
“Rubik’s Cube has stood the test of time,” says LSC CEO Paul Hoffman, “and yet remains on the leading edge of innovation. Not a week goes by without somebody—an architect in Turkey, a musician in China, a mathematician in Moscow, or a roboticist in Japan—using the Cube in an ingenious new way. Google is all about innovation, and LSC is delighted that the company is supporting the Rubik’s project.”
Ernő Rubik: Questions are more important than the answers. Note how Google wraps its mid-2010s brand of tech optimism around Ernő and his invention here, independently of Liberty Science Center and the traveling exhibition. It’s a curious corollary to the above step-and-repeat missing the Google logo.
Cuber kiosks
I imagine the easiest bit of exhibition content for Google to foist over the fence to LSC was the suite of touch-screen Cuber kiosks running on my ERNO
software. (Not to be confused with the Groovik’s Cube—a much larger kiosk-driven interactive cube that was included in the exhibition.) It could be that LSC was actually expecting some form of digital cube from Google—and I just happened to be the one to deliver the core of it, mostly by accident. (Again, the exhibition particulars were beyond my scope.) These ERNO
-based Cube variations were created by other folks either within or near to the Creative Lab family as part of the Chrome Cube Lab (discussed below) efforts. I provided my ERNO
toolkit and exemplar. They created variations for use in the exhibition and on the Web.
Cuber kiosks: These visual variations on the standard Cube were built atop my ERNO
toolkit and included in LSC’s “Beyond Rubik’s Cube” traveling exhibition.
Exhibition branding
Because I was late to the exhibition efforts, I don’t recall with certainty whether the original exhibition branding came from my colleagues on the Google side, or from Liberty Science Center’s internal graphics department—but I strongly suspect it was the latter. When the Creative Lab team onboarded me (a generous description of it), the pitch decks and mock materials were festooned with this well-meaning, but timid lockup of graphic and title. There was one meeting in particular, held at LSC in New Jersey, where the discussion amongst us Googlers during the ride home began to orbit around there being some room for improvement. We needed a bolder brand.
The early-phase “Beyond Rubik’s Cube” traveling exhibition branding.
Meanwhile, my “Cuber” Cube simulator was growing ever bolder. As I experimented further away from a faithful representation of the Cube, old influences of mine began to surface. The flat background saturations, punctured with gridded, crisp grotesque glyphs set in both black and white; hallmarks of Josef Müller-Brockmann. The recursive, systems-minded thinking of Jan Tschichold. The playfulness of Saul Bass and Paul Rand. This Swiss Modernism / Bauhaus / New York style was what I’d been weened on at UConn and Yale. (With occasional requisite rebellions towards 1990s grunge indulgences like David Carson.) It was inevitable that as I debugged Cuber by adding diegetic text labels for cubelet IDs, Cube faces, and so on, that I would arrive at this perspective-warped hulk set against a solid, saturated background, punctuated by sans-serifs set in either black or white. I’d even added an interface for manipulating cubelet display glyphs in realtime, applying a single bold letter per cubelet face to spell out various titles across the Cube’s surface.
Just a bit of classic Josef Müller-Brockmann, one of my favorite graphic influences.
I’d begun making abstract poster compositions and hanging them up around Creative Lab for fun.
According to designer Johnny Selman in the making-of video, it was Richard The’s idea to place the exhibition title on the Cube as a form of branding. But clearly this use case was already in my head. In my hazy recollection, it was actually Thomas Gayno and I that first kicked the idea around seriously to see if it had legs. There were absolutely zero of the fabled paper mockups displayed in the “making of” video that supposedly precipitated my text-on-Cube explorations—I went straight to my simulator, applied the text, and took some screen grabs / exported vector PDFs that could be printed and pinned up. In fact, the first time I ever saw a paper-taped-on-Cube mockup was during the creation of Erez’s documentary video. I suppose this false artifact makes for a good story, though?
Screen recording of my simple interface for changing the display text on the cube.
From there it was a matter of Johnny finessing the vectorwork for 2D uses, and Monica Kim composing the 3D video assets. The final result was far simpler, yet bolder, than what would have been the exhibition branding had we not intervened. We had eliminated the separation of graphic element and text—the logo lockup consisted only of text, but warped to imply the invisible structure of the Cube. Viewers can see the Cube without seeing the Cube.
Teaser video for Liberty Science Center’s “Beyond Rubik’s Cube” traveling exhibition, featuring branding inspired by my Rubik’s Cube Explorer. Video by Monica Kim, Google Creative Lab.
In retrospect it’s strange that we reached consensus on representing the Rubik’s Cube with a single color when the Cube is famously a Mondrian-like grid of basic primary and secondary colors. This tension could have been alleviated by creating several similar branding moments, each using one of the six original Cube colors. But we stubbornly stuck with red, matching my original poster experiments. (I had tried the other colors, but always felt the red was boldest and ultimately best.)
The Rubik typeface
When creating brand materials, what’s more baller than a bespoke typeface? Richard The invited friend, Philipp Hubert, to create the cube-inspired Rubik Mono One font purely for the “Beyond Rubik’s Cube” exhibition. But because Google was keen to share fun assets coming out of the Lab, Rubik was made available for free on Google Fonts. It’s now served up millions of times a week across tens of thousands of websites. In the years since, the Rubik family has been expanded to include minuscules and various weights and styles.
Typeface specimen for Philipp Hubert’s Rubik Mono One.
Departing Google
I’d created “Cuber”, packaged it as the ERNO software toolkit for future open-sourcing (which would later launch as Chrome Cube Lab), aided the team in rebranding the exhibition, created the foundation for the exhibition’s cubing kiosks, and kept the goal of a Rubik’s Google Doodle viable and in our line of sight. I’d even had a work dinner with Sundar Pichai, himself on the eve of last year’s Google I/O; underscoring the importance of these playful forms of marketing. I was neck-deep in all the things. But for various reasons (which may require their own essay someday), my time with Creative Lab was up. I was on the verge of flying the Google nest.
Selfie taken in the small lobby on the 9th Avenue side of Google’s Manhattan Port Authority building across from Chelsea Market. (The building spans the entire city block, with its main entrance on the 8th Avenue side—but as Creative Lab was housed on the very top floor of the 9th Avenue end, and those elevators were slightly less trafficked, that was often our side of choice.)
With my next opportunity secured, I handed in my corporate laptop and Google badge. The various Ernő bits were in competent hands. Departing from this little tribe was more emotional than I expected; keenly aware that as I passed through each set of doors between the Lab and the enormous building’s ground floor exit, these were doors that I no longer had keys to reopen. It was over. From this point onward in the story, I’m no longer with Google—yet the work of Team Ernő continues.
Meeting Mr. Ernő Rubik
No sooner had I parted ways with Google, than I was invited back as a guest—literally the following week. Ernő happened to be in the New York metro area to meet with Liberty Science Center on the progressing exhibition plans, and Thomas Gayno had convinced him to stop by Creative Lab in person for some meet-and-greets as well as a Lab-wide Q&A session. Knowing I’d be devastated to miss this rare opportunity, Thomas and Brenda organized a Google guest pass for me and I suddenly found myself right back in the office of a company I’d just left days prior. A strange feeling to be sure.
I was nervous to meet the man himself. I’m a child of the 1980s / 1990s and this fellow was the inventor of a cultural touchstone. Additionally, I’d read rumors online that he was a bit of a curmudgeon; enjoyed his coffee and cigarettes, and did not enjoy nonsense. (He sounded like an absolute winner to me.)
Our small team gathered in a conference room with Ernő to walk through a few exhibition-related details, and then I was invited to demonstrate my digital Cube. I walked him through how we could “explode” the Cube as it animated through a random shuffle; to reveal how the movements of its various parts related to each other. We could also turn down the opacity of various cubelets to foreground specific other cubelets’ journeys around the core as the Cube shuffled. I was very conscious of the fact that I was taking his beautifully tactile invention and reducing it to a flat visual; I was anxious of him assessing it as a soulless retread of his vision. But to my delight he approved of it—and took a special interest in how this interactive digital version allowed for a level of investigation beyond the physical article. His simple approval meant the world to me. (Thank you, Ernő.)
Ernő Rubik in conversation with Thomas Gayno at Google Creative Lab, October 2013.
Word had spread around the Lab that Ernő was on the premises, and there was a rumor he would even autograph some Cubes. Suddenly every intra-meeting break became an opportunity for another Labber to rush out to a toy store and purchase several new Cubes in the hopes of having Ernő sign them. The amount of discarded plastic Cube packaging in the recycling bins became comical. Ernő had some other afternoon Lab meetings to attend, but late-day was reserved for a special treat: Thomas was to conduct a sit-down interview with Ernő before a live audience of us fellow Creative Labbers—or “Crabs” as we called ourselves.
After the interview and a brief Q&A session, Ernő was indeed cajoled into autographing these recently-purchased Cubes. To my surprise—and seemingly Ernő’s—his sharpie signature could be wiped right off the glossy Cube stickers with the most minor of accidental brushes against any other surface. (How could this not have been anticipated? Surely he’d signed thousands of Cubes over the previous forty years?) As this disappointing reality began to ripple across the throng of Crabs, I had an idea.
Ernő Rubik autographing cubes at Google Creative Lab, October 2013.
I, of course, had one of my own Cubes stuffed in my backpack. It was old and heavily used; stickers scuffed up and half peeling. But most importantly: the sheen of the sticker surface had long ago worn off. “Perhaps this will work better?” I retrieved the Cube from deep inside my backpack and showed it to Ernő. He smiled. He actually smiled. Everyone else had shiny new Cubes that clearly had never been used. My ugly Cube was beautiful in its mileage. I was a real Cuber. It was undeniable.
But my Cube presented a new problem: It was scrambled. Ernő was accustomed to signing the solved white face of the Cube with a black Sharpie—where the high contrast would make his autograph most visible. I had to quickly solve my Cube right there in front of the inventor himself, with the rest of Creative Lab watching. No pressure. No pressure at all.
My very scuffed-up cube, signed by Mr. Ernő Rubik; a late birthday present of sorts. October 2013.
Afterward I sat there on the couches in Creative Lab’s common area; a bit stunned by it all. Ernő had dutifully signed all those unused Cubes, and then left the building. The Crab crowd had either returned to their end of day tasks or gone home. Here on the front couches; this was the same spot in the office where Google co-founder, Sergey Brin, had once plunkered down and instructed me to “be patient” because patience is what made Google successful. He was being sarcastic. He’d overheard a colleague and I debating whether or not to interrupt a seemingly never-ending meeting in the nearby glass conference room so that we could pass on some time-sensitive project updates to our SVP who’d been sequestered in there all morning. Sergey was humorously goading us to overcome our cowardice and break into the meeting. (On the occasions that Sergey would visit the New York office he’d often hide out in Creative Lab as we were concealed in the corner of a top floor; out of the way, and with the courtesy to politely ignore him rather than pester him in accordance with his tech celebrity status.)
So this was it. Time to make my “final” exit from the Lab. (For the second time in as many weeks.) I once again strolled solo past the Lab’s heavy, self-locking main door, down the one flight of stairs to the elevator banks, then out through the main lobby of the home that Sergey (and Larry) had built.
Secret side help
Turns out it’s difficult to find folks who understand the trifecta of 3D graphics, Web technologies, and Rubik’s Cubes. We’d built up great working relationships with jaw-droppingly talented shops like Active Theory—but even they were confused by our Cube project at the time. (That was back in 2013. Now they are 3D experts, of course, and could no doubt wrap their heads around the Cube with minimal effort.) In fact none of Creative Lab’s trusted partners were able to receive and run with our Rubik-shaped baton. Meanwhile, I was now employed at Yahoo—a Google’s competitor—and furiously churning out new marketing hits like Yahoo Mail Autocompose. How did Team Ernő plan on completing my unfinished Cube efforts without me?
Let’s just say I had some rather busy nights and weekends spent hunched over a laptop on my dining table leading up to both the April 2014 exhibition opening and the May launch of our other Rubik-related artifacts. (It had to get done someone, by someone, right?)
Launching all the things
I’ve entirely forgotten the justification for the exact date of Monday, 19 May 2014—but this was the day chosen to launch our Google Doodle celebrating 40 years of Ernő’s Magic Cube. (Meanwhile, the “Beyond Rubik’s Cube” exhibition had opened the previous month.) In turn, this May date became the natural choice for launching all of our other Rubik-related goodies. There were Google press releases, official blog posts and social media snippets, unofficial personal posts, and Chrome Cube Lab—the official open-source release of my ERNO
toolkit. Third-parties reacted accordingly with their own write-ups.
The Atlantic,
Wired,
the Today Show,
and even
Time Magazine
all rushed to announce our Cube celebration. (See the right rail for a more comprehensive—though far from complete—list of mentions.)
It was bittersweet. No longer part of Creative Lab, I watched our work trend from my desk at Yahoo. I would have enjoyed celebrating our success in person / in realtime with my old colleagues, but it wasn’t meant to be. When I sheepishly informed my Yahoo peers that my work was on the Google Search home page, none of them quite believed me. How could a non-engineer working as a marketing hack at this humbled competitor have created the interactive puzzle that presently sat on Google’s most coveted real estate—the most popular website in the universe? Leveraging my recent success in creating Yahoo Mail’s Autocompose, I did manage to convince a few co-workers, at least. But largely it was just another day at the office.
Rubik’s Google Doodle
For the uninitiated, a “Google Doodle” is a temporary replacement for Google’s logo on the Google Search homepage. The Search homepage is sacred. While it may occasionally include small text announcements, it does not feature adverts or additional content. The Google Search homepage shuns “Web portal” commercialization—in stark contrast to search competitors like Yahoo, Ask.com, Excite, and so on. (All other search engines—like Lycos and Web Crawler, etc—thrived as cluttered Web portals until Google beat them handily in the market, forcing most to rethink their user experience and monetization strategies.) Instead, Google kept a strict focus on simplicity and minimal distraction. A user came here to search. That’s what we’re going to help them do.
Our Rubik’s Cube Google Doodle as it appeared on launch day: Monday, 19 May 2014.
This means that getting an actual Doodle published is a rare (and coveted) event. There are internal rules and standards for Doodles. They are not green-lit lightly. In fact, there is a whole Doodle Team dedicated purely to upholding (and delivering according to) standards that span from brand to engineering. These logo-replacements must be relevant to the general culture that they are presented within, and also relevant to Google’s own brand. (Who are we? And what people and achievements do we accordingly celebrate?) Doodles must also be precisely engineered. Technical failure is not an option on the most viewed website in the known universe. The mere fact that ours was approved and launched by the Doodle Team was already an achievement in itself. Therefore, our Rubik’s Cube Google Doodle was the undisputed centerpiece of launch day.
The opening animation of the Rubik’s Cube Google Doodle which transforms from a standard Rubik’s Cube into an abstracted Google logo, and back again.
At the time of its release it was also the most technically complex Doodle ever published, as it employed the Three.js JavaScript toolkit, the Tween.js toolkit, and relied on CSS 3D rendering and animation—which were established browser standards by then, but still had the sheen of greenness. (I believe it may have also been the first ever use of Three.js on the Google Search homepage, though I have no easy way of confirming or debunking this.)
YouTube user, FireTheLost2’s video capture of playing (and solving) the Rubik’s Cube Google Doodle.
I’d love to link to the original Doodle, or to relay Google’s published usage statistics for it. Sadly, our Rubik’s Doodle has been removed from Google’s Doodle archives where it had been available for years following its initial release. (See dead link here.) Perhaps there was an expired licensing agreement, or late-discovered code vulnerability, or perhaps just the slow evolution of browser standards finally broke what was a truly complicated piece of branding fluff. The world may never know. Thankfully, there’s plenty of third-party documentation on YouTube.
“I am the Cube”
My Rubik’s Cube Explorer is merely one example of what can be built upon my ERNO
software toolkit. I chose to create a gentle introduction to the Cube and its parts; a first-blush understanding that might spark a greater curiosity in a viewer and eventually lead them toward investigating solving tutorials and the like. The simple, limited interface includes a few veneer options, as well as toggles for highlighting the various cubelet types.
Speak for yourself
I have a long-running predilection for creating self-actualizing (or at least, “self-announcing”) interfaces. These are often abstract and faceless, text-based creations, rather than cartoonish characters. At the time of our Rubik work I’d already demonstrated this through pieces like my Jed’s Other Poem music video, and the first prototype of my Black Swan music video. Shortly after leaving Google I’d go on to create Yahoo Autocompose, which imbues Yahoo Mail with the ability to string its own thoughts together on behalf of (and for the amusement of) the user.
Underpinning all of these are whispers of influences like Concrete Poetry and Alvin Lucier’s “I am Sitting in a Room.” (Though it’s of course difficult to reach that divine level of recursion. I may have come close once; the closing bit of Jed’s Other Poem.) Perhaps more directly, I was influenced by movie scenes, like David Lightman’s discovery of WOPR’s backdoor in WarGames (1983). (“Greetings Professor Falcon.”) And also Steve Jobs’ introduction of the original Apple Macintosh in January 1984. (“Hello. I am Macintosh. It sure is great to get out of that bag!”) Accordingly, I set about making the Cube announce itself when my Rubik’s Cube Explorer loads: “Hi. I am the Cube”, it begins. This is all underscored by the demonstration’s URL itself: https:// i am the cu.be
Screen capture of my “I am the Cube” introduction. (Note how some of cubelets pop between flat planes and 3D boxes in this recent screen capture. Something about the CSS 3D standards / browser rendering algos must have changed over the past decade in order to introduce this quirk that didn’t exist back in 2014. So it goes.)
Years later, Ernő’s autobiography takes a similar tack: Rather than telling his life story from his own point of view, he brilliantly subverts the genre by speaking from the Cube’s point of view. (Further below, I speculate on a possible inspiration for this.)
Heart of glass
In addition to attempting to represent the Cube with faithful visuals, I also experimented with more abstract forms—like the wireframe model, or even cubelet ID numbers, sans solid forms. But my favorite experiment landed somewhere between: Partially representation, but rather than “solid” cubelets with color stickers, I created a glass-like, full-cubelet-face color transparency. I named this the Glass Cube and kept it as a veneer option in my Rubik’s Cube Explorer. (I also loaded up a shuffling animation of the Glass Cube onto some of the large screens within Creative Lab and left it running as a screen saver of sorts.)
Screen capture of my glass Cube shuffling itself.
Exploding the Cube
I enjoyed adding an animatable radius
property to my ERNO
toolkit, which allowed for easily adjusting each cubelet’s distance from the Cube’s center. While I didn’t expressly feature this configurable property in my Rubik’s Cube Explorer user interface, the ability to “explode” and “reverse explode” the Cube is on prominent display in the opening animation as the Cube’s rotating core rises from below frame and eases towards the viewport’s center—each cubelet’s wide orbit contracting until each locks into their respective positions to form the familiar, fully realized Cube.
Screen capture of the “reverse explode” opening animation. (Note that this is definitely a “reverse explosion” rather than an implosion.)
Learning the Cube
Core to my Explorer is the ability to call out the three different types of cubelets (sometimes called “cubies”): centers, edges, and corners. Each type of cubelet has a specific number of stickers and rotates along a specific number axes. A cubelet can never change its type. For example, a center cubelet can never become an edge cubelet. For the Cube novice, learning these constraints (and seeing these animated examples) begins to put limits on the seemingly infinite complexity of the Cube. Strategies to solve it can begin to take shape.
My Explorer also contains toggles for displaying cubelet ID numbers (useful for tracking a cubelet’s movement over time), as well as Cube face labels. While this interface does not enable a user to display arbitrary text across the Cube faces, ERNO
provides this ability via the command line through methods like cube.setText('ABC')
and cube.showTexts()
.
It’s important to remember that all of this is done using real DOM elements via CSS 3D—rather than an HTML Canvas element, potentially using WebGL. It’s all just DIV elements. (I consider that a feat of strength.) In the decade since release, some browser rendering engines have introduced a flaw where 3D elements collapse their depth under certain conditions. (Sadly, I can see this effect in my Cube Explorer when foregrounding / background cubelets by type.) But overall, the code still holds up all these years later.
Chrome Cube Lab
Google’s “Chrome Cube Lab” was a very small community site featuring my ERNO
toolkit and a handful of experimental Cubes built upon it—including my Rubik’s Cube Explorer. Visitors were invited to download the ERNO
code package and build their own custom Cubes, using the featured Cube experiments as inspiration. The toolkit was given away for free; my code to the masses!
The Chrome Cube Lab promo video, including the Cube Lab website prior to its decommissioning.
Chrome Cube Lab also made an appearance at Google’s annual developer’s conference, Google I/O 2014, though I don’t know the details of that. (I wasn’t there—I was over at Yahoo inventing Google Smart Reply.) But I had attended Google I/O the previous year, when Sundar Pichai unveiled our Chrome Racer game during his keynote speech.
Chrome Cube Lab custom cube swag for GoogleI/O 2014.
Sadly, the Chrome Cube Lab website has been decommissioned and is therefore no longer accessible. (The dead link here redirects to the Chrome website.) Worse: I don’t have access to the code package or documentation of the beautiful Cubes that were featured on the site. What I do have is a link to an early version of my original ERNO
code, and that paints at least 90% of the picture.
Tending a legacy
“My” Cube is, of course, just a pale, digital imitation of Ernő Rubik’s original Magic Cube. As inventive as I attempted to be, it was merely a translation of what had come before, rather than a wholly original concept. And even within its own narrow context as an interactive Web experience, it sits atop the shoulders of giants, standing on yet other giants. (For example, all of the creators of Three.js and Tween.js, standing atop all of the graphic mathematicians and contributors to JavaScript, atop the unsung browser engineers, Web standards scaffolders, operating system geniuses, information theorists, and so on—right down to the metal.) I hope my silly efforts have contributed something to the community that weighs at least slightly on the positive side of the ledger. It feels meaningful to pay some tribute to the things that have inspired and propelled me.
Hey, that’s my cube!
That’s not to say I don’t feel some measure of pride. After all, my digital Cube has spread far and wide. It’s a bit of a thrill to open up a website I’ve never seen before, type ERNO
in the console and find my own code smiling back at me. Some are rather prominent online, like the “Ruwix” Cube simulator. Some have quite good URLs, like https://rubikscu.be. (I’m a bit jealous of that one, actually.) But under their respective hoods it’s my engine powering the fuss—whether they bother to credit it or not.
Rubik’s Clock
Occasionally I’ll come across some kind words. A fellow operating under the moniker “The Mad Wrapper” included this blurb in the description of his playful Rubik’s Clock.
Wow! It is such a pleasure to work with this well designed code as a baseline. Every piece of [Stewart’s] code is beautifully planned and thoughtfully designed. (And I love his choice name for the JavaScript entry point—erno.js
! I will let the reader ponder why this is such a great name.)
The Mad Wrapper’s Rubik’s Clock, built on my ERNO
toolkit.
Looking back at my old code with ten years’ hindsight; there’s a lot I would change or streamline. But that’s the curse of longevity: projects that continue to function long after their creation will exist long enough to become aware of their own shortcomings. (And so we all.) I doubt there will ever be a funded opportunity to sink appropriate time into revisiting ERNO
’s composition. The best I can do is take what I’ve learned and apply it to the next adventure.
Exhibition for rent
The “Beyond Rubik’s Cube” exhibition is literally for rent, as described in this undated public pitch page.
Rent Beyond Rubik’s Cube. A 7,000 square foot traveling exhibition celebrating the innovation and insights inspired by 40+ years of playing with the world’s most popular puzzle. The exhibition premiered at Liberty Science Center on April 26, 2014 (the 40th anniversary of the Cube’s invention), and will now travel internationally for seven years.
The co-owner of the enterprise, Exhibits Development Group, has a more detailed description of the content here, but the tour schedule and other logistics materials seem to be offline.
According to the following video, the exhibition returned to Liberty Science Center in October 2020 after touring the world. (Note that this video was filmed prior to the COVID-19 global pandemic.) LSC re-opened with safety protocols in place appropriate for the moment, and even included this Cube-based mural of Dr. Anthony Fauci.
A promotional video celebrating the return of “Beyond Rubik’s Cube” to Liberty Science Center in New Jersey after completing its first world tour. October 2020.
This year—2024—celebrates not 40, but 50 years of Ernő Rubik’s Magic Cube. Will the exhibition one day travel again?
Ernő’s autobiography
One particularly surprising post-launch development arrived in the form of a book. The cover of Ernő’s 2021 autobiography bears a striking resemblance to our exhibition branding, which in turn was influenced by my early Cuber experiments. (If I hadn’t crafted my experiments with white type on a flat red background, would the exhibition branding have been red? Ernő’s book cover? And the character glyphs; represented as if affixed to the cubelet faces, minus any visible structure of the cubelets themselves?) I’m not sure who designed the cover, but I believe we owe each other a hug and a drink.
Perhaps even more exciting, Ernő’s “autobiography” isn’t written from Ernő’s perspective. It’s written from the perspective of the Cube, itself. It’s as if my “I am the Cube” conceit expanded from a simple Cube tutorial to the scope of Ernő’s entire life thus far. How many folks write autobiographies that enigmatically displace their own first-person point of view with the perspective of the (anthropomorphized) object or system that made them famous? Did my own predilection for creating self-actualizing (or at least, “self-announcing”) interactions—and the resulting “I am the Cube” demo—spark this concept for Ernő’s autobiography?
Ernő’s autobiography—written from the perspective of his Magic Cube. “Cubed: The Puzzle of Us All”, Orion Publishing Group 2021.
I suppose I could ask him. But out of respect, I’ve used my knowledge of Ernő’s email address sparingly. (Once, perhaps twice over the last decade.) Being very much not famous, I try to be mindful of the frazzling onslaught of attention that famous folks receive. Besides—and I imagine Ernő would find this take amusing—the question is more powerful than the answer. By leaving the question open in this pseudo-quantum manner, the reality is undefined and therefore either outcome remains a shining possibility. Did I have some small influence on Ernő Rubik’s autobiography? The probability is small, but it’s greater than zero. That’s not a terrible legacy. I’ll take it.
Solving the universe
Years after all this Cube excitement, I found myself up at Columbia University, with Sylvio Drouin, SVP of Innovation at Unity Technologies. Sylvio was in town for the weekend and never missed an opportunity to engage in thought-provoking discussions with fascinating characters—and I considered myself lucky to be invited along for this particular meetup. Sylvio’s conversation partner for the day was Professor Brian Greene—famed theoretical physicist, science author, and television personality. (And after having the good fortune to spend time with Dr. Greene and his wife in this casual conversational setting, I’d also add “very pleasant fellow” to that description.)
At some point the discourse inevitably turned to black holes. I’d previously listened to lectures by Leonard Suskind on the “holographic principle”; the ability of a black hole to losslessly encode the entirety of the universe’s incoming three-dimensional information onto its two-dimensional event horizon surface. How in the world could voluminous 3D “data” be compressed onto a depthless 2D surface without information loss? I found the concept paradoxical and intriguing. And also potentially lucrative…
A candid and sun-flared moment: Dr. Brian Greene discussing black holes and more with Sylvio Drouin and myself at Columbia University in 2018.
Our employer, Unity Technologies, is most known for its interactive scene composer and its platform-agnostic runtime engine for the real-time rendering of these composed scenes. It takes a lot of data (and data-crunching) to create and render three-dimensional contexts. What if the universe could provide us a short-cut that required one dimension’s worth less of that data while maintaining perfect, lossless quality? That’d be a hell of compression system. Our users wouldn’t need as much hard drive space (or Cloud storage) to house their 3D assets. Workstations would be capable of authoring more complex environments without costly upgrades. Game players could eek out extra muscle from their gaming hardware, allowing mobile devices to truly punch above their weight. How might we leverage this extreme dimensional compression to make Unity’s tools dramatically more efficient?
I relayed these thoughts to Brian who took a moment to ponder my question. I knew my inquiry was a bit absurd; that there was no direct way to make use of this mysterious black hole property. But I had genuine curiosity about how this sort of holographic compression might be possible. When Brian answered, he spoke to a more general truth that stood between us and this black hole sleight of hand. “It could be that spacetime doesn’t have the full degrees of freedom that our mathematical tools for describing it do.” (This is merely the best I can recall his words; the historical reality may be slightly different.)
Reaching for whatever rusty intellectual tools I might have for digesting this response, I found one that perhaps didn’t quite fit, but did feel right. “Do you mean like how, for a novice, a Rubik’s Cube appears to allow infinite shuffling of any color sticker to any other spot, but once you grasp the underlying constraints on those 3D rotations you realize that although the space of possibilities is large, it’s far short of infinite? The number of possible states is immense, yet smaller than what a first-blush mental model might forecast?”
“Something like that”, he said and smiled.
We conversed a bit more about the the difference between our mathematical models for understanding space—warped Cartesian grids of XYZ coordinates—and how the true nature of the universe may be far stranger. For example, while it appears that I could travel infinitely in some arbitrary direction, it might that be that for all of the puzzle pieces of reality to fit together properly (like a solved Cube), a swath of those potential positions are actually rendered impossible. Our math is only a simplified shortcut of an attempt to describe the actual. (Take my recollection with a grain of salt, I’m certainly no physicist. It could very well be that I’ve misunderstood the whole thing.)
Our conversation moved on to other topics. Before I knew it, our time was up. Sylvio and I meandered off the Columbia campus, minds buzzing from the heady discourse. How I’d love to repeat that experience someday.
An email from Ernő Rubik, responding to myself and Thomas Gayno.
I took a chance and relayed this exchange to Ernő Rubik via email, not truly expecting a response. (And as I’d mentioned, I only use Ernő’s address very sparingly.) But respond he did. Short and sweet, he said he enjoyed the concept of a “Cosmic Cube” and that it would be exciting to work together again. (As much as I’d love to take on further Rubik adventures, I imagined this statement was more out of politeness; I savored his thoughtfulness.)
After spending such time and attention on Ernő Rubik’s Magic Cube, on Web technologies and a passion for art and design, on attempts to understand the quantum forces of nature, and to share joy with others around us… What has it all been for? As Ernő says, the questions are more important than the answers.
An empty Liberty Science Center entrance hall with sunset light filtering in through the glass entryway as the “Beyond Rubik’s Cube” branding animates above the vacated ticket counters, 2014.