@logomarks/core 0.1.9 → 0.2.0

package/src/objects/devglyphs.js

@@ -0,0 +1,226 @@
+/**
+ * Dev glyphs: the code symbols knocked out of a terminal window or a monitor (devices.js), each built from bars and
+ * polygons, never typeset. Every glyph is drawn about its centre (cx, cy), y down, at scale k (k = 1 is about 160–200
+ * tall, sized for devWindow()'s body), with strokes t thick: keep t at 40 or more so the glyph survives at 32 px.
+ * From the Logomarks tools (devglyphs.mjs, batches 175, 199).
+ */
+import { U, D, I, poly, rect, rr, bar, stroke, fillet, sample } from '../geometry/index.js';
+
+/** Maps points drawn about the origin to (cx, cy) at scale k. */
+const at = (cx, cy, k) => (pts) => pts.map(([x, y]) => [cx + x * k, cy + y * k]);
+/** A rectangle drawn about the origin, mapped like at(). */
+const box = (cx, cy, k, x, y, w, h) => rect(cx + x * k, cy + y * k, w * k, h * k);
+/** A chevron pointing right (dir 1) or left (dir −1): its arms `w` across and `h` tall, mitred at the tip. */
+const chev = (P, x, y, w, h, t, dir = 1) => stroke(P([[x - (dir * w) / 2, y - h / 2], [x + (dir * w) / 2, y], [x - (dir * w) / 2, y + h / 2]]), t, { chunk: 8 });
+
+/**
+ * The prompt >_ (a terminal window's).
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=44] The stroke.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const prompt = (cx, cy, k = 1, t = 44) => {
+	const P = at(cx, cy, k);
+	return U(stroke(P([[-115, -70], [-45, -10], [-115, 50]]), t, { chunk: 8 }), box(cx, cy, k, -5, 30, 120, 40));
+};
+
+/**
+ * The tag </> (a code screen's).
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=42] The stroke.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const code = (cx, cy, k = 1, t = 42) => {
+	const P = at(cx, cy, k);
+	return U(stroke(P([[-70, -55], [-140, 0], [-70, 55]]), t, { chunk: 8 }), stroke(P([[70, -55], [140, 0], [70, 55]]), t, { chunk: 8 }), bar(...P([[28, -72], [-28, 72]]), t - 6));
+};
+
+/** One curly brace's outline, the stem 40 thick with its point out to the left (−x) and its arms to the right: the point's
+ * inner notch is set so the slanted run keeps the stem's thickness. */
+const BRACE = [[56, -98], [-20, -98], [-20, -40], [-56, 0], [-20, 40], [-20, 98], [56, 98], [56, 58], [20, 58], [20, 24.4], [-2, 0], [20, -24.4], [20, -58], [56, -58]];
+
+/**
+ * Curly braces { }: angular, each with a point at its middle, their stems `apart` either side of the middle.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [apart=90] How far each stem sits from the middle.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const braces = (cx, cy, k = 1, apart = 90) => {
+	const P = at(cx, cy, k);
+	return U(poly(P(BRACE.map(([x, y]) => [x - apart, y]))), poly(P(BRACE.map(([x, y]) => [apart - x, y]).reverse())));
+};
+
+/**
+ * The hash #, its uprights leaning a little.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=40] The stroke.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const hash = (cx, cy, k = 1, t = 40) => {
+	const P = at(cx, cy, k);
+	return U(bar(...P([[-26, -92], [-54, 92]]), t), bar(...P([[54, -92], [26, 92]]), t), ...[-38, 38].map((y) => box(cx, cy, k, -100, y - t / 2 / k, 200, t / k)));
+};
+
+/**
+ * The dollar $: an angular S (three bars joined at alternate ends) with the stem through it standing proud top and bottom.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=36] The stroke.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const dollar = (cx, cy, k = 1, t = 36) => {
+	const P = at(cx, cy, k), s = 70;
+	return U(stroke(P(fillet([[58, -s], [-52, -s], [-52, 0], [52, 0], [52, s], [-58, s]], [0, 16, 16, 16, 16, 0])), t, { chunk: 12 }), box(cx, cy, k, -17, -s - 34, 34, 2 * s + 68));
+};
+
+/**
+ * The underscore cursor _, w long.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [w=120] Its length.
+ * @param {number} [t=40] The stroke.
+ * @returns {import('../geometry/types.js').Polygon} The glyph.
+ */
+export const under = (cx, cy, k = 1, w = 120, t = 40) => box(cx, cy, k, -w / 2, -t / 2 / k, w, t / k);
+
+/**
+ * The tilde ~ as one wave, w across.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=40] The stroke.
+ * @param {number} [w=130] Its width.
+ * @param {number} [a=22] The wave's amplitude.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const tilde = (cx, cy, k = 1, t = 40, w = 130, a = 22) => stroke(at(cx, cy, k)(sample((u) => [-w / 2 + w * u, -a * Math.sin(2 * Math.PI * u)], 0, 1, 40)), t, { chunk: 8 });
+
+/**
+ * A slash / from bottom left to top right, h tall and leaning `lean` across.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=40] The stroke.
+ * @param {number} [h=180] Its height.
+ * @param {number} [lean=70] How far it leans across.
+ * @returns {import('../geometry/types.js').Polygon} The glyph.
+ */
+export const slash = (cx, cy, k = 1, t = 40, h = 180, lean = 70) => bar(...at(cx, cy, k)([[lean / 2, -h / 2], [-lean / 2, h / 2]]), t);
+
+/**
+ * The fat arrow =>: two bars and a chevron.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=36] The stroke.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const fatArrow = (cx, cy, k = 1, t = 36) => {
+	const P = at(cx, cy, k);
+	return U(box(cx, cy, k, -120, -36 - t / 2 / k, 120, t / k), box(cx, cy, k, -120, 36 - t / 2 / k, 120, t / k), chev(P, 70, 0, 70, 160, t + 6));
+};
+
+/**
+ * Not equal !=: a bang (a bar over a square dot) and an equals sign.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=40] The stroke.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const notEqual = (cx, cy, k = 1, t = 40) => U(box(cx, cy, k, -110, -84, t / k, 110), box(cx, cy, k, -110, 50, t / k, t / k),
+	...[-30, 30].map((y) => box(cx, cy, k, -30, y - t / 2 / k, 140, t / k)));
+
+/**
+ * Binary 01: a zero as a rounded ring and a one as a stem with its flag.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=40] The stroke.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const binary = (cx, cy, k = 1, t = 40) => {
+	const x0 = cx - 140 * k, y0 = cy - 100 * k, w = 120 * k, h = 200 * k;
+	return U(D(rr(x0, y0, w, h, 54 * k), rr(x0 + t, y0 + t, w - 2 * t, h - 2 * t, Math.max(8, 54 * k - t))), box(cx, cy, k, 60, -100, 40, 200),
+		glyphPoly(cx, cy, k, [[60, -100], [60, -56], [24, -32], [24, -76]]));
+};
+
+/**
+ * Lambda λ: the long stroke from a flag at the top left down to the right, the short leg off its middle to the bottom
+ * left; the ends cut level.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=42] The stroke.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const lambda = (cx, cy, k = 1, t = 42) => {
+	const P = at(cx, cy, k);
+	return I(U(stroke(P([[-78, -90], [-40, -90], [62, 120]]), t, { chunk: 8 }), bar(...P([[14, 8], [-66, 120]]), t)), box(cx, cy, k, -200, -120, 400, 210));
+};
+
+/**
+ * A diff + −.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=40] The stroke.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const diff = (cx, cy, k = 1, t = 40) => U(box(cx, cy, k, -150, -t / 2 / k, 130, t / k), box(cx, cy, k, -85 - t / 2 / k, -65, t / k, 130), box(cx, cy, k, 30, -t / 2 / k, 120, t / k));
+
+/**
+ * A tick ✓.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=44] The stroke.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const tick = (cx, cy, k = 1, t = 44) => stroke(at(cx, cy, k)([[-80, 0], [-30, 50], [70, -60]]), t, { chunk: 8 });
+
+/**
+ * Two slashes //, a comment.
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} [k=1] The scale.
+ * @param {number} [t=40] The stroke.
+ * @returns {import('../geometry/types.js').Shape} The glyph.
+ */
+export const comment = (cx, cy, k = 1, t = 40) => U(slash(cx - 45 * k, cy, k, t), slash(cx + 45 * k, cy, k, t));
+
+/**
+ * A polygon in glyph units mapped like the other glyphs (for a one-off).
+ *
+ * @param {number} cx The glyph's centre, x.
+ * @param {number} cy The glyph's centre, y.
+ * @param {number} k The scale.
+ * @param {readonly (readonly number[])[]} pts The points, about the origin.
+ * @returns {import('../geometry/types.js').Polygon} The polygon.
+ */
+export const glyphPoly = (cx, cy, k, pts) => poly(at(cx, cy, k)(pts));

package/src/objects/devices.d.ts

@@ -0,0 +1,31 @@
+import type { Polygon, Shape } from '../geometry/types.js';
+
+/** A device's size: W × H, corners r. */
+export interface DeviceSize {
+	W: number;
+	H: number;
+	r: number;
+}
+
+/** The house phone: 244 × 448, corners 52. */
+export const PHONE: DeviceSize;
+/** A device's body: a rounded slab centred on the origin. */
+export function slab(o?: DeviceSize): Polygon;
+/** The screen inside a slab, inset at the sides and ends. */
+export function screen(o?: DeviceSize, side?: number, top?: number, bot?: number): Polygon;
+/** A slab with its screen parted off by the gap. */
+export function windowed(g: number, o?: DeviceSize, side?: number, top?: number, bot?: number): Shape;
+/** A terminal window: [title strip, body], parted by the gap. */
+export function devWindow(g: number, W?: number, H?: number, bar?: number, r?: number): Polygon[];
+/** The middle of devWindow()'s body (y). */
+export function bodyMid(g: number, H?: number, bar?: number): number;
+/** A monitor's stand under y = 0: [neck, foot]. */
+export function standParts(g: number): Polygon[];
+/** A laptop's deck: a shallow trapezoid at y under a lid W wide. */
+export function laptopDeck(W: number, y: number, deck?: number, dh?: number): Polygon;
+/** A VR headset's strap seen front on. */
+export function strapBand(): Shape;
+/** A VR headset's visor with its nose notch. */
+export function visorSlab(): Shape;
+/** A VR headset: the visor over its strap, parted by the gap. */
+export function headset(g: number): Shape;

package/src/objects/devices.js

@@ -0,0 +1,114 @@
+/**
+ * Devices: a phone's slab and its screen parted off by the gap, terminal windows, a monitor's stand, a laptop's deck and a
+ * VR headset. Every part is drawn about the origin (y down); a part that parts anything takes the gap g, so exact() keeps
+ * it 22 once fitted. From the Logomarks tools (deviceparts.mjs, batches 174–175, 188).
+ */
+import { U, D, poly, ellipse, rr, rect, roundPoly, grown, over } from '../geometry/index.js';
+
+/**
+ * The house phone: a slab W × H about the origin, corners r. Taller and slimmer than a card, rounder than a door.
+ *
+ * @type {{ W: number, H: number, r: number }}
+ */
+export const PHONE = { W: 244, H: 448, r: 52 };
+
+/**
+ * A device's body: a rounded slab W × H centred on the origin, corners r.
+ *
+ * @param {{ W: number, H: number, r: number }} [o=PHONE] Its size and corner radius.
+ * @returns {import('../geometry/types.js').Polygon} The slab.
+ */
+export const slab = ({ W, H, r } = PHONE) => rr(-W / 2, -H / 2, W, H, r);
+
+/**
+ * The screen inside a slab: inset `side` at the sides and `top` / `bot` at the ends, its corners following the body's.
+ *
+ * @param {{ W: number, H: number, r: number }} [o=PHONE] The slab.
+ * @param {number} [side=30] The inset at the sides.
+ * @param {number} [top=52] The inset at the top.
+ * @param {number} [bot=52] The inset at the bottom.
+ * @returns {import('../geometry/types.js').Polygon} The screen.
+ */
+export const screen = ({ W, H, r } = PHONE, side = 30, top = 52, bot = 52) => rr(-W / 2 + side, -H / 2 + top, W - 2 * side, H - top - bot, Math.max(8, r - side + 6));
+
+/**
+ * A slab with its screen parted off by the gap: the body a frame (`side` thick at the sides, `top` / `bot` at the ends;
+ * keep every side 26 or more so the frame never thins to a hairline at 32 px), the screen a solid panel floating in it.
+ *
+ * @param {number} g The gap.
+ * @param {{ W: number, H: number, r: number }} [o=PHONE] The slab.
+ * @param {number} [side=28] The frame at the sides.
+ * @param {number} [top=34] The frame at the top.
+ * @param {number} [bot=34] The frame at the bottom.
+ * @returns {import('../geometry/types.js').Shape} The frame and the screen.
+ */
+export const windowed = (g, o = PHONE, side = 28, top = 34, bot = 34) => { const s = screen(o, side + g, top + g, bot + g); return U(D(slab(o), grown(s, g)), s); };
+
+/**
+ * A terminal window W × H about the origin, corners r: the title strip `bar` tall parted off the body by the gap, no
+ * dots. Knock a dev glyph out of the body (its middle is bodyMid()).
+ *
+ * @param {number} g The gap.
+ * @param {number} [W=448] The width.
+ * @param {number} [H=340] The height.
+ * @param {number} [bar=60] The title strip's height.
+ * @param {number} [r=30] The corner radius.
+ * @returns {import('../geometry/types.js').Polygon[]} [title, body].
+ */
+export const devWindow = (g, W = 448, H = 340, bar = 60, r = 30) => {
+	const y0 = -H / 2;
+	return [rr(-W / 2, y0, W, bar, [r, r, 0, 0]), rr(-W / 2, y0 + bar + g, W, H - bar - g, [0, 0, r, r])];
+};
+
+/**
+ * The middle of devWindow()'s body, for placing its glyph.
+ *
+ * @param {number} g The gap.
+ * @param {number} [H=340] The window's height.
+ * @param {number} [bar=60] Its title strip's height.
+ * @returns {number} The body's middle, y.
+ */
+export const bodyMid = (g, H = 340, bar = 60) => -H / 2 + bar + g + (H - bar - g) / 2;
+
+/**
+ * A monitor's stand under a screen whose foot edge is y = 0: the neck parted off below it by the gap and the foot parted
+ * off the neck. Union them with the screen.
+ *
+ * @param {number} g The gap.
+ * @returns {import('../geometry/types.js').Polygon[]} [neck, foot].
+ */
+export const standParts = (g) => [rect(-36, g, 72, 64), rr(-130, 64 + 2 * g, 260, 40, 14)];
+
+/**
+ * A laptop's deck: a shallow trapezoid at y, under a lid W wide, `deck` wide at its foot and `dh` deep.
+ *
+ * @param {number} W The lid's width.
+ * @param {number} y The deck's top.
+ * @param {number} [deck=448] Its width at the foot.
+ * @param {number} [dh=46] Its depth.
+ * @returns {import('../geometry/types.js').Polygon} The deck.
+ */
+export const laptopDeck = (W, y, deck = 448, dh = 46) => roundPoly([[-W / 2 - 6, y], [W / 2 + 6, y], [deck / 2, y + dh], [-deck / 2, y + dh]], [6, 6, 14, 14]);
+
+/**
+ * A VR headset's strap seen front on: an elliptical band round the origin (outer 224 × 150, 40 wide at the sides), its
+ * middle 10 above the origin.
+ *
+ * @returns {import('../geometry/types.js').Shape} The band.
+ */
+export const strapBand = () => D(ellipse(0, -10, 224, 150), ellipse(0, -10, 184, 112));
+
+/**
+ * A VR headset's visor: a rounded slab 380 × 190 (corners 70) about the origin, the nose notch cut up into its lower edge.
+ *
+ * @returns {import('../geometry/types.js').Shape} The visor.
+ */
+export const visorSlab = () => D(rr(-190, -90, 380, 190, 70), poly([[-50, 100], [50, 100], [30, 50], [-30, 50]]));
+
+/**
+ * A VR headset front on: the visor laid over its strap and parted from it by the gap.
+ *
+ * @param {number} g The gap.
+ * @returns {import('../geometry/types.js').Shape} The headset.
+ */
+export const headset = (g) => over(strapBand(), visorSlab(), g);

package/src/objects/faces.d.ts

@@ -0,0 +1,94 @@
+import type { Geom, Polygon, Shape } from '../geometry/types.js';
+
+/** A face's frame (frame()): eye radius, mouth and shut-eye strokes, and where the eyes sit. */
+export interface FaceFrame {
+	/** The eye radius. */
+	e: number;
+	/** The mouth stroke. */
+	w: number;
+	/** The shut eyes' stroke. */
+	aw: number;
+	/** The eyes' height. */
+	ey: number;
+	/** The left and right eye centres, x. */
+	x1: number;
+	x2: number;
+	/** The eyes' middle, x. */
+	cx: number;
+}
+
+/** Headphones' options for headphones(). */
+export interface HeadphoneOptions {
+	rx: number;
+	ry?: number;
+	cx?: number;
+	cy?: number;
+	bw?: number;
+	cw?: number;
+	ch?: number;
+	top?: number;
+	foot?: number;
+	a0?: number;
+	a1?: number;
+}
+
+/** An open arc as a round-capped stroke (degrees, 0 = right, 90 = down). */
+export function arc(cx: number, cy: number, r: number, a0: number, a1: number, w: number): Shape;
+/** A round-capped stroke along a smooth curve through pts. */
+export function limb(pts: readonly (readonly number[])[], w: number): Shape;
+/** A half-disc hole, flat side up at y (a grin). */
+export function grinHole(x: number, y: number, r: number): Shape;
+/** A face's frame for radius R, its features snapped to the gap. */
+export function frame(R: number, g: number): FaceFrame;
+/** The comma smile under the right eye. */
+export function hook(R: number, g: number, f: FaceFrame): Shape;
+/** Where shut eyes' centres sit, x. */
+export function arcXs(f: FaceFrame, g: number): number[];
+/** ^ : a closed, happy eye. */
+export function happyEye(x: number, y: number, f: FaceFrame): Shape;
+/** ∪ : a closed, sleeping eye. */
+export function shutEye(x: number, y: number, f: FaceFrame): Shape;
+/** Glance: two dots and the comma smile. */
+export function glance(R: number, g: number): Geom[];
+/** Laugh: both eyes shut happy over the wide mouth. */
+export function laugh(R: number, g: number): Shape[];
+/** A five-point star, point up. */
+export function star(x: number, y: number, r: number, k?: number): Polygon;
+/** Kiss: shut happy eyes over a puckered 3. */
+export function kiss(R: number, g: number): Shape[];
+/** Starstruck: two stars for eyes over the wide mouth. */
+export function starstruck(R: number, g: number): Geom[];
+/** Hmm: a raised brow and a short flat mouth. */
+export function hmm(R: number, g: number): Geom[];
+/** Zipped: two dots over a zip. */
+export function zipped(R: number, g: number): Polygon[];
+/** Dizzy: spiral eyes and a wavy mouth. */
+export function dizzy(R: number, g: number): Shape[];
+/** A mascot's stick limbs (30). */
+export const LIMB: number;
+/** Two dot eyes parted by the gap. */
+export function eyes(g: number, x: number, y: number, e?: number): Polygon[];
+/** Two stick legs under a body. */
+export function legs(x: number, y: number, d?: number, L?: number): Shape[];
+/** A waving arm and a hanging arm from shoulders at (±x, y). */
+export function arms(x: number, y: number): Shape[];
+/** A body with two dot eyes knocked out. */
+export function eyed(body: Geom, g: number, x: number, y: number, e?: number): Shape;
+/** A waving arm from the shoulder, out to side s. */
+export function waveArm(x: number, y: number, s?: number): Shape;
+/** A hanging arm from the shoulder, out to side s. */
+export function hang(x: number, y: number, s?: number): Shape;
+/** A pointed leaf from its base at deg, L long and W wide. */
+export function leaf(x: number, y: number, deg: number, L: number, W: number): Shape;
+/** Headphones: a band over an ellipse and two cups. */
+export function headphones(o: HeadphoneOptions): Shape;
+/** ∪ : a shut, blissful eye. */
+export function lid(x: number, y: number, e: number, w: number): Shape;
+/** A focused eye, its top cut away on a slant. */
+export function focusEye(x: number, y: number, e: number, s: number, deg?: number): Shape;
+/** A nose: a rounded triangle point down. */
+export function nose(x: number, y: number, w: number, h: number, r?: number): Polygon;
+/** A mic boom ending in a capsule mic. */
+export function micBoom(pts: readonly (readonly number[])[], w: number, m?: number, mw?: number): Shape;
+/** A head wearing headphones, `front` standing in front of the band. */
+export function wearFront(head: Geom, P: Geom, g: number, front?: Geom): Shape;