Rubik 39;s Cube 5x5 Simulator

0 views

Skip to first unread message

Amice Golden

unread,

Aug 3, 2024, 10:53:14 AM8/3/24

to sleepeselad

Welcome to the Rubik's Cube Dojo Simulator! This simulator allows you to solve, scramble, and explore the world of the Rubik's Cube right from your computer. Whether you're a beginner looking to learn how to solve the cube or an experienced cuber aiming to improve your skills, this simulator has got you covered.

Note: Native anti-aliasing was not used in the original AnimCube Java applet because it was not generally supported by the web browsers back then. Nowadays, modern web browsers are using native anti-aliasing in order to draw smoother facelet edges.

Developers can download the GitHub repository containing both minified and unminified JS files (minification was done using this tool, terser v5.27.1 to be specific) as well as the source code and documentation for both AnimCubeJS versions.

Controls of the simulator are quite intuitive. You can rotate the whole cube as well as twist separate layers using mouse (finger in the case of a touch screen). To twist separated layer, pick one and use dragging in natural direction (with the left mouse button being pressed). To rotate the whole cube, use the right mouse button or drag from a near point outside the cube image (the latter option is also applicable to touch screens). The possibility to twist a layer can be disabled in a web page, then only the whole-cube rotation is allowed. You can control the animation by buttons in the button bar. Animation can be immediately set to any position using the progress bar (if present) just above the button bar (which can be reduced or totally hidden).

Animation can be applied more times, as well as interleaved with direct manipulation to allow a user to experiment if he/she wants to. Unless otherwise stated, the first button (Rewind) always clears the current cube rotation, twisted layers, mirroring and executed turns (if applicable) to the simulator's initial configuration. The middle button has two purposes: when the animation is playing, it will stop it; when the animation is stopped, it mirrors the cube view to allow a user to experiment with symmetrical cases. The cube can be rotated by mouse / finger even if the animation is started. If you press a button in the middle of an animated layer twist, the twist is finished immediately and the new requested action is started.

Cube's (div's) width and height are arbitrary and can be flexibly adjusted. For the best appearance the height should be equal to width + value of the button height + 6 (6 being the height of the progress bar) if the button bar is displayed, and width if the button bar is hidden or only the Rewind button is displayed. The button height is configurable, default value of it is 13 pixels.

The "best appearance" recommendation above maximizes the magnification of the cube for a given width which also minimizes the space around the cube inside the div (from which a rotation can be initiated).

With regard to customizing, increasing the width (from "best appearance" recommendation above) widens the button bar and also the amount of space around the cube inside the div, while maintaining the same magnification of the cube.

If the width is already wider than the "best appearance" recommendation above (as in width = height for example) then increasing the (div's) height will increase the magnification of the cube until height = width + button height + 6, at which point further increases in height no longer increase the magnification of the cube but instead add space above & below the cube inside the div.

You can also use percent units to set the div's width, which might keep a bigger area of control buttons resulting in more comfortable tapping on mobile devices. The cube (div) below has the following attribute: style="width:100%; height:150px". See a different approach for implementing fully responsive-layout cubes as outlined in theEnhancement section.

There are 46 customizable parameters. They are listed below in the order corresponding to their occurrence in the documentation. The best way to understand their meaning is to experiment with example simulators provided in the description of each parameter.

AnimCubeJS Configuration Tool is a nice and easy way for creating simulators with the desired functionality. By declaring parameters online (it actually works even offline) you can build a simulator and then share it using a URL link.

The config parameter takes the file name (with a .txt suffix) as a value. The file location has to be specified relative to the location of the HTML document that uses it. This restriction is set to unify the functionality on both internet and local locations. The file format is simple. It consists of lines, each specifying chosen value of a particular parameter. Each line starts with the parameter name followed by the equal sign "=" and the rest of line contains the parameter value. White-space characters can be used to surround the parameter name and value. All values specified in the configuration file can be overwritten by simulator parameters declared in the HTML document (web page). That is, simulator parameters declared in the web page are prioritized over the parameters specified in the configuration file.

These settings set some of the background colors and enable text displaying for all simulators with this config parameter. The following first two simulators have only six parameters declared (config, colorscheme, move, initrevmove, snap and buttonheight), and differ only in the move parameter values. The third simulator has the same parameters and values as the first one, except for missing the config parameter.

Note: The configuration file name used to have a .cfg suffix in the original AnimCube Java applet documentation.Here, the .txt suffix has been chosen as an alternative to demonstrate that there is no requirement that the configuration file extension must be .cfg. You should be able to see the contents of the "AnimCube3.txt" file linked above right in the web browser. In this particular case you would not be able to see the contents of the "AnimCube3.cfg" file right in the web browser. Both file types work the same in terms of simulator functionality.

Note: Due to browser implementations of the same-origin policy, the .txt configuration file will not work locally if the web page containing AnimCubeJS simulator is accessed via file://..., use on local web server (such as Apache or IIS) instead. However, there is a way to use a configuration file without getting it from the server.

All that is needed is to define a variable in a web page, and then use it in each call to AnimCubeX. Access the following two simulators via file://..., and compare them with the first two simulators above.

While the first pair of simulators is getting a configuration file ("AnimCube.txt") from the server, the second pair of simulators is getting the "config.js" file containing the "config" variable from the web client. Note that the file formats are different.

Make sure to include the source config.js file in the directory/folder referenced in the HTML head section of your web page. Next, add the following code in the HTML file to the place where you want the simulator to be displayed.

The bgcolor parameter determines the background color of the simulator. This parameter can be set to the background color of your web page in order to avoid visual color collisions. The value of the parameter consists of six hex digits and is case insensitive. The meaning of these digits is equal to the RGB color specification in HTML. If this parameter is missing, the color is set to middle gray (the default value is '808080'). The move counter is outlined to allow good visibility for any color. You can hide it using the counter parameter.

There is also a possibility to use transparent background which gives flexibility when setting color gradient or personalized image/video as a web page background. Details about transparency can be found in the Enhancement section.

Note: On the two cubes above you can notice different border colors for both the button bar and the progress bar, as well as different slider color in the progress bar. The reason for the former is discussed in the butbgcolor parameter section, the reason for the latter is discussed in the slidercolor parameter section.

Using the cubecolor parameter you can adjust the body color of the cube (the color of plastic on a real cube). It has the same value format as the bgcolor parameter. The default value is '000000' which is black. To avoid possible color collisions between the stickers and the body of the cube, set the facelets, colorscheme or colors parameter to appropriate value.

The butbgcolor parameter determines the background color of the control buttons in the button bar. It is very similar to the bgcolor parameter and has the same valueformat. If this parameter is missing, the color of the buttons is set to the value of the bgcolor parameter. The button symbols are outlined to allow good visibility for any color.

Note: The border color for both the button bar and the progress bar toggles between black and white, depending on the butbgcolor parameter. If the butbgcolor parameter is not set then it depends on the bgcolor parameter. If neither of these two is set then the border color is black (because the default value of the bgcolor parameter represents a lighter color).

The slidercolor parameter determines the color of the slider in the progress bar. The value of the parameter consists of six hex digits and is case insensitive. The meaning of these digits is equal to the RGB color specification in HTML. If this parameter is missing, the color of the slider is set to black or white, depending on the bgcolor parameter.

Using the troughcolor parameter you can adjust the background (trough) color of the progress bar. It has the same value format as the slidercolor parameter. The progress bar background color defaults to a darker shade of the bgcolor parameter.

With this parameter you can control an advance of a move sequence by clicking the progress bar.There are two possible parameter values: '0' and '1' (the default value is '1'). If set to '0' then clicking on trough of the progress bar will not advancethrough the move sequence - this is to avoid inadvertently messing up theplayback of a sequence while single-stepping through it.The difference can be seen on the following cubes. If you click on trough of the progressbar on the first cube, the move sequence will advance (and the second one will not).