CS 591 Homework Two: Rubik’s Cube.

Oops, your browser does not support the canvas element. Rotate by click/drag; Reset for initial view.
Resize page to resize cube display.



The cube is centered at the origin, with each of the 33 = 27 sub-cubes having sides of .5 located at x,y,z, each taking on values +1, 0, -1.

The sub-cubes are in fact a single cube, positioned in each of the 27 sub-cube location by 27 matrices. These matrices are initialized to 27 translations. During the moves they are rotated during the animation to their new position. The rotations accumulate over time, creating the scrambled cube.

A history of moves is maintained, allowing solving the cube by reversing the history, and changing the sign of the rotation.


The use of 27 matrices is fairly easy to implement .. after many false starts! The display() procedure contains this fragment:

The move.next method is a encapsulated in a closure based JavaScript module which contains the Axis, Plane and Rotation information. It checks each of the matrices and finds the 9 that are changed during a move, and increments their rotations. The module also contains a done() method for detecting when a move is finished.

This JavaScript programming style introduces a single new function, createMove, which creates a “move” object, thus two names within the program. All the details such as the local variables and the interaction with the animation and matrix libraries are “encapsulated” and avoid clutter in the rest of the program.


Several improvements could be made.

One would be to have a second all-black cube that would be used to blacken the interior faces of the cubes. This would require moving away from the single cube approach, however, thus was abandoned.

Another visual improvement would be to draw the edges of the cubes. This could be done without additional vertices sent to the shader, but simply a new element set representing each individual line on the single sub-cube used to build up the Rubik’s cube.

The actual moves could be more interactive, using picking to select a sub-cube position, and drag to choose the move axis and plane.

Each sub-cube requires a uniform variable matrix to be sent to the shader. This could be cut down to 3 numbers: 0 - 2 for the axis (i,j,k), -1 - +1 for the plane, and an angle for the rotation. The matrices would be constructed in the shader.

The program is getting fairly complex due to lack of UI libraries and the way HTML/JavaScript both are required for each UI element. A strategy using an existing JavaScript UI library should be considered.