UUON-UGK-GPI-002
A self-contained mathematical visualization engine for exploring parametric geometry, physical trajectories, topology, harmonic structure, and time-dependent traversal.
GPI is a single HTML file that runs directly in a modern browser. No installation, server, build system, package manager, or application framework is required.
The engine turns mathematical equations into interactive geometric objects.
You control the parameters.
The geometry responds immediately.
The animation does not create the geometry. It traverses it.
GPI is a browser-based mathematical exploration environment built around a simple computational contract:
PARAMETERS
│
▼
EQUATION
│
▼
DOMAIN
│
▼
GEOMETRY
│
▼
PATH
│
▼
t = traversal parameter
│
▼
MOVING HEAD
│
▼
VISUAL OUTPUT
Each shape is defined by mathematics first.
The renderer evaluates that mathematics and displays the resulting geometry.
The moving point is an observer of the geometry. It is not the source of the geometry.
This distinction is fundamental to GPI.
Imagine a planet moving around the Sun.
The planet traces an ellipse.
A common description says the planet moves and therefore creates the orbit.
GPI takes a different computational perspective:
ORBIT EXISTS WHOLE
┌───────────────────┐
│ │
│ COMPLETE PATH │
│ │
└──────────┬────────┘
│
│ t
▼
PLANET
●──────►
The path is defined by the mathematical system.
The parameter t determines where the observer is on that path.
Changing the speed changes how quickly the path is traversed — not the path itself.
SAME GEOMETRY
┌──────────────────────┐
│ │
│ PATH │
│ │
└──────────────────────┘
t = slow ──────────────────►
t = fast ════════════════════►
Same path. Different traversal rate.
This is why GPI can display the same orbit over two seconds or two minutes.
The geometry is unchanged. Only the traversal rate changes.
GPI treats documentation as part of the computational model.
The repository uses text-based diagrams because monospace text provides a persistent spatial representation that remains readable inside source files, terminals, GitHub, code review systems, and other programming tools.
Every mathematical engine can be understood through five primary layers:
┌─────────────────────────────┐
│ PARAMETERS │
│ What numbers define it? │
└──────────────┬──────────────┘
│
▼
┌─────────────────────────────┐
│ EQUATION │
│ What mathematical rule? │
└──────────────┬──────────────┘
│
▼
┌─────────────────────────────┐
│ DOMAIN │
│ Where is it defined? │
└──────────────┬──────────────┘
│
▼
┌─────────────────────────────┐
│ GEOMETRY │
│ What object does it form? │
└──────────────┬──────────────┘
│
▼
┌─────────────────────────────┐
│ TRAVERSAL t │
│ How is it read over time? │
└──────────────┬──────────────┘
│
▼
┌─────────────────────────────┐
│ VISUAL OUTPUT │
│ What does the observer │
│ see? │
└─────────────────────────────┘
This creates a consistent documentation grammar across all ten systems.
GPI contains ten mathematical systems organized into two groups.
- Lissajous
- Rose Curve
- Spiral
- Superellipse
- Hypotrochoid
- Fourier Series
- Cornu Spiral
- Torus Knot
- Villarceau Circles / Hopf Fibration
- Keplerian Orbital Mechanics
The systems span:
HARMONIC MOTION ────────── Lissajous
└────────── Fourier
POLAR GEOMETRY ─────────── Rose
└─────────── Spiral
BOUNDARY GEOMETRY ───────── Superellipse
MECHANICAL MOTION ───────── Hypotrochoid
DIFFRACTION / CURVATURE ─── Cornu Spiral
TOPOLOGY ────────────────── Torus Knot
└────────────────── Villarceau / Hopf
CELESTIAL MECHANICS ──────── Keplerian Orbit
Together the systems demonstrate how compact mathematical definitions generate complex visual structures.
Two harmonic oscillations are combined:
x(t) = A sin(a t + δ)
y(t) = B sin(b t)
The frequency ratio determines whether the trajectory closes.
Example — a:b = 3:2:
┌───────────────────┐
│ ╭───╮ ╭───╮ │
│ ╭─╯ ╰─┬─╯ ╰─╮│
│──╯ ╰──│
│ ╰─╮ ╭─┴─╮ ╭─╯│
│ ╰───╯ ╰───╯ │
└───────────────────┘
When the frequency ratio is rational, the path eventually closes. When irrational, the trajectory never repeats and can densely cover the bounding region.
A X amplitude
B Y amplitude
a X frequency
b Y frequency
δ phase offset
Oscilloscope displays · Radio signal comparison · Harmonic analysis Vibration analysis · Structural engineering
Tie a pen to a swing and push it in two directions at once. The resulting drawing is a Lissajous figure.
r = A cos((n / d) θ)
in polar coordinates. The ratio n/d controls harmonic structure and petal count.
n=3,d=1
│
╭───┼───╮
╱ │ ╲
╱ ╭──┼──╮ ╲
│ ╱ │ ╲ │
│ │ ● │ │
│ ╲ │ ╱ │
╲ ╰──┼──╯ ╱
╲ │ ╱
╰───┼───╯
│
Changing one parameter can change the entire topology of the visible pattern.
A amplitude
n numerator
d denominator
θ angular parameter
Antenna radiation patterns · Harmonic modes Circular vibration modes · Botanical pattern comparison
r = a θ^k
The exponent k determines how radial distance grows relative to angular travel.
k = 1 Archimedean (vinyl grooves, coils)
k = 0.5 Fermat (sunflower seeds)
k = 2 Parabolic
k = -1 Hyperbolic (never reaches zero)
θ increases
│
▼
┌─────────────┐
│ ANGULAR │
│ MOTION │
└──────┬──────┘
│
▼
┌─────────────┐
│ RADIAL │
│ GROWTH │
└──────┬──────┘
│
▼
SPIRAL
A spiral represents simultaneous angular motion and radial growth. The exponent determines their relationship.
Galaxy arms · Nautilus growth · Phyllotaxis Sunflower seed arrangement · Coils and grooves
|x / a|^n + |y / b|^n = 1
The exponent n moves the boundary continuously between geometric forms:
n < 1 n = 2 n = 4 n → ∞
/\ ___ _______ ________
/ \ / \ / \ | |
/ \ → | | → | | → | |
\ / \ / \_______/ |________|
\/ ‾‾‾
STAR ELLIPSE ROUNDED RECTANGLE
The equation remains structurally identical while the boundary changes dramatically.
Industrial design · Architecture · Interface design (rounded rectangles) Piet Hein's Sergel's Torg plaza in Stockholm
A small circle rolls inside a larger circle. A point on the smaller circle traces the resulting path.
┌─────────────────────┐
│ OUTER CIRCLE │
│ │
│ ┌───────┐ │
│ │ INNER │ │
│ │ ●───┼──► │
│ │ CIRCLE│ │
│ └───────┘ │
│ │
└─────────────────────┘
│
▼
TRAJECTORY
The position of the tracing point relative to the inner circle determines the resulting curve.
OUTER RADIUS
│
▼
┌───────────────┐
│ ROLLING │
│ RELATIONSHIP │
└───────┬───────┘
│
▼
INNER CIRCLE
│
▼
PEN POSITION
│
▼
TRAJECTORY
Spirograph mechanisms · Epicyclic gear systems Rotary mechanical systems · Wankel engine combustion chamber
A periodic signal can be represented as a sum of sinusoidal components:
SIGNAL
│
├── fundamental (1×)
├── 3rd harmonic (3×)
├── 5th harmonic (5×)
├── 7th harmonic (7×)
└── ...
│
▼
SUMMATION
│
▼
RECONSTRUCTED
SIGNAL
GPI visualizes the harmonic components as rotating phasors whose tip traces the output signal:
●
/|
/ |
/ |
●───● |
| |
●───● |
\ |
\ |
\|
●
Each arm rotates at a harmonic frequency. Their combined tip traces the waveform.
A finite Fourier representation of a discontinuous signal produces ringing near the discontinuity.
IDEAL FINITE HARMONICS
SQUARE (Gibbs ringing)
WAVE
┌──────┐ _┌──────┐_
│ │ _/ │ │ \_
│ │ _/ │ │ \_
────┘ └─── ─────┘ └─────
The overshoot does not disappear as more harmonics are added. It becomes more localized. It is a mathematical consequence, not a rendering artifact.
Signal processing · Audio compression · Image compression (JPEG) MRI · Radio transmission · Spectral analysis
Also known as the Clothoid or Euler Spiral.
C(s) = ∫₀ˢ cos(πt² / 2) dt
S(s) = ∫₀ˢ sin(πt² / 2) dt
κ(s) = πs
Curvature grows in direct proportion to arc length:
s=0 s=1 s=2 s=3
────────────╮
│
╰───╮
╰──╮
╰─╮
╰─● ← asymptotic eye
The spiral approaches fixed limiting points as s → ±∞.
Two mirrored arms meet at those limits.
Highway on-ramps · Railway transition curves Fresnel diffraction · Optical shadow boundaries
Imagine pulling a garden hose off a reel. At first it is nearly straight. The more hose you pull, the tighter it curves. Every highway on-ramp uses this shape.
x = (R + r cos(qt)) cos(pt)
y = (R + r cos(qt)) sin(pt)
z = r sin(qt)
A curve winds around a torus according to two integers:
p = longitudinal winding (around the large axis)
q = poloidal winding (through the hole)
┌─────────────┐
│ TORUS │
│ │
│ ╭─────╮ │
│ ╱ ╲ │
p ──► │ │ ○ │ ◄── q
│ ╲ ╱ │
│ ╰─────╯ │
└─────────────┘
│
▼
CLOSED KNOT
(when gcd(p,q)=1)
Named cases:
(p,q) = (2,3) → trefoil knot
(p,q) = (3,5) → cinquefoil knot
(p,q) = (2,1) → simple toroidal loop
Plasma field topology · Magnetic confinement (tokamak) DNA supercoiling classification · Topological soliton models
A plane tilted at the correct angle intersects a torus in exactly two circles. They are always linked — they cannot be separated without cutting.
╭────────╮
╭─╯ ╰─╮
│ ╭────╮ │
│ │ │ │
│ ╰────╯ │
╰─╮ ╭─╯
╰────────╯
Two circles, fully interlocked.
Linking number = 1.
Every point on the 4D sphere S³ corresponds to exactly one such circle in 3D space.
S³ (4D sphere)
│
│ Hopf map
▼
┌────────────────────────┐
│ │
│ ○ ○ ○ ○ │
│ ╲ ╱ ╲ ╱ ╲ ╱ │
│ ╲ ╱ ╲ ╱ ╲ ╱ │
│ ╳ ╳ ╳ │
│ ╱ ╲ ╱ ╲ ╱ ╲ │
│ ╱ ╲ ╱ ╲ ╱ ╲ │
│ │
│ linked circular fibers │
└────────────────────────┘
Each fiber is a perfect circle. Every fiber is linked to every other fiber. GPI renders 1–6 simultaneous fibers.
x = R cosφ − r sinθ sinφ
y = R sinφ + r sinθ cosφ
z = r cosθ
θ = φ + arcsin(r / R)
Spinor mathematics · Quantum phase geometry Fiber bundles · Complex phase representation
r(ν) = a(1 − e²) / (1 + e cosν)
where:
a = semi-major axis
e = eccentricity
ν = true anomaly
GPI uses actual Keplerian relationships — not a circular approximation.
The mean anomaly M relates to eccentric anomaly E:
M = E − e sinE
ν = 2 atan2(
√(1+e) · sin(E/2),
√(1−e) · cos(E/2)
)
Solved each frame by Newton iteration (8 passes, converges for e < 0.999).
ORBIT
│
┌───────────┼───────────┐
│ │ │
▼ ▼ ▼
SIZE SHAPE ORIENTATION
a e i, Ω, ω
│ │ │
└───────────┼───────────┘
▼
KEPLERIAN STATE
│
▼
t
│
▼
CURRENT POSITION
The body moves faster near periapsis and slower near apoapsis:
APOAPSIS (slow)
●
· ·
· ·
· ·
● ·──────────────────────────── · ●
PERI FAR
APSIS · ·
(fast) · ·
· ·
·
Equal areas swept in equal time — the geometry enforces the physics.
The orbit plane rotates over time (parameter Ṡ).
Earth's Moon precesses with an 18.6-year nodal cycle — the source of the Saros eclipse series.
GPS satellites · ISS · Hubble · Spacecraft trajectories Eclipse prediction · Gravitational assists · Exoplanet detection
| Shape | Primary Computation | Example Domain |
|---|---|---|
| Lissajous | Phase relationships | Oscillators, signals |
| Rose | Polar harmonic structure | Antennas, vibration modes |
| Spiral | Angular and radial growth | Growth, phyllotaxis |
| Superellipse | Power-law boundary | Design, architecture |
| Hypotrochoid | Rolling-circle geometry | Gears, mechanisms |
| Fourier | Harmonic decomposition | Signals, imaging |
| Cornu | Linear curvature growth | Roads, rails, optics |
| Torus Knot | Winding topology | Knot theory, fields |
| Villarceau | Linked circular fibers | Differential geometry, topology |
| Orbital | Keplerian dynamics | Celestial mechanics |
The collection is intentionally heterogeneous.
The objective is not ten variations of the same drawing. The objective is to expose different mathematical relationships through a common interactive interface.
Despite their differences, all ten systems share one interface:
GPI ENGINE
│
▼
┌───────────────┐
│ PARAMETERS │
└───────┬───────┘
│
▼
┌───────────────┐
│ EQUATION / │
│ ALGORITHM │
└───────┬───────┘
│
▼
┌───────────────┐
│ GEOMETRIC │
│ STATE │
└───────┬───────┘
│
┌──────────┴──────────┐
│ │
▼ ▼
FULL PATH CURRENT POINT
│ │
▼ ▼
GHOST HEAD
│ │
└──────────┬──────────┘
▼
CANVAS
The mathematical definition determines the geometry. The traversal parameter determines where the head is. The renderer determines how it is presented.
GPI treats t as a parameter that traverses a mathematical path.
Many geometric systems can be represented as:
P(t) = [ x(t), y(t), z(t) ]
The geometry can be evaluated independently of animation.
t₁ → position 1
t₂ → position 2
t₃ → position 3
Changing playback speed changes the rate at which values of t are sampled.
SAME PATH
┌────────────────────────┐
│ ╭──────────────╮ │
│ ╱ ╲ │
│ │ │ │
│ ╲ ╱ │
│ ╰──────────────╯ │
└────────────────────────┘
slow traversal ──────────────────►
fast traversal ══════════════════►
The underlying path is unchanged.
This distinction between geometry and traversal is the central architectural principle of GPI.
┌──────────┬──────┬────────┬─────────────┬─────────────┐
│Lissajous │ Rose │ Spiral │Superellipse │ Fourier │
└──────────┴──────┴────────┴─────────────┴─────────────┘
┌─────────┬────────────┬────────────┬─────────┐
│ Cornu │ Torus Knot │ Villarceau │ Orbital │
└─────────┴────────────┴────────────┴─────────┘
0× ──────────────────────────────────────────► 100×
At ~1× default traversal rate
At 100× full path maps in seconds
Speed changes traversal rate. It does not redefine the path.
⏸ PAUSE freeze the head — inspect geometry while panning
⊙ CENTER reset pan and zoom
↺ RESET restore default parameters
⬇ EXPORT download the full three-layer JSON for the current shape
📂 IMPORT load a previously exported JSON — restores exact state
◑ DARK toggle light / dark presentation
Click and drag on the canvas to move the viewing window.
Mouse wheel zooms toward cursor position. No upper zoom limit — explore arbitrarily small geometric structures.
Each system exposes the numbers that define its geometry.
Sliders resolve to 0.001 standard precision.
Changing a parameter resets the trail and begins a fresh traversal.
Every GPI shape follows the same object contract:
S.myshape = {
name: 'My Shape',
eq: 'x(t), y(t)',
domain: 'Reference · Author Year',
secs: [
{
title: 'Parameters',
domain: 'mathematical domain',
open: true,
rows: [
{
k: 'param_key',
name: 'param_name',
sym: 'σ',
mn: 0,
mx: 1,
st: 0.001,
def: 0.5,
desc: 'what this parameter controls'
}
]
}
],
_trail: [],
draw(cx, cy, r, p, t, ctx) {
// 1. Ghost — full path at 10% opacity
ctx.globalAlpha = 0.10;
ctx.beginPath();
// ... sample entire parametric range ...
ctx.stroke();
ctx.globalAlpha = 1;
// 2. Head — current position from t
const headX = /* f(t) */;
const headY = /* g(t) */;
// 3. Trail — persistent history
trailPush(this._trail, cx + headX, cy + headY, Math.round(p.tr));
drawTrail(this._trail, ctx, p.w);
dot(cx + headX, cy + headY, ctx);
}
};Add the tab:
<button class="tab" onclick="sel('myshape', this)">My Shape</button>No other architectural changes required.
A shape's draw() function receives:
cx canvas center X
cy canvas center Y
r reference radius / scale
p current parameter values (keyed by row.k)
t current traversal parameter (seconds × speed)
ctx Canvas 2D rendering context
The rendering pipeline:
draw()
│
┌──────────┼──────────┐
│ │ │
▼ ▼ ▼
PATH t PARAMETERS
│ │ │
│ ▼ │
│ HEAD │
│ │ │
└──────────┼──────────┘
▼
TRAIL
│
▼
CANVAS
Every shape can be exported as a three-layer JSON document.
┌─────────────────────────────────────────────┐
│ EXPORT DOCUMENT │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ LAYER 1 — LIVE STATE │ │
│ │ Exact t, params, zoom, pan │ │
│ │ Fully reproducible on import │ │
│ └──────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ LAYER 2 — PARAMETER MAP │ │
│ │ Every parameter: min, max, step, │ │
│ │ default, physical meaning, │ │
│ │ edge cases, what it affects │ │
│ └──────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ LAYER 3 — NAMED CONFIGURATIONS │ │
│ │ Presets for significant states: │ │
│ │ physical analogs, symmetry points, │ │
│ │ special cases, edge behaviors │ │
│ └──────────────────────────────────────┘ │
│ │
│ provenance_hash: SHA-256 of canonical JSON │
└─────────────────────────────────────────────┘
The provenance hash identifies the configuration uniquely. Identical configurations produce identical hashes. This hash becomes the token ID in the UUON Dmension ledger.
No WebGL required. Runs on any modern desktop or mobile browser.
Trails use fixed arrays with controlled front-shifting. Minimizes garbage collection pressure during animation.
Frame delta capped at 0.5 seconds.
NORMAL FRAME
t ──► Δt ──────────────────► t'
BACKGROUND TAB RESTORED
t ──► huge Δt ──X (capped) ──► stable t'
200 ──────────────────────────────► 3000 points
Ghost and trail resolution are independently controlled.
Fresnel integrals are precomputed into a lookup table on parameter change. Not recomputed from scratch each frame.
Solved by Newton iteration, 8 passes per frame. Converges for all supported eccentricities (e < 0.999).
Up to 6 independent simultaneous fiber trails.
.
├── UUON-UGK-GPI-001.html 6 classical shapes (preserved, unmodified)
├── UUON-UGK-GPI-002.html 10 shapes — classical + physical
├── UUON-UGK-GPI-003.html 10 shapes + JSON export / import
└── README.md this document
Each HTML file is a complete standalone application. No shared runtime dependencies between versions. Historical versions remain independently reproducible.
| Shape | Primary Reference |
|---|---|
| Lissajous | Nathaniel Bowditch, Memoirs of the American Academy, 1815 |
| Rose Curve | Guido Grandi, Flores geometrici, 1728 |
| Spiral | Pierre de Fermat, Ad locos planos, 1636 |
| Superellipse | Gabriel Lamé, superelliptic forms, 1818 |
| Hypotrochoid | Historical epicyclic geometry and astronomy |
| Fourier Series | Joseph Fourier, Théorie analytique de la chaleur, 1822 |
| Cornu Spiral | Marie Alfred Cornu, 1874; Euler, 1744 |
| Torus Knot | Knot theory and topological classification |
| Villarceau Circles | Yvon Villarceau, 1848; Heinz Hopf, 1931 |
| Keplerian Orbit | Johannes Kepler, Astronomia Nova, 1609 |
1. MATHEMATICS FIRST
The geometry begins with the mathematical definition.
The renderer does not become the source of truth.
2. PARAMETERS ARE EXPLICIT
Every variable that controls the geometry is exposed.
3. GEOMETRY AND TRAVERSAL ARE SEPARATE
The complete path and the animation state are
distinct computational concepts.
4. VISUALIZATION IS INSPECTABLE
The visualization reveals mathematical behavior.
It does not conceal it.
5. DOCUMENTATION STAYS NEAR THE CODE
Equations, diagrams, and implementation remain
understandable without a separate application.
6. REPRODUCIBILITY
A given parameter set produces the corresponding
geometry deterministically.
7. HISTORICAL VERSIONS REMAIN INTACT
Previous versions are preserved, not overwritten.
GPI visualizes mathematical structures and selected physical equations.
MATHEMATICAL STRUCTURE
│
▼
VISUALIZATION
│
▼
PHYSICAL ANALOGY
│
▼
REQUIRES INDEPENDENT
PHYSICAL VALIDATION
The engine makes mathematical relationships visible and interactive. Physical claims require derivation, measurement, or experimental validation appropriate to the claim.
USAL-1.0
UUON Foundation Inc. © 2026 Phillip Aguilar Ruiz III
Permission is granted for personal use, research, and educational purposes. Commercial use, redistribution, or derivative works require written permission from UUON Foundation Inc.
UUON FOUNDATION INC.
Kassel, Germany
GPI — Geometric Parameter Interface
UUON-UGK-GPI-003
G°centric v1.0
Position 33 = 100%
Bergpark Wilhelmshöhe — 51.3°N 9.4°E
Computational zero-point
UUON
│
┌───────────────┼───────────────┐
│ │ │
▼ ▼ ▼
Δmension CLOUUD GPI
Mathematical Compression Geometry
Universe Provenance Interface
│ │ │
└───────────────┼───────────────┘
│
▼
COMPUTATIONAL SYSTEMS
Related areas: Mathematical Operating System (MOS) · F=(P,E,M,R,C) CLOUUD framework · Δmension engine collection · Shape token ledger
PARAMETERS
│
▼
EQUATION
│
▼
SHAPE
│
▼
PATH
│
▼
t
│
▼
TRAVERSAL
│
▼
OBSERVER
│
▼
VISUAL FIELD
The equation defines the relationship.
The parameters define the state.
The geometry expresses the mathematical result.
The parameter t traverses the result.
The renderer makes the traversal visible.
The user changes the parameters and observes the geometry respond.
That is the Geometric Parameter Interface.
Make mathematical structure directly observable.
Instead of treating equations as static text, GPI turns their parameters into an interface.
Instead of treating animation as the creation of a shape, GPI treats animation as traversal of a defined mathematical path.
Instead of separating documentation from implementation, GPI keeps equations, parameters, diagrams, and code structurally connected.
EQUATION
│
▼
GEOMETRY
│
▼
PATH
│
▼
PARAMETER t
│
▼
TRAVERSAL
│
▼
VISUALIZATION
│
▼
HUMAN UNDERSTANDING
The path is the mathematical object.
t is the traversal parameter.
The moving point is the observer.
The interface is the instrument.
The visualization is the visible consequence of the mathematics.