diff --git a/lib/pages/creature-page.tsx b/lib/pages/creature-page.tsx index 5c06dee..11eb3b1 100644 --- a/lib/pages/creature-page.tsx +++ b/lib/pages/creature-page.tsx @@ -6,6 +6,8 @@ import { SvgSymbolContent, SvgSymbolData, } from "../svg-symbol"; +import { AttachmentPointType, PointWithNormal } from "../specs"; +import { subtractPoints } from "../point"; const SYMBOL_MAP = new Map( SvgVocabulary.map((symbol) => [symbol.name, symbol]) @@ -19,10 +21,31 @@ function getSymbol(name: string): SvgSymbolData { return symbol; } +function getAttachmentPoint( + s: SvgSymbolData, + type: AttachmentPointType, + idx: number = 0 +): PointWithNormal { + const { specs } = s; + if (!specs) { + throw new Error(`Symbol ${s.name} has no specs!`); + } + const points = specs[type]; + if (!(points && points.length > idx)) { + throw new Error( + `Symbol ${s.name} must have at least ${ + idx + 1 + } ${type} attachment point(s)!` + ); + } + + return points[idx]; +} + export const CreaturePage: React.FC<{}> = () => { const rand = new Random(1); const parts: string[] = []; - const ctx = createSvgSymbolContext(); + const ctx = createSvgSymbolContext({ showSpecs: false }); const eye = getSymbol("eye"); const hand = getSymbol("hand"); @@ -30,13 +53,23 @@ export const CreaturePage: React.FC<{}> = () => { parts.push(rand.choice(SvgVocabulary).name); } + const handTail = getAttachmentPoint(hand, "tail"); + const eyeCrown = getAttachmentPoint(eye, "crown"); + + const dist = subtractPoints(eyeCrown.point, handTail.point); + return ( <>
TODO: Make a creature with maybe the following parts:
diff --git a/lib/point.ts b/lib/point.ts new file mode 100644 index 0000000..5cf90ec --- /dev/null +++ b/lib/point.ts @@ -0,0 +1,16 @@ +import { Point } from "../vendor/bezier-js"; + +export function subtractPoints(p1: Point, p2: Point): Point { + return { + x: p1.x - p2.x, + y: p1.y - p2.y, + }; +} + +export function normalizePoint(p: Point): Point { + const len = Math.sqrt(Math.pow(p.x, 2) + Math.pow(p.y, 2)); + return { + x: p.x / len, + y: p.y / len, + }; +} diff --git a/lib/specs.ts b/lib/specs.ts index ddad5c8..cdc2797 100644 --- a/lib/specs.ts +++ b/lib/specs.ts @@ -2,6 +2,7 @@ import { Point, BBox } from "../vendor/bezier-js"; import { getBoundingBoxForBeziers } from "./bounding-box"; import * as colors from "./colors"; import { pathToShapes } from "./path"; +import { normalizePoint, subtractPoints } from "./point"; import type { SvgSymbolElement } from "./svg-symbol"; const SPEC_LAYER_ID_RE = /^specs.*/i; @@ -54,21 +55,6 @@ const NUM_ARROW_POINTS = 4; const ARROW_TOP_POINT_IDX = 0; const ARROW_BOTTOM_POINT_IDX = 2; -function subtractPoints(p1: Point, p2: Point): Point { - return { - x: p1.x - p2.x, - y: p1.y - p2.y, - }; -} - -function normalizePoint(p: Point): Point { - const len = Math.sqrt(Math.pow(p.x, 2) + Math.pow(p.y, 2)); - return { - x: p.x / len, - y: p.y / len, - }; -} - function getArrowPoints(path: string): PointWithNormal[] { const shapes = pathToShapes(path); const points: PointWithNormal[] = [];