QWERTYcube

Submitted by sle on Sun, 06/28/2015 - 18:06

Overview

QWERTYcube is a keyboard operated and JavaScript based open source (MIT license) Rubik's cube that runs in modern browsers that support WebGL. You can download, run it locally, or install it on your website. Or you try it by clicking here to run a copy of it on this website, or here to run the copy hosted on github via gh-pages.

Update

Version 0.9.8 was released on 2016-07-24. Here are some of the new features since 0.9.7:

  • Higher order cubes - Cubes of any order 2x2x2 and up are now possible.
  • Mouse + keyboard support - the Alt and Shift keys now modify the mouse behavior.
  • Tool tip help for the buttons.
  • Various bug fixes.

Here's screenshot showing a 4x4x4 cube and a tool tip for the N·N·N button:

Version 0.9.7 was released on 2016-01-06. Here are some of the new features since 0.9.1:

  • Full Mobile Support - Touch is now supported in the same way the mouse is on desktops. Tested on Nexus 6 and iPhone 6s.
  • Multi-touch Support - It's possible to do two compatible moves simultaneous with two simultaneous touches.
  • Single Click Moves - In addition to clicking and dragging it's now possible single click on a sticker to trigger a move.
  • Button Bar - There is now a bar of buttons at the bottom of the screen.
  • Heise Key Map - Heise key bindings can now be turned on by clicking a button.
  • Move Consolidation - If two compatible moves are made, such as L and M, they will be consolidated into a single move, such as l in this case.
  • Rotation Lock - Clicking Lock or K prevents the cube from rotating when the grey background is clicked.
  • Improved Help - The help is now more detailed.
  • Improved Sizing - Now the maximum sized cube is used that does not exceed the canvas that it's on regardless of the cube orientation or screen dimensions.
  • Faster Replay - Large numbers of moves are now replayed more quickly.
  • Energy Efficient - The screen is not updated when the timer is not animated..

Here's screenshot from a mobile device:

Credits

QWERTYcube would not exist were it were it not for Siddhante Nangla's rubik_scrambler program, which QWERTYcube is based on.

Also, the nice folks at www.SpeedSolving.com provided great feedback, much of which has been incorporated to the latest version of QWERTYcube.

Features And Design Goals

This is not a complete list, but I think it covers the important features.

  • HTML5 And JavaScript - QWERTYcube should work in modern browsers without having to install anything.
  • Simple Functional Graphics - Instead of using interesting WebGL lighting effects the stickers are painted with fixed colors. It's simple, but it should be easy to see.
  • Fast Animation - By default the animation speed is 10 twists per second. Also, the animation is bypassed when the number of moves queued up exceeds two moves. Both parameters are configurable. It's designed to not slow you down.
  • Complete Move Notation Support - All six sides, reverse, double layer, all three middle moves, as well as rotating the entire cube are all supported by the expected keystrokes. The notation is based on this.
  • Full Mouse Support - You rotate the entire cube by dragging the grey background, or make moves by dragging on the cube.
  • Scrambler - By default the J invokes the JSSS scrambler (a random state scrambler for JavaScript).
  • Checkpoint, Undo And Redo - If you've reached and interesting point, such as a OLL or PLL, and you're worried that you're going to mess it up you can set a checkpoint with the C key. You can then undo any number of moves to rewind to that point in time my pressing <Alt>-G. You may undo one move at any time with G, or redo it with <Shift>-G.
  • Timer With Inspection Period - Similar to actual contests scrambling the cube begins a 15 second (configurable) countdown, shown by the timer in red. During this time you may rotate the entire cube to inspect it, but making at actual move ends the inspection period causing the timer to turn green and start counting up. The moment the cube is solved the timer turns yellow and stops, giving you the solve time. Press T to toggle the timer.
  • Information Dialog - You can inspect, save or change the state of the cube by bringing up the information dialog by pressing I.
  • Persistent State - Each time ok is clicked (or Control-Enter) in the information dialog most of the variables (other than the ones that are too transient) are saves to HTML5 local storage so that they'll have that value next time the page is loaded.
  • Remapable Keys - If you don't like the provided key bindings you can remap them via the keyMap variable in the information dialog.
  • Configurable Colors - There are four color schemes to choose from via cubiesColorScheme. You can override the color of each face with cubiesColorOverrides, and finally you can set the background color with cubiesColorBackground.
  • No Advertisements Or Distractions - Just you and the cube with a minimalist interface.

Download

The latest version of QWERTYcube can be downloaded here, but keep in mind that you can play with QWERTYcube without installing it by clicking here.

Development

If you'd like to browse the code, submit bug reports or pull requests please do so at QWERTYcube's GitHub page here.

Mouse Support

The mouse support should be mostly intuitive, but the following info should be helpful.

If the background is clicked the entire cube is moved.

  • Left mouse drag - rotate the cube
  • Right mouse drag - move the cube
  • Scroll wheel - zoom / pan. This seems buggy.

If the cube is clicked dragged, and released then the program determines the move in the following way

  1. The locations on the surface of the cube of where the drag started and ended is found. This determines the force vector that goes from the start location toward the end location.
  2. When applying the force vector found in 1 to the cube the axis which has the greatest absolute torque is considered to be the axis about which the rotation happens.
  3. Once the axis in 2 has been determined there is the question of which of the three layers perpendicular to that axis to rotate. The layers touched by the start location and end location, as well as any layers in between, are rotated.

So, it's possible to move one layer, two layers or rotate the entire cube. I hope way of using the mouse is helpful, but the primary input for QWERTYcube is still the keyboard, at least for me.

TODO

There are various ways the program could be improved. A few ideas.

  • Different Order Cubes - What about 2x2x2, 4x4x4, etc.? Much of the code could be easily generalized so that any order would be supported, but it's still not trivial.

License

QWERTYcube is mostly covered by the MIT license. It's a permissive open source license.

The JSSS scrambler is covered by GPLv3. If you want a non-GPL code then remove JSSS, references to it, and change the scrambleType to "simple".

Screenshots

Here are some screenshots to illustrate the various ways that QWERTYcube can be configured. Each screenshot is preceded by the variable settings that produced it. To see a cube like the one shown press "I" to bring up the information dialog and then press Ok or Ctrl-Enter.

Help Dialog:

The help dialog shows what the keys do. Note that they can be remapped by settings the keyMap variable. Press H to toggle the help dialog.

dispHelp=true

Scrambled:

This just shows what a typical scrambled cube looks like with no configuration changes. The same scramble is used for all screenshots.

scrambleMoves=U' R2 D' B2 L2 B2 R2 D U B2 D' R' U' L B' L R B2 R' F2 D'

Information Dialog:

This is the information dialog. It shows the value of each variable along with an description of how it's set. If the end of the description contains "persist" the settings will be saved in HTML5 local storage for the next time the page is loaded. If the end of the description contains "new-cube" then a new cube (Alt-Shift-N) must be created to see the change. If the cancel button is clicked no changes are made. If the ok button is clicked the changes are applied and some are saved to local storage. At any time I followed by Control-Enter (ok button) can be pressed to save the current settings to local storage.

Camera Perspective:

It's possible to change your perspective by dragging outside of the cube. Here's a perspective view that may look more standard to some. Note that you don't need to edit the cameraLocation variable manually. You can drag the cube to however you like it, click I followed by Control-Enter (or ok) and the camera perspective will persist until the next time the cube is loaded.

cameraLocation=330 330 670

High Contrast:

There are four color schemes to choose from "hc-black", "hc-white", "std-black" and "std-white". "hc" stands for high contrast and "std" standard. The "black" and "white" refers to the interior color (the gaps between the cubies). Here's "hc-white", which may be better than the standard color schemes on some monitors:

cubiesColorScheme=hc-white

Grey Scale:

Here's an example of overriding the colors in order to produce a grey scale cube. It's probably impractical, other than for possibly color blind people, but I thought it looked interersting

cubiesColorBackground=0x80FF80
cubiesColorOverrides=I:0xFF8080 D:0xFFFFFF U:0xCCCCCC L:0x999999 B:0x666666 F:0x333333 R:0x000000

Wide Gaps:

In this case the gaps have been expanded so that they are the same size as the cubies. Also, the interior color (color of the gaps) has been made the same as the background color, which gives it an interesting disconnected look.

cubiesColorOverrides=I:0x808080
cubiesGap=64
cubiesSize=64

Orientation Labels:

It's possible to display labels that indicate the sides that follow the cube as it's rotated. Press "O" to toggle them.

dispOrientationLabels=true