Cuber

Cuber is a Rubik’s Cube simulator.

Note: This repository is merely an archive of my original Rubik’s Cube demo, interred here for historical purposes—to document my initial conceptual approach and to exemplify my insane flair for code comments, complete with ASCII art illustrations. Cuber went on to power the Rubik’s Cube Google Doodle, the Chrome Cube Lab experiments, and my own Rubik’s Cube Explorer. It was also used to create the branding for the Liberty Science Center Beyond Rubik’s Cube exhibition. For more information see Stewdio.

Running Cuber

From the desktop
Simply drop the index.html file onto a Chrome browser window.

From an ad-hoc server
From the command line type the following to create a server, where 8000 (the default) is an optional port number argument: python -m SimpleHTTPServer 8000

From Apache
The file /.htaccess is configured to require a valid login which you will need to configure on your own server. Alternatively this file can be removed from the package entirely.

Methodology

Separation of state and visuals
I wanted to keep the Cube’s internal state entirely separate and independent of the visual rendering as a way to hopefully allow for future ports to serve new and unforeseen purposes. Sometimes it makes for what seems like redundancy but I think in the long term it’ll be worth it.

Modularity
I’ve tried to break the problem down into what amounts to Classes. I’m a big fan of Prototypal Inheritance but I’m hoping this approach—including separating these Classes into separate files—makes things clear and easy. Also it’s pretty awesome when you’re inspecting things via the console and the console can actually tell you that this particular Array holds Cubelets, for example. The bulk of the fun located in /scripts/models/. The app is controlled by /scripts/models/erno.js

Global scope and the Console
Lambda functions are great. And namespacing components into wrapper objects can be seriously useful. But I’ve purposely (and carefully) placed a lot of important bits right into the main scope so that tinkerers may pop open Chrome’s JavaScript Console and start poking around. This also makes it easy to write bookmarklets or other hacks.

Documentation
Through code comments I’ve tried very hard to be as clear as possible about what I’m doing and why I’m doing it. This is only partially altruism. It’s perhaps primarily so I can have some chance of understanding my own code at some future date. Ever write an app and come back to it six months later? Yea. It’s a problem. That’s why I comment so heavily.

JavaScript console fun

Inspection
I’ve endeavored to make the Cube highly inspectable from both third-party scripts and by humans using the browser’s console. To get a quick sense of what’s possible try out each of the following commands. (It’s fun!)

cube.inspect()  
cube.inspect( true )  
cube.front  
cube.front.northWest.inspect()  
cube.front.northWest.up.color.name  

To understand the basic vocabulary and mapping of the Cube and Cubelets see the comments at the head of cube.js, slices.js, and cubelets.js within the /scripts folder. (Also, if your browser does not support CSS styling within the console you’re going to have a bad time.)

Manipulation
It’s also easy to alter properties of the Cube like so:

cube.standing.setOpacity( 0.1 )  
cube.corners.setRadius( 90 )  
cube.corners.getRadius( 90 )  

These functions are chainable. And really, who doesn’t love chaining?

cube.hidePlastics().hideStickers().showWireframes().showIds()

If you’re hungry for more check out groups.js to see all the goodies.

Search
Lurking around groups.js you’ll also spot some filtering functions:

cube.hasColors( RED, BLUE ).showIds()  
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.  

And guess what—these are also chainable. (I know, right?!)

cube.hasColors( RED, BLUE ).hasType( 'corner' ).setRadius( 90 )

Solving
The infrastructure for writing solvers is more or less there. Calling cube.solve() will set cube.isSolving = true and then with each run through cube.loop() the selected solver will be asked to assess the Cube. 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 solver’s code comments and verbose console output can serve as a primer for you to write your own! Lagniappe: While writing the solver it seemed really helpful to fully define the idea of orientation / direction so I wrote a Class and some STATICs that make comparing directions a little easier. (See directions.js for details.)

FRONT.getOpposite() === BACK  
FRONT.neighbors  
FRONT.getClockwise()  
FRONT.getClockwise( 2 )  

The spacial mapping used here is defined at the head of cubelets.js. Whatever face you’re looking at has an inherrent ‘up’ and from that reference point you can ask what face we’d be looking at if we rotated clockwise by a 90 degree twist, for example.

FRONT.getUp() === UP  
FRONT.getClockwise() === RIGHT  
UP.getUp() === BACK  
UP.getRotation( -1, LEFT )  

It gets weird pretty quickly but once you’re in the correct headspace these functions become incredibly useful. Why do all this rather than hardcore matrix math? Because 42.

Code typography

Semicolons
First, I only use semicolons when absolutely necessary. By definition any valid JavaScript interpreter must perform automatic semicolon insertion. This means you just don’t need them. Let me repeat: YOU JUST DON’T NEED THEM. Leaving them out makes your code typographically cleaner; reduces visual clutter and noise in the signal. It’s good for your soul.

Whitespace
I use tabs, not spaces for codeblock indentation—functions, object blocks, and so on. Tab is the only true unit of indentation. My tabs are the width of four spaces. Two is too small. Eight is just too damn wide. Within lines of code I’ll often add bits of whitespace to line up consecutive equal signs or other recurring symbols if it’s subtle and not too wonky:

right = 2  
left  = 3  

I’ll often add a space between an open-parenthesis and a token; same for between a token and close-parenthesis. Line breaks after an open bracket are also desirable.

Comments
Two line breaks before line comments. One line break after them. Two spaces following a comment’s slashes. (One for hanging quotation marks in order to optically align the text itself.) For critical to-do’s I add two juxtaposed ampersats to both visually separate them and make them easy to search for. Just a quirk of mine. Occasionally if the situation calls for it I’ll use special “rhombus” commnents for big visual breaks. They have three horizontal spaces between slashes and text and vertical padding inside like so:

    /////////////////  
   //             //  
  //   Rhombus   //  
 //             //  
/////////////////  

I pad these rhombus comments with four line breaks above and two below.

Colophon

Stewart Smith
Occasionally stabbed at in 2013