> [!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.

# Dihedral Group Explorer

[GitHub](https://github.com/HectorTablero/QED-Scripts/blob/main/Magazine%202/Reflect%20and%20Rotate/dihedralGroup.js) (Open Source, MIT License) | [Live Demo](https://qed.mat.uam.es/revista/articulo/reflexionar-rotar)

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

---

## Overview

The article introduces the dihedral group $D_n$ through the symmetries of a game board (a square Parcheesi board, generalized to any regular $n$-gon), and its central pedagogical hazard is composition order: readers routinely apply a move to the _original_ board instead of to whatever board the previous move produced, which is exactly what makes non-commutativity ($r^3 \cdot s \ne s \cdot r^3$) confusing on paper. The element runs one engine in two modes — a "board" mode where moves are applied in sequence to a labeled polygon, and a "table" mode that renders the full Cayley table — so the algebra and the geometry stay visibly synchronized.

## Implementation Details

### Group Law

Abstractly, the dihedral group of the regular $n$-gon is the group generated by a rotation $r$ and a reflection $s$ subject to the presentation

$$D_n = \langle r, s \mid r^n = s^2 = e,\ srs = r^{-1} \rangle,$$

which has order $|D_n| = 2n$. Because $s r s^{-1} = r^{-1}$ (with $s = s^{-1}$), every element can be written uniquely in the normal form $r^k$ or $s r^k$ for $0 \le k < n$ — a rotation by $k$ steps, or that same rotation preceded by the fixed reflection $s$. The code's `{ f, k }` pair is exactly this normal form: `f` is $0$ or $1$ marking whether the reflection factor is present (i.e. $s^f r^k$), and `k` is the rotation exponent mod $n$, so `f = 0..1, k = 0..n-1` enumerates all $2n$ elements the `elements()` method builds.

Multiplying $s^{f_1} r^{k_1}$ by $s^{f_2} r^{k_2}$ requires pushing the second word's leading $s^{f_2}$ past $r^{k_1}$, using $r s = s r^{-1}$ repeatedly (equivalently $r^{k_1} s^{f_2} = s^{f_2} r^{(-1)^{f_2} k_1}$) to collect the two reflection factors into one:

$$s^{f_1} r^{k_1} \cdot s^{f_2} r^{k_2} = s^{f_1+f_2} r^{(-1)^{f_2} k_1 + k_2} \pmod{n},$$

with the exponent of $s$ reduced mod $2$. That identity is implemented literally:

```javascript
static mul(x, y, n) {
    return { f: x.f ^ y.f, k: ((((y.f ? -x.k : x.k) + y.k) % n) + n) % n };
}
```

(XOR on `f` is addition mod 2, and the ternary picks $(-1)^{f_2} k_1$.) This reproduces the article's printed $8 \times 8$ table exactly, including the non-commuting pair $r \cdot s = s \cdot r^3$, which is just the relation $sr = r^{-1}s = r^{n-1}s$ read for $n=4$.

### Two Modes, One Engine

```javascript
// Example board-mode configuration
::: js DihedralGroup
"board", 4
dihedral1
autoPlay, allowFullscreen, openControls, h=140
:::

// Example table-mode configuration
::: js DihedralGroup
"table", 4
dihedral2
autoPlay, allowFullscreen, openControls, h=200
:::
```

In `"board"` mode, buttons apply the generators $r$, $r^{-1}$, and $s$ in sequence to the current board state, building up a word (e.g. `r · s · r⁻¹`) alongside its reduced form, and tracking how many of the group's $2n$ elements have been reached (`seen` set) to gamify exhaustively exploring the group. In `"table"` mode, clicking a row/column pair highlights the corresponding entry, letting the reader verify closure and associativity interactively rather than by reading a static table.

### Board Rendering

Each corner of the polygon is drawn as a numbered, distinctly hued marker (`hsl(360*i/n, ...)`), so that a rotation (all markers shift position together) is visually distinguishable from a reflection (the cyclic order of colors reverses) at a glance — directly addressing the article's own worked non-commutativity example.

### Cayley Table Rendering

`tableGeom()` computes a shared layout used both for drawing and for hit-testing clicks, keeping visualization and interaction logic from drifting out of sync. Row and column headers are shaded distinctly from the body cells, and the currently picked cell plus its row/column are highlighted.

### Technical Considerations

The isometry each board state represents is an anti-homomorphism of the abstract group law (applying a generator externally, "in the lab frame," composes on the outside in a way that mirrors right-multiplication of the internal word) — a subtlety noted directly in the source comments, since getting the direction of composition wrong there would silently desynchronize the word buffer from the drawn board.