nu-Eden: Sundered Skies
nu-Edenian Language
nu-Edenian Technical Archive
//KAGE System
▸Overview
The KAGE (Kanji Automatic Glyph Engine) is a stroke-based vector glyph rendering system ported from JavaScript to TypeScript. It converts stroke data strings into SVG polygon outlines suitable for display on the web.
▸Stroke Data Format
Each stroke is encoded as an 11-tuple:
type:startOpt:endOpt:x1:y1:x2:y2:x3:y3:x4:y4
Multiple strokes are concatenated with $ delimiters to form complete glyph data:
1:0:0:10:20:190:20:0:0:0:0$1:0:0:100:10:100:190:0:0:0:0
Stroke Types
| Type | Name | Description |
|---|---|---|
| 1 | STRAIGHT | Line from (x1,y1) to (x2,y2) |
| 2 | CURVE | Quadratic Bézier with control point |
| 3 | BENDING | Two connected straight segments |
| 4 | BENDING_ROUND | Rounded bending stroke |
| 6 | BEZIER | Cubic Bézier curve |
| 7 | VCURVE | Vertical curve with control points |
| 99 | REFERENCE | Component reference (buhin lookup) |
Start/End Decorations
Start and end options control how stroke terminals are rendered — connecting lines to adjacent strokes, corner treatments, sweep directions, and stop marks.
▸Rendering Pipeline
Stroke data string
→ Parse (split by $, extract 11-tuples)
→ StrokeData arrays
→ Font renderer (Mincho or Gothic)
→ Polygon outlines
→ SVG path data
→ Inline <svg> element
▸Font Renderers
Mincho (Default)
Variable-width calligraphic renderer (~850 lines). Produces strokes with traditional brush-style decoration:
- ▪Uroko (鱗) — Fish-scale serifs at stroke ends
- ▪Kakato (踵) — Heel marks at corners
- ▪Hane (跳ね) — Upward flicks
- ▪Mage (曲げ) — Decorative bends
Supports 4 size presets and 5 named weights. The default renderer for all edenji display.
Gothic
Uniform-width stroke renderer. Produces clean, even strokes without calligraphic decoration. Used for technical display, small sizes, and UI elements.
▸Component System (Buhin)
The Buhin (部品) system stores reusable stroke components. When a stroke with type 99 (REFERENCE) is encountered, the engine:
- ▪Looks up the referenced component name
- ▪Retrieves its stroke data
- ▪Applies bounding-box transformation (scale + translate) to fit the reference into the target region
- ▪Recursively processes the referenced strokes
This enables efficient component reuse — a radical defined once can appear at any size in any layout slot.
▸Coordinate System
All glyph coordinates exist in a 200×200 grid. Stroke positions, control points, and bounding boxes are specified in this coordinate space. The final SVG is scaled to display size.
▸Key Modules
| Module | Purpose |
|---|---|
kage.ts | Main engine class — makeGlyph, stroke parsing, buhin resolution |
mincho.ts | Mincho font renderer with calligraphic decoration |
gothic.ts | Gothic font renderer with uniform strokes |
polygons.ts | Polygon collection with SVG generation |
polygon.ts | Individual polygon path builder |
buhin.ts | Component storage and lookup |
fontcanvas.ts | Drawing primitives (~25 geometric operations) |
bezier.ts | Variable-width Bézier stroke outlines |
fitcurve.ts | Schneider's least-squares cubic curve fitting |
2d.ts | Line intersection and crossing detection |
util.ts | Math utilities, seeded random, hashing |
pointmaker.ts | Vector/direction helpers for stroke construction |
types.ts | Core type definitions |