VirtualCube JavaScript Applet

With the VirtualCube JavaScript Applet you can integrate interactive Rubik's Cube-like puzzles into your HTML page. The virtual cubes can be rotated and twisted.

Examples

Pocket Cube

Rubik's Cube

Revenge Cube

Professor Cube

Cube 6

Cube 7

Tests

Tests

Usage

The VirtualCube JavaScript Applet consists of JavaScript modules, 3D object files and 3D shaders which are provided in the lib directory.

virtualcube.mjs
This file contains the main program.
virtualcube.css
This is an optional stylesheet file which you can change to alter the appearance of the VirtualCube JavaScript Applet.

Make sure that you copy all files and sub-directories contained in the lib directory to your web server.
You can then include these files with the following code into your HTML page:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="module" src="lib/virtualcube.mjs"></script>
  <link href="style/virtualcube.css" rel="stylesheet" type="text/css">
</head>
<body>
  ...
</body>
</html>

Once you have include these files you can include a virtual Rubik's Cube anywhere in the body of your HTML page using the following code:


  <div class="virtualcube" 
       kind="RubiksCube" 
       stickersImage="img/RubiksCube_512.gif"></div>

This code has the following meaning:

class="virtualcube"
The VirtualCube JavaScript Applet is inserted into all div-Elements with the class "virtualcube". You can have more than one div-Element of this class in your HTML page.
kind="RubiksCube"
Specifies the desired cube model. You can specify RubiksCube or PocketCube.
stickersImage="img/RubiksCube_512.gif"
Specifies an image which is applied on the stickers of the cube.

For backward compatibility you can alternatively specify an applet tag.


  <applet code="RubikPlayerFlat" archive="RubikPlayerFlat.jar" codebase="../lib" width="170" height="170">
    <param name="kind" value="RubiksCube">
    <param name="stickersImage" value="img/RubiksCube_512.gif">
  </applet>

The code has the same meaning. Only the syntax is different. The code attribute is used to determine whether the applet tag should be replaced by the JavaScript applet. Currently the following values are supported for code:

Supported Attributes

The div-element may have the following attributes:
(If you are using the applet tag, then you can specify the attributes with param-elements)

rendercontext name Selects the rendering context to be used, "webgl" or "2d". Default: "webgl"
alpha int Vertical orientation of the cube, -90..+90. Default: "-25"
beta int Horizontal orientation of the cube, -90..+90. Default: "45"
colorlist [name=]int, ... RGB color list. Each entry consists of an optional name and a RGB value. Default:"r=#ffd200,u=#003373,f=#8c000f,l=#f8f8f8,d=#00732f,b=#ff4600"
facelist name, ... Maps colors from the color map to the faces of the cube; 6 integer values or color names; r, u, f, l, d, b. Default: "0,1,2,3,4,5"
kind name Specifies the desired cube model: RubiksCube or PocketCube. Default: "RubiksCube"
notation string Name of a notation in the resource file. If you don't specify this parameter, the default notation of the resource file is used.
resourceFile URL Address of a Cube Markup XML resource file. The file extension must be .xml.
script string Script. Default value: "".
initscript string This script is used to initialize the cube, and when the reset button is pressed. If you don't specify this parameter, no script is used.
partlist name, ... List of visible parts. Default: "urf,dfr,ubr,drb,ulb,dbl,ufl,dlf,ru,rf,rd,...,center"
scriptProgress int Position of the progress bar. Default value: end of script if scriptType is 'generator', 0 if script type is "solver".
scriptType string The type of the script: "solver" or "generator". Default: "generator".
stickersRightList (name|int), ... Maps colors from the color table to the stickers on the side of the cube; 9 names or indices. Default: "r r r, r r r, r r r"
stickersUpList (name|int), ... Maps colors from the color map to the stickers on the side of the cube; 9 names or indices. Default: "u u u, u u u, u u u"
stickersFrontList (name|int), ... Maps colors from the color map to the stickers on the side of the cube; 9 names or indices. Default: "f f f, f f f, f f f"
stickersLeftList (name|int), ... Maps colors from the color map to the stickers on the side of the cube; 9 names or indices. Default: "l l l, l l l, l l l"
stickersDownList (name|int), ... Maps colors from the color map to the stickers on the side of the cube; 9 names or indices. Default: "d d d, d d d, d d d"
stickersBackList (name|int), ... Maps colors from the color map to the stickers on the side of the cube; 9 names or indices. Default: "b b b, b b b, b b b"

Unsupported Attributes

The following attributes are not yet supported:

scriptmacros id=script, ... Defines macros for use in script and initscript. The identifier of the macro and the script assigned to the macro can be put into quotes. Since a script notation may make use of '=' and ',', you can quote the id and the script with a quote character of your choice, for example: ", ', ยด. Default value: "".
autoPlay boolean Set this to true, to start the player automatically. Default: "false"
cube string Name of a cube in the resource file. If you don't specify this parameter, the default cube of the resource file is used.
debug boolean Set this to 'true' to print debug informations on the console. Default: false.
displayLines int Number of lines of the Script display: set to 0 to switch the display off. Default: 1
locale language Locale, for example "en", "de", "fr".
resourceData xml Cube Markup XML resource data.
scaleFactor float Scale factor. Default: "1.0"
showPlayer boolean Set this to false, to hide the player. Default: true
showInfo boolean Set this to true, to display an info field on the right of the player. Default: false
showController boolean Set this to false, to hide the controller of the player. Default: true
showScrambleButton boolean Set this to false, to hide the scramble button. Default: true
showResetButton boolean Set this to false, to hide the reset button. Default: true.
showSettingsButton boolean Set this to false, to hide the settings button. Default: true
stickerList name, ... Maps colors from the color map to the stickers of the cube; (layerCount * layerCount * 6) integer values; right, up, front, left, down, back. Default: "0 0 0 0 0 0 0 0 0, 1 1 1 1 1 1 1 1 1, 2 2 2 2 2 2 2 2 2, 3 3 3 3 3 3 3 3 3 3, 4 4 4 4 4 4 4 4 4, 5 5 5 5 5 5 5 5 5"
stickerBevel int Beveling of stickers image on each sticker. Default: 2
twistDuration int Duration of a quarter-turn twist in milliseconds. Default: "400"
visibleParts name, ... List of visible parts. Default: "urf,dfr,ubr,drb,ulb,dbl,ufl,dlf,ru,rf,rd,...,center"

License Terms

MIT License