Rubik's Cube on canvas

Recent posts about the 5 × 5 cube assembly algorithm made me write a cube emulator for canvas . The author of articles about the assembly offered his cube on OpenGL, but I didn’t like it to many. I hope with my someone will be able to master the algorithm faster. Some features and benefits:

• Cross-platform, cross-browser compatibility (we do not consider IE for the browser), uselessness of the installer and other advantages of the web application.
• Support for cubes from 2 × 2 to infinity (as long as the edges do not become very small and rendering starts to slow down severely). The interface rendered up to 11 × 11, but in the library there are no restrictions.
• Pseudo-volume faces for beauty.
• Endless undo buffer.
• The ability to knead the cube (shuffle).
• Layers rotate easily and intuitively, you get used to it quickly. Twisting the whole cube (with the mouse with the clamped cipher or the right button) is not so easy, but you can also get used to it.
• The entire library is compact, placed in a single js-file and has no external dependencies.
• MIT license, as well as open and not very scary source codes allow you to insert a cube on your site and refine it to your taste.

I do not know whether to talk about the features of the development. There were many difficulties, but all are quite minor. For some reason, I was too lazy to use homogeneous coordinates, which is why, in particular, the projection is orthogonal, and not perspective. The rendering model is also a bit strange. In general, the cube is represented as 6, 12 or 18 faces, and each face contains up to size ^ 2 elements, each element is a square. On the internal sections, which can be seen when rotating, the element is only one area on the entire face. 9 visible faces are signed here, the remaining 9 are arranged symmetrically to them:

It also took to sort the faces in the correct order so that the invisible parts were correctly removed. Here the correct order is along the axis of rotation (if there is no rotation, the order is unimportant).

The scope of the faces is unscientific: it is simply a circular gradient of canvas, the center of which deviates in the direction of the normal. Honestly considered illumination by BRDF seemed unreasonable for this task.

What else would you like to do, but laziness:

• Keyboard control.
• Before rotating the layers with the mouse, highlight the rotating layer to reduce the number of errors. Now the rotation begins if, with the button held down, to hold the mouse 50 pixels in the direction of rotation. The backlight can be turned on at a smaller distance, then the user will stop on time. Maybe this is not necessary, my mistakes rarely happened.
• To fix a 2 × 2 cube, for some reason it does not work. fixed - thanks fllln
• Make a perspective projection.
• Saving / loading (can be in cookies).
• IE6-8 support (probably the radial gradient in excanvas will not work).

If anyone wants to do something, then please. If you have questions about the code, ask, I will answer with pleasure.