The math under the cells.
VHX places glyphs on a cell grid and moves them along the easing curves in §04. This page documents the math behind that: seven primitives (§01–§07) and one function table (§08), from one source file.
Cell geometry. The grid is a coordinate system.
cellW · cellH · snapColsAll glyphs in a monospace face have the same advance width.
The layout unit is the cell. Width is derived
empirically from the chosen face; for Geist Mono on Chrome it lands
at 0.602 × fontSize, which means a 14px body line is
8.43px wide per glyph and 21px tall.
Drag the slider to watch the viewport snap to whole cells. The readout shows the column count and the leftover pixels, and the exact cell width. Leave slack unstyled; it is the leftover from rounding to whole cells.
const ADVANCE_RATIO = 0.602; // measured · Geist Mono · Chrome 120 cellW(fs) = fs × 0.602 cellH(fs) = fs × 1.5 // line-height cols(V,fs) = ⌊V / cellW(fs)⌋ slack(V,fs) = V − cols × cellW(fs)
Reflow probability. Where a row breaks.
reflowCritical · reflowBreakProbGiven N text spans of widths w₁..wₙ packed into a row
with gap g, the row breaks at the critical viewport
V* = Σwᵢ + (N-1)g. Below V*, breakage is
certain; above it, fit is certain. Between, the curve is logistic
with width equal to one cell.
A logistic curve one cell wide is used as the fit. Drag the viewport to see the probability cross 0.5 exactly at V*. The orange line is the probability; the dotted line is the critical threshold.
V* = Σwᵢ + (N−1) · g // critical viewport p_break(V) = 1 / (1 + exp((V − V*) / cell)) p(V*) = 0.5 // exact p(V* − cell) ≈ 0.731 p(V* + cell) ≈ 0.269
Contrast. WCAG relative luminance.
relLuminance · contrastRatioPer WCAG 2.1 §1.4.3: gamma-decode each sRGB channel, apply
0.2126·R + 0.7152·G + 0.0722·B, then take the ratio
(L₁ + 0.05) / (L₂ + 0.05). AA passes
at ≥4.5; AAA at ≥7. Below the threshold the cell is dimmed.
Easing curves on [0,1].
Easing · 9 functionsAll take t ∈ [0,1] and return [0,1]. smoothstep is
Hermite-3, the cheapest curve with zero-derivative endpoints.
smootherstep is Perlin's quintic, used when second-derivative
continuity matters. The spring is critically damped, so it never overshoots;
τ sets its response time.
Three-octave noise. The water engine.
noise3(x, t)The "water" effect in VHX is three sine waves summed at golden-ratio frequencies. There is no Perlin noise and no random number generator. The result is bounded in [-1,1] and smooth in both x and t, and it is reproducible to machine precision for any (x,t).
φ is used because it is the irrational that takes longest to show a repeat, so the sum does not visibly repeat within a session.
φ = (1 + √5) / 2 ≈ 1.618033988…
n(x,t) = sin(x + t)
+ sin(xφ + tφ·0.7) · 0.5
+ sin(xφ² + tφ²·0.4) · 0.25
return n / 1.75 // bound to [−1, 1]
Glyph ramps. Continuous → discrete.
quantize · 4 rampsRendering a value v ∈ [0,1] as a glyph means picking a ramp and quantizing:
quantize(v, ramp) = ramp[⌊v · ramp.length⌋]. Drag the
slider to see each ramp resolve. Ramps are ordered light → dark,
sparse → dense.
4D rotation. The tesseract math.
rotXW · rotYW · project4to2A tesseract has 16 vertices at {±1}⁴. To draw it on a
2D canvas: rotate in the XW and YW planes (this is what gives 4D its
characteristic "inside-out" pulse), project to 3D by dividing by
(d₄ − w), then to 2D by dividing through Z.
There are always two cubes: the inner and outer cube swap as w rotates through ±1, moving the 8 connecting edges along a continuous torus path. The derivation and a live sketch are on the right. Try it live in the Tesseract Lab.
verts = {±1}⁴ // 16 vertices
edges = 32 // pairs differing in 1 coord
p ← rotXW(p, αt)
p ← rotYW(p, βt)
p3 = (p.xyz) / (d₄ − p.w)
p2 = (p3.xy) / (d₃ − p3.z)
Function table.
26 functions| group | function | signature | cost |
|---|