Core Concepts

Coordinates axis

The cube has three axes: X, Y, and Z. Each axis has a range of 0 to the cube size.

The following image shows the coordinates axis with the direction of each axis and his positive rotation direction.

Cube Layers

The Rubik’s Cube consists of several layers in each axis that can rotate independently. Each layer is identified by its orientation relative to the coordinate axes.

• X axis layers: Layers parallel to the X axis.

• Y axis layers: Layers parallel to the Y axis.

• Z axis layers: Layers parallel to the Z axis.

Cube Faces

The cube has six faces, Up, Down, Front, Back, Left, and Right. Each face is identified by its orientation relative to the coordinate axes.

Each face is represented by a number from 0 to 5. You can easily identify the face usin the Face enum.

Cube State

The state of the cube is represented by the colors of the stickers on each face. There are 6 types of stickers, one for each face.

Each rotation, both cube and layer, changes the state of the cube.

The following image shows how the cube is unfolded to display the state of each face.

The state of the cube is implemented as an object where each key is the face number and the value is a 2D array of colors. See FlatState for more information.

Each 2D array follow the following structure:

Example

A cube with a size of 2 with the following state:

import { Face } from "@web-cube/web-cube";

$cube.setState({
  [Face.Front]: [
    [Face.Front, Face.Front],
    [Face.Front, Face.Back],
  ],
  [Face.Back]: [
    [Face.Back, Face.Back],
    [Face.Back, Face.Left],
  ],
  [Face.Left]: [
    [Face.Left, Face.Left],
    [Face.Left, Face.Right],
  ],
  [Face.Right]: [
    [Face.Right, Face.Right],
    [Face.Right, Face.Up],
  ],
  [Face.Up]: [
    [Face.Up, Face.Up],
    [Face.Up, Face.Down],
  ],
  [Face.Down]: [
    [Face.Down, Face.Down],
    [Face.Down, Face.Front],
  ],
});