Loading...
 

2X
We have upgraded this widget and it's now awailable in 3D.
We will keep this legacy version online but we advise you to use the canvas Rubik's Cube widget.

Algorithm







Pick a color and paste it on a field

Background color

Init moves

Init reverse moves

Update parameters
Generated link
Embed code

Rubik's Cube algorithm widget

This is the easiest way to save and display a Rubik's Cube scramble and algorithm on an interactive and customizable interface. Generate a widget and access it anytime on a custom URL or embed it on a website.

Set up an algorithm using the classic notation of the Rubik's Cube. You can find the list of the available moves below the input textbox. Click on these to add them to the end of the input field. Please mark the counterclockwise rotations with ' character (usually next to the Enter on your keyboard) or simply lowercase characters. For a double turn write 2 after the rotation.

Set the initial state of the cube

There are many ways to set up the starting position of the twisty puzzle:

  • Color scheme: If the 'Use color scheme' checkbox is active you can set the starting color of each face picking a color from the palette and pasting it on the unfolded cube in the admin section.
  • Field colors: Similar to the color scheme you can set the color of every individual field on the Rubik's Cube. Only one of these two options above can be active at a time, you can't use both the color scheme and the field settings together.
  • Init moves: Set the initial scramble with rotations. The moves given in the allocated textbox will be applied on the cube set in the first two options. If the Color scheme and Field colors are not used then the algorithm is going to be applied on the default Western Rubik's Cube color scheme.
  • Init reverse moves: The program will apply the inverse rotations in reverse order. So if you set the initial reverse algorithm and you apply the same algorithm on the puzzle the result will be the solved cube.

The settings

saved Rubik's Cube scramble algorithmCustomize the operation and the look of the widget.

  • Autoplay: The program starts to play the saved algorithm when the webpage is loaded.
  • Loop playback: The playback jumps back to the beginning of the algorithm when it reaches the end.
  • Show 6 faces: There are two view options available. When this option is checked the program unfolds the cube so you can see the hidden faces too.
  • Display arrows: The playback shows the rotation arrows when this option is active.
  • Display algorithm: Hide or display the algorithm below the puzzle.
  • Display buttons: You can hide the control bar which allows you to replay and stop the algorithm. This will hide the speed control too.
  • Playback speed: There's a gear shift next to the control bar which looks like a volume control. You can speed up or slow down the playback animation.
  • Background color: A color picker is allocated to set the webpage background color. It's recommended to set this to fit the look and feel of the destination website where you want to embed the widget in an iframe.

How to use

Hit the Update parameters button when the starting position and all the settings are ready and the program will generate a custom url where you can always access the widget you have created. When you hit the button the cube on the top of the page refreshes applying all the changes you made.

You can use this link to embed your Rubik's Cube algorithm on a webpage as an interactive widget placing the generated iframe code in a webpage's HTML section. Adjust the height if necessary.