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

# Shared Interactive Element Framework

[GitHub](https://github.com/HectorTablero/QED-Scripts/tree/main/Shared) (Open Source, MIT License)

**Date:** July 2026
**Technologies:** JavaScript

---

## Overview

Every interactive element in the QED magazine site is `eval`'d as a standalone script with no teardown hook, no bundler, and no shared runtime beyond a few global theme variables. Rather than duplicating boilerplate in each of the ~60 elements, five modules are prepended to any article blob that needs them (`// @requires _shared/<file>.js`), giving every element the same lifecycle handling, plotting primitives, and — for a handful of related articles — the same underlying geometry engine.

## base.js — `IEBase`, `Plot2D`, `Controls`

### Description

The foundation almost every element builds on. `IEBase` is the class most elements extend directly; `Plot2D` and `Controls` are composed into it by elements that need a coordinate plane or a control panel.

### `IEBase`

Handles everything that would otherwise be copy-pasted per element:

- Theme-aware colour palette (`col` getter) that resolves light/dark CSS variables into RGB triples, plus `mix`/`rgba` helpers for gradients and faded gridlines
- `init(container)` — call first in `start()`; wires up guarded `resize`, `on-theme-change` and `fullscreenchange` listeners that self-remove once the container leaves the DOM (there is no `destroy()` hook, so cleanup can't rely on one)
- `invalidate()` — coalesces repeated draw requests into a single `requestAnimationFrame`, since `main()` is re-scheduled via `setTimeout(..., 10)` and not awaited
- Canvas helpers (`createCanvas`, `fitCanvas`, `availableBox`) that size a canvas's backing store from its measured CSS box, accounting for devicePixelRatio
- `panes(n, opts)` / `sideBySide(opts)` — adaptive layout helpers so multi-pane elements stack vertically on narrow viewports and sit side-by-side on wide ones
- `t(key)` i18n lookup and `IEBase.num(v, digits)` locale-aware number formatting (Spanish decimal comma vs. English point)

### `Plot2D`

A minimal 2D charting primitive built on a `<canvas>` 2D context:

- World↔screen coordinate transforms (`sx`/`sy`/`wx`/`wy`) driven by `setWindow(xmin, xmax, ymin, ymax)`, with `lockAspect()` to force equal units on both axes
- `axes(opts)` — draws gridlines, zero axes, and "nice" tick labels using a tick-step algorithm (`tickStep`) that rounds to 1/2/5×10ⁿ
- Drawing primitives: `curve(fn, opts)` for function plots, `polyline`/`dots` for point sets, `vline`/`hline`/`bandX` for reference lines and shaded regions, `fillUnder` for area-under-curve fills
- `pointerWorld(evt, canvas)` converts a mouse/touch event straight into world coordinates for draggable-point interactions

### `Controls`

A themed control-panel builder, avoiding per-element CSS:

- `slider`, `button`, `segmented` (mutually exclusive button group), `toggle`, and `readout` (read-only display), each laid out in its own row via `_row`
- Inline styling rather than utility classes throughout, so panels remain correctly themed even where Tailwind's dark-mode classes don't reach (fullscreen overlays, `eval`'d content)
- `refreshTheme()` re-styles every live control in place when the site's light/dark toggle fires, without rebuilding the DOM

## grid.js — `DomGrid`, `DomTable`

### Description

DOM-based (rather than canvas-based) grid and table primitives for cell-oriented elements — parity grids, magic squares, crosswords, truth tables — where native text selection, focus rings, and hit-testing matter more than raw draw performance.

### Implementation

- **`DomGrid`** — a fixed-pitch grid of square cells that rescales to fit its flex-box container between `minCell` and `maxCell`, with a single `onCell(r, c, event)` callback firing for every cell (header cells included; the caller decides which coordinates are interactive)
- **`DomTable`** — a variable-width table with a header row and horizontal scrolling, for grids whose columns aren't naturally square

Both are used as an alternative to `Plot2D` when an element's content is better expressed as real form inputs than as painted pixels.

## linalg2x2.js — `Mat2`

### Description

Closed-form 2×2 linear algebra shared by the `PolarDecomposition` and `SvdGeometry` interactive elements. For 2×2 matrices, the SVD, polar decomposition, and operator-class tests (rotation, reflection, shear, scaling) all have exact, cheap closed forms — which is what makes the geometric pictures both articles build drawable in real time as the reader edits matrix entries.

### Implementation

`Mat2` provides matrix application, multiplication, transpose, determinant, rotation-matrix construction, and `symEig` — a closed-form eigendecomposition of a symmetric 2×2 matrix (returning eigenvalues in descending order with their eigenvectors), which the SVD and polar decomposition routines are both built from.

## skeleton.js — straight skeleton

### Description

A general straight-skeleton (wavefront) solver powering the `Fold and Cut` article's elements, where readers drag polygon vertices freely and the skeleton is recomputed from scratch on every change rather than read from a table of precomputed figures.

### Implementation

Every wavefront vertex sits at the intersection of the offset lines of its two incident edges, so its position is affine in the offset parameter `t`: `v(t) = p0 + dir·(t - t0)`. Each candidate event's time is therefore the root of a linear equation, and — since the polygons involved are small (tens of vertices) — the candidate list is simply rebuilt after every event rather than maintained in an incremental priority queue. That trades a little performance for avoiding the bookkeeping bugs that make correct incremental implementations of this algorithm hard to get right.

The solver models three event types directly from the geometric rules the article states:

1. **Edge event** — two vertices meet and continue together
2. **Loop collapse** — a region's area reaches zero
3. **Split event** — a region splits into several

## tiling.js — edge-pairing tessellation engine

### Description

A tessellation engine shared by `TileWorkshop` and `EscherTessellation`, built around edge pairings rather than named wallpaper groups.

### Implementation

A tile is a closed polygon whose edges come in matched pairs, each pair carrying the isometry (`Aff`, an affine map) that carries one edge onto its partner. When the reader deforms a free edge, the deformation is pushed through that isometry onto its paired edge — directly implementing the rule both articles describe ("whatever you take out of one side has to appear on its partner") — which guarantees the deformed tile still tiles the plane.

The plane is filled by breadth-first search over the group generated by the tile's isometries, deduplicating on the transform itself. This makes the engine fully general: it needs no knowledge of which wallpaper group a given edge pairing happens to generate, so every pairing — from a simple square tiling to an Escher-style interlocking pattern — runs through the same code path.