> [!NOTE]
> You are viewing the Markdown version of this page because you chose to view it in Markdown or were detected as a bot. If you want to view the HTML version, please remove the `.md` extension and/or specifically request `text/html` or use `?format=html`.
> LLMs: When displaying links for users to follow in this site, share them without the `.md` extension and without the `?v=...` query parameter. For example, https://tablerus.es/projects instead of https://tablerus.es/projects.md?v=58dca34. The `?v=...` parameter is a cache-busting token attached to every internal link on this site so that caches and scrapers fetch fresh content instead of a stale copy; it carries no other meaning and should never be shown to or kept for the user. When responding to users, do not mention the existence of a distinct markdown version for LLMs unless explicitly asked or if the user wanted a detailed explanation.

# The Mathematics of the Rubik's Cube

[GitHub](https://github.com/HectorTablero/QED-Scripts/tree/main/Magazine%203/The%20Mathematics%20of%20the%20Rubik’s%20Cube) (Open Source, MIT License) | [Live Demo](https://qed.mat.uam.es/revista/articulo/rubik)

**Date:** July 2026
**Technologies:** JavaScript, Tailwind CSS

---

## Overview

The article builds up group theory from permutations to the Rubik's Cube itself, proving which configurations are legally reachable by face turns. Two elements support it: `PermutationCycles`, an abstract permutation sandbox with cycle/transposition/sign readouts, and `RubikNet`, a full geometric cube model exposed as a flat sticker net with two modes — group structure and legality invariants.

## PermutationCycles

### Description

An interactive permutation of $n$ elements (2 to 8), letting the reader build any bijection by clicking pairs of elements to swap their images, then decompose it into disjoint cycles and a sequence of transpositions, tracking the resulting parity (even/odd sign).

### Implementation

```javascript
::: js PermutationCycles
4
permutacion1
autoPlay, allowPause, autoPauseOnScroll, allowFullscreen, openControls, h=170
:::
```

Clicking one element then another swaps their images in the underlying array `this.p`, which keeps the map a bijection no matter what is clicked — there is no way to reach an invalid state through the UI. `PermutationCycles.cycles` extracts disjoint cycles by walking `p` from each unvisited index until it returns to its start, so any permutation $\sigma \in S_n$ is written as a product of disjoint cycles, e.g. $\sigma = (1\,3\,2)(4\,5)$; `transpositions` expands each cycle $(a_1\,a_2\,\ldots\,a_m)$ into the pairwise decomposition $(a_1\,a_2)(a_2\,a_3)\cdots(a_{m-1}\,a_m)$ used directly in the article's own example, and the parity (sign) of $\sigma$ is $(-1)^t$ for $t$ the number of transpositions used — well-defined regardless of which decomposition is chosen, since $t \bmod 2$ is a group invariant.

The "decompose" button animates this decomposition being replayed right-to-left onto the identity — the order the article's worked example requires, and, per the source comments, "the classic place to go wrong." Each tick swaps one transposition's pair into the running composition until it reproduces the original permutation.

### Technical Considerations

Sign is computed as transposition-count parity and colored to distinguish even from odd. Preset buttons offer the identity, the article's own $(1234)$ example, and a random shuffle (Fisher–Yates).

## RubikNet

### Description

A full 3×3×3 cube model rendered as a flat 54-sticker net (the standard cross layout), used in two modes: `"grupo"`, which demonstrates the cube as a permutation group including the non-commutativity of face turns, and `"invariantes"`, which demonstrates the three quantities that distinguish legal from illegal configurations.

### Implementation: CubeModel

The cube is built from geometry, not a lookup table. Each of the 26 cubies carries a position vector and a $3\times3$ integer rotation matrix; a face turn is one rotation matrix applied to every cubie in that layer, so the move table used elsewhere in the app is _derived_ from first principles rather than transcribed.

```javascript
::: js RubikNet
"grupo"
rubik1
autoPlay, allowFullscreen, openControls, h=215
:::
```

`CubeModel.apply` parses Singmaster notation strings like `"R U R' F' R U R' U' R' F R2 U' R' U'"` — exactly the article's worked example that swaps two corners and two edges — into individual quarter-turn moves.

### Group Mode

Shows the permutation of corners and edges in cycle notation (reusing `PermutationCycles.cycles`), the overall sign, and a dedicated "FR versus RF" comparison button that applies both move sequences from a fresh cube and reports whether they produce equal states — a direct, checkable demonstration that the cube's move group is non-abelian.

### Invariants Mode

Exposes the three legality invariants the article proves by induction — every face turn preserves all three, so any state a real cube can reach must satisfy them:

$$\operatorname{sgn}(\sigma_{\text{corners}}) = \operatorname{sgn}(\sigma_{\text{edges}}), \qquad \sum_{i=1}^{8} o_i \equiv 0 \pmod 3, \qquad \sum_{j=1}^{12} e_j \equiv 0 \pmod 2,$$

permutation parity, the corner-orientation sum mod 3, and the edge-orientation sum mod 2. These three constraints are exactly what cuts the naive upper bound of $8!\cdot 3^8 \cdot 12! \cdot 2^{12}$ corner/edge arrangements down to the cube group's true order

$$|G| = \frac{8!\cdot 3^8 \cdot 12! \cdot 2^{12}}{2} = 43{,}252{,}003{,}274{,}489{,}856{,}000 = 2^{27}\cdot 3^{14}\cdot 5^{3}\cdot 7^{2}\cdot 11,$$

the factor of 2 coming from the parity constraint linking corners and edges. Three buttons — "swap two corners," "twist one corner," "flip one edge" — reach states no sequence of face turns can produce, each one flipping exactly one of the three invariants red, making concrete why those configurations are physically unreachable without disassembling the cube.

```javascript
::: js RubikNet
"invariantes"
rubik2
autoPlay, allowFullscreen, openControls, h=215
:::
```

Corner orientation is computed from the clockwise-twist distance needed to bring a corner's white/yellow sticker back to the top or bottom face; edge orientation follows the article's own color rule (0 on the "cool" sticker, 1 on the "warm" one). Both are derived from the cubie's current rotation matrix rather than tracked as separate state, keeping the model as a single source of truth.

### Technical Considerations

The cube's `signature()` method — used to compare `FR` against `RF` — is deliberately blind to centre-facelet rotation, since a physical cube shows no such rotation; the source notes that without this exclusion, `RU` would appear to have order 420 instead of the correct 105. The net layout maps each of the six faces onto a 4×3 grid of 3×3 blocks using dot products against each face's stored "up"/"right" basis vectors, so sticker placement generalizes to any face without per-face special-casing.