@johnmorrisdotca/wakusei-planets 0.6.0 → 0.11.0

package/dist/portrait/overlay.d.ts

@@ -0,0 +1,50 @@
+import { type Look } from "../facts.ts";
+import { type Background, type Guide, type Portrait, type Resolved } from "./model.ts";
+export interface Shapes {
+    circles: {
+        cx: number;
+        cy: number;
+        r: number;
+        kind: "orbit" | "select";
+    }[];
+    lines: {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    }[];
+    texts: {
+        x: number;
+        y: number;
+        text: string;
+        size: number;
+    }[];
+}
+export interface Star {
+    x: number;
+    y: number;
+    /** Radius as a fraction of the picture's height. */
+    r: number;
+    a: number;
+}
+/** The sky's stars: the same ones every time, so a picture and its export agree. */
+export declare function starfield(count?: number): Star[];
+/** The CSS behind the picture for a background (the stars are separate gradients, so the page draws them without a script). */
+export declare function backgroundCss(bg: Background): string;
+/** Paint the background onto a 2D canvas the size of the picture. */
+export declare function paintBackground(ctx: CanvasRenderingContext2D, bg: Background, width: number, height: number): void;
+/** The orbit rings and the names for a picture of this size, and the selected body's outline and the guides when asked. */
+export declare function shapesOf(p: Portrait, resolved: Resolved, width: number, height: number, lang?: "en" | "ja", edit?: {
+    selected?: number;
+    guides?: readonly Guide[];
+}): Shapes;
+/** The shapes as SVG elements (no wrapper), in the picture's pixels. */
+export declare function shapesSvg(s: Shapes): string;
+/** The shapes on a 2D canvas. */
+export declare function drawShapes(ctx: CanvasRenderingContext2D, s: Shapes, ratio?: number): void;
+/**
+ * The portrait in the line look: one SVG, the bodies drawn one over another in the order of the list, each as a nested picture sized so its disc has the radius the layout gave it.
+ * Anything a body's rings or glow need past the disc is inside its own picture.
+ */
+export declare function lineScene(p: Portrait, resolved: Resolved, width: number, height: number, poses: readonly import("../ephemeris.ts").Pose[], lang?: "en" | "ja"): string;
+export type { Look };

package/dist/portrait/overlay.js

@@ -0,0 +1,173 @@
+// What is drawn over and under the bodies of a portrait, as plain shapes: the sky behind them (a few hundred stars, always the same ones), the rings of the moons' orbits, the names, and, while
+// editing, the chosen body's outline and the guides. The same shapes become an SVG overlay on the page and 2D canvas strokes in an exported picture, so the two always agree. Pure: no DOM.
+import { BODIES } from "../facts.js";
+import { lineSvg } from "../line.js";
+import { toScreen } from "./model.js";
+/** The sky's stars: the same ones every time, so a picture and its export agree. */
+export function starfield(count = 140) {
+    let seed = 20261103;
+    const next = () => {
+        seed = (seed * 1664525 + 1013904223) >>> 0;
+        return seed / 4294967296;
+    };
+    return Array.from({ length: count }, () => {
+        const big = next() > 0.9;
+        return { x: next(), y: next(), r: big ? 0.0016 : 0.0008 + next() * 0.0006, a: 0.35 + next() * 0.65 };
+    });
+}
+const STARS = starfield();
+/** The CSS behind the picture for a background (the stars are separate gradients, so the page draws them without a script). */
+export function backgroundCss(bg) {
+    if (bg === "transparent")
+        return "transparent";
+    if (bg === "gradient")
+        return "radial-gradient(120% 140% at 30% 20%, #1c3358 0%, #0d1a33 55%, #050914 100%)";
+    if (bg === "black")
+        return "#000";
+    const dots = STARS.map((s) => `radial-gradient(${(s.r * 1000).toFixed(1)}px ${(s.r * 1000).toFixed(1)}px at ${(s.x * 100).toFixed(2)}% ${(s.y * 100).toFixed(2)}%, rgba(255,255,255,${s.a.toFixed(2)}), transparent)`);
+    return `${dots.join(",")},radial-gradient(100% 120% at 50% 40%, #07101f 0%, #000 100%)`;
+}
+/** Paint the background onto a 2D canvas the size of the picture. */
+export function paintBackground(ctx, bg, width, height) {
+    if (bg === "transparent")
+        return;
+    if (bg === "gradient") {
+        const g = ctx.createRadialGradient(width * 0.3, height * 0.2, 0, width * 0.3, height * 0.2, Math.max(width, height) * 1.1);
+        g.addColorStop(0, "#1c3358");
+        g.addColorStop(0.55, "#0d1a33");
+        g.addColorStop(1, "#050914");
+        ctx.fillStyle = g;
+        ctx.fillRect(0, 0, width, height);
+        return;
+    }
+    if (bg === "black") {
+        ctx.fillStyle = "#000";
+        ctx.fillRect(0, 0, width, height);
+        return;
+    }
+    const g = ctx.createRadialGradient(width / 2, height * 0.4, 0, width / 2, height * 0.4, Math.max(width, height) * 0.8);
+    g.addColorStop(0, "#07101f");
+    g.addColorStop(1, "#000");
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, width, height);
+    for (const s of STARS) {
+        ctx.fillStyle = `rgba(255,255,255,${s.a})`;
+        ctx.beginPath();
+        ctx.arc(s.x * width, s.y * height, Math.max(0.5, s.r * 1000), 0, Math.PI * 2);
+        ctx.fill();
+    }
+}
+const labelSize = (width) => Math.max(11, Math.min(15, width / 60));
+/** The orbit rings and the names for a picture of this size, and the selected body's outline and the guides when asked. */
+export function shapesOf(p, resolved, width, height, lang = "en", edit) {
+    const at = toScreen(resolved.camera, width, height);
+    const out = { circles: [], lines: [], texts: [] };
+    const byBody = new Map(resolved.placed.map((q) => [q.body, q]));
+    if (p.orbits) {
+        const sun = p.arrange === "orbit" ? byBody.get("sun") : undefined;
+        for (const moon of resolved.placed) {
+            const host = BODIES[moon.body].parent === undefined ? (moon.body === "sun" ? undefined : sun) : byBody.get(BODIES[moon.body].parent);
+            if (host === undefined)
+                continue;
+            const d = Math.hypot(moon.x - host.x, moon.y - host.y) * at.scale;
+            if (d > 2)
+                out.circles.push({ cx: at.px(host.x), cy: at.py(host.y), r: d, kind: "orbit" });
+        }
+    }
+    if (p.labels) {
+        const size = labelSize(width);
+        const boxes = [];
+        for (const q of resolved.placed) {
+            const text = BODIES[q.body].name[lang];
+            const w = [...text].reduce((n, c) => n + (c.charCodeAt(0) > 255 ? size : size * 0.58), 0);
+            const x = at.px(q.x);
+            const y = at.py(q.y) + Math.max(q.r * at.scale, 2) + size * 1.25;
+            const box = { x0: x - w / 2, x1: x + w / 2, y0: y - size, y1: y + size * 0.3 };
+            if (box.x0 < 0 || box.x1 > width || box.y1 > height + size)
+                continue;
+            if (boxes.some((b) => box.x0 < b.x1 && box.x1 > b.x0 && box.y0 < b.y1 && box.y1 > b.y0))
+                continue;
+            boxes.push(box);
+            out.texts.push({ x, y, text, size });
+        }
+    }
+    if (edit?.selected !== undefined) {
+        const q = resolved.placed[edit.selected];
+        if (q !== undefined)
+            out.circles.push({ cx: at.px(q.x), cy: at.py(q.y), r: Math.max(q.r * at.scale, 5) + 5, kind: "select" });
+    }
+    for (const g of edit?.guides ?? [])
+        out.lines.push(g.axis === "x" ? { x1: at.px(g.at), y1: 0, x2: at.px(g.at), y2: height } : { x1: 0, y1: at.py(g.at), x2: width, y2: at.py(g.at) });
+    return out;
+}
+const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const f = (n) => (Math.round(n * 100) / 100).toString();
+/** The shapes as SVG elements (no wrapper), in the picture's pixels. */
+export function shapesSvg(s) {
+    const circles = s.circles.map((c) => (c.kind === "orbit" ? `<circle cx="${f(c.cx)}" cy="${f(c.cy)}" r="${f(c.r)}" fill="none" stroke="#9fb4d6" stroke-opacity="0.45" stroke-width="1"/>` : `<circle cx="${f(c.cx)}" cy="${f(c.cy)}" r="${f(c.r)}" fill="none" stroke="#6ab7ff" stroke-width="2" stroke-dasharray="5 4"/>`));
+    const lines = s.lines.map((l) => `<line x1="${f(l.x1)}" y1="${f(l.y1)}" x2="${f(l.x2)}" y2="${f(l.y2)}" stroke="#ff5fa8" stroke-width="1" stroke-dasharray="4 3"/>`);
+    const texts = s.texts.map((t) => `<text x="${f(t.x)}" y="${f(t.y)}" font-size="${f(t.size)}" text-anchor="middle" font-family="system-ui,sans-serif" fill="#f2f6ff" stroke="#050914" stroke-width="3" stroke-opacity="0.8" paint-order="stroke" stroke-linejoin="round">${esc(t.text)}</text>`);
+    return [...circles, ...lines, ...texts].join("");
+}
+/** The shapes on a 2D canvas. */
+export function drawShapes(ctx, s, ratio = 1) {
+    ctx.save();
+    ctx.scale(ratio, ratio);
+    for (const c of s.circles) {
+        ctx.beginPath();
+        ctx.arc(c.cx, c.cy, c.r, 0, Math.PI * 2);
+        if (c.kind === "orbit") {
+            ctx.strokeStyle = "rgba(159,180,214,0.45)";
+            ctx.lineWidth = 1;
+            ctx.setLineDash([]);
+        }
+        else {
+            ctx.strokeStyle = "#6ab7ff";
+            ctx.lineWidth = 2;
+            ctx.setLineDash([5, 4]);
+        }
+        ctx.stroke();
+    }
+    ctx.setLineDash([4, 3]);
+    ctx.strokeStyle = "#ff5fa8";
+    ctx.lineWidth = 1;
+    for (const l of s.lines) {
+        ctx.beginPath();
+        ctx.moveTo(l.x1, l.y1);
+        ctx.lineTo(l.x2, l.y2);
+        ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.textAlign = "center";
+    ctx.lineJoin = "round";
+    for (const t of s.texts) {
+        ctx.font = `${t.size}px system-ui, sans-serif`;
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = "rgba(5,9,20,0.8)";
+        ctx.strokeText(t.text, t.x, t.y);
+        ctx.fillStyle = "#f2f6ff";
+        ctx.fillText(t.text, t.x, t.y);
+    }
+    ctx.restore();
+}
+/**
+ * The portrait in the line look: one SVG, the bodies drawn one over another in the order of the list, each as a nested picture sized so its disc has the radius the layout gave it.
+ * Anything a body's rings or glow need past the disc is inside its own picture.
+ */
+export function lineScene(p, resolved, width, height, poses, lang = "en") {
+    const at = toScreen(resolved.camera, width, height);
+    const dark = p.bg !== "transparent";
+    const stroke = dark ? undefined : "#33415c";
+    const parts = [];
+    resolved.placed.forEach((q, i) => {
+        const facts = BODIES[q.body];
+        const reach = Math.max(facts.rings === undefined ? 1 : Math.max(...facts.rings.map((b) => b.to)) / facts.radiusKm, q.body === "sun" ? 1.08 : 1);
+        const fill = 0.94 / reach;
+        const rPx = Math.max(q.r * at.scale, 1.2);
+        const side = (2 * rPx) / fill;
+        const inner = lineSvg(q.body, { size: 480, fill, labels: false, pose: poses[i], lang, ...(stroke !== undefined ? { stroke } : {}) });
+        const nested = inner.replace(/^<svg [^>]*>/, () => `<svg x="${f(at.px(q.x) - side / 2)}" y="${f(at.py(q.y) - side / 2)}" width="${f(side)}" height="${f(side)}" viewBox="0 0 480 480" role="img" aria-label="${esc(facts.name[lang])}" overflow="hidden">`);
+        parts.push(nested);
+    });
+    return parts.join("");
+}

package/dist/portrait/pose.d.ts

@@ -0,0 +1,13 @@
+import { type Pose } from "../ephemeris.ts";
+import { type BodyId } from "../facts.ts";
+import { type Item } from "./model.ts";
+/** The pitch a body is drawn at when none is chosen: a little over the pole, more for a body with rings. */
+export declare const defaultPitch: (id: BodyId) => number;
+/**
+ * The pole and the prime meridian of a body in the picture's frame (x right, y up, z toward the viewer), after `seconds` of its own turning.
+ * With a date the body is turned as the Earth sees it then, and the item's `spin` is how far it is turned from that (from the longitude its portrait shows).
+ */
+export declare function poseOf(item: Pick<Item, "body" | "spin" | "tilt" | "pitch" | "turn">, ms: number | undefined, seconds: number, light: {
+    az: number;
+    el: number;
+}): Pose;

package/dist/portrait/pose.js

@@ -0,0 +1,31 @@
+// How one body of a portrait is turned: from its own spin, tilt and pitch, or from the sky at a date, then carried forward by its own turning. Pure.
+import { apparent } from "../ephemeris.js";
+import { BODIES } from "../facts.js";
+import { portrait } from "../pose.js";
+import { turn } from "../vec.js";
+import { lightVector } from "./model.js";
+/** The pitch a body is drawn at when none is chosen: a little over the pole, more for a body with rings. */
+export const defaultPitch = (id) => (BODIES[id].rings !== undefined ? 22 : 12);
+/**
+ * The pole and the prime meridian of a body in the picture's frame (x right, y up, z toward the viewer), after `seconds` of its own turning.
+ * With a date the body is turned as the Earth sees it then, and the item's `spin` is how far it is turned from that (from the longitude its portrait shows).
+ */
+export function poseOf(item, ms, seconds, light) {
+    const facts = BODIES[item.body];
+    const toSun = lightVector(light);
+    let pole;
+    let meridian;
+    if (ms !== undefined) {
+        const sky = apparent(item.body, ms);
+        pole = sky.pole;
+        meridian = turn(sky.meridian, pole, -(item.spin - (facts.showLon ?? 0)));
+    }
+    else {
+        const base = portrait(item.body, { spin: item.spin, pitch: item.pitch ?? defaultPitch(item.body), ...(item.tilt !== undefined ? { tilt: item.tilt } : {}) });
+        pole = base.pole;
+        meridian = base.meridian;
+    }
+    if (item.turn !== 0 && seconds !== 0)
+        meridian = turn(meridian, pole, item.turn * seconds);
+    return { pole, meridian, light: toSun };
+}

package/dist/portrait/scene3d.d.ts

@@ -0,0 +1,38 @@
+import type { Item3D, Scene3D } from "@johnmorrisdotca/kazoku-ui/renderer";
+import type { ThreeParts } from "../scene/body.ts";
+import "../bodies/all.ts";
+import { type Placed, type Resolved } from "./model.ts";
+/** Everything that decides how the scene looks at one draw. */
+export interface PortraitDraw {
+    placed: readonly Placed[];
+    camera: Resolved["camera"];
+    light: {
+        az: number;
+        el: number;
+    };
+    look: "realistic" | "painted";
+    /** The moment the sky is shown at, in milliseconds since 1970, or `undefined` for a portrait. */
+    ms: number | undefined;
+    /** Seconds of each body's own turning so far. */
+    seconds: number;
+    shadows: boolean;
+}
+export interface PortraitScene extends Scene3D {
+    apply(state: PortraitDraw): void;
+    /** Call `fn` right after the next draw, in the same task, while the canvas still holds the picture (it does not keep it after). */
+    afterDraw(fn: () => void): void;
+    /** The paintings the scene holds now. */
+    readonly bodies: number;
+}
+export interface PortraitItemOptions {
+    /** A key that changes whenever the picture would: the renderer keeps one still for each key. */
+    key: string;
+    state(): PortraitDraw;
+    textureBase(): string;
+    farBase(): string;
+    redraw(): void;
+}
+/**
+ * The item the shared renderer shows for a portrait: its `build` makes the scene, whose `apply` is handed each state.
+ */
+export declare function createPortraitItem(options: PortraitItemOptions): Item3D<ThreeParts>;

package/dist/portrait/scene3d.js

@@ -0,0 +1,123 @@
+import { createPainter } from "../scene/painter.js";
+import "../bodies/all.js";
+import { lightVector } from "./model.js";
+import { poseOf } from "./pose.js";
+/** The smallest a body is drawn, in CSS pixels across its radius, so a body at true scale is still a dot you can see. */
+const MIN_RADIUS_PX = 1.2;
+const occludersFor = (placed, index) => {
+    const me = placed[index];
+    const list = [];
+    placed.forEach((other, j) => {
+        if (j === index || other.body === "sun" || other.r <= 0)
+            return;
+        const dx = (other.x - me.x) / me.r;
+        const dy = (other.y - me.y) / me.r;
+        const rr = other.r / me.r;
+        const d2 = dx * dx + dy * dy;
+        if (d2 > 3600 || rr < 0.01)
+            return;
+        list.push({ d2, angle: (rr * rr) / Math.max(d2, 1e-6), o: [dx, dy, 0, rr] });
+    });
+    return list.sort((a, b) => b.angle - a.angle).slice(0, 6).map((l) => l.o);
+};
+/**
+ * The item the shared renderer shows for a portrait: its `build` makes the scene, whose `apply` is handed each state.
+ */
+export function createPortraitItem(options) {
+    return {
+        key: options.key,
+        build({ three: T, width, height }) {
+            const painter = createPainter({ textureBase: options.textureBase(), farBase: options.farBase() });
+            const scene = new T.Scene();
+            const camera = new T.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
+            const held = new Map();
+            let viewWidth = width;
+            let viewHeight = height;
+            let latest = options.state();
+            let after = [];
+            const ratio = () => Math.min(2, globalThis.devicePixelRatio || 1);
+            const drop = (id) => {
+                const one = held.get(id);
+                if (one === undefined)
+                    return;
+                scene.remove(one.painting.object);
+                one.painting.dispose();
+                held.delete(id);
+            };
+            const apply = (state) => {
+                latest = state;
+                const { placed, camera: cam } = state;
+                const present = new Set(placed.map((p) => p.body));
+                for (const id of [...held.keys()])
+                    if (!present.has(id) || held.get(id).look !== state.look)
+                        drop(id);
+                const aspect = viewWidth / Math.max(1, viewHeight);
+                const halfH = cam.h;
+                const halfW = halfH * aspect;
+                const pxPerUnit = viewHeight / (2 * halfH);
+                const slot = 7 * Math.max(1e-6, ...placed.map((p) => Math.max(p.r, MIN_RADIUS_PX / pxPerUnit)));
+                const far = (placed.length + 1) * slot;
+                const distance = far + 300 * Math.max(halfW, halfH);
+                camera.left = cam.x - halfW;
+                camera.right = cam.x + halfW;
+                camera.top = cam.y + halfH;
+                camera.bottom = cam.y - halfH;
+                camera.near = Math.max(1e-6, distance - far - slot);
+                camera.far = distance + slot;
+                camera.position.set(cam.x, cam.y, distance);
+                camera.updateProjectionMatrix();
+                const toSun = lightVector(state.light);
+                placed.forEach((p, i) => {
+                    let one = held.get(p.body);
+                    if (one === undefined) {
+                        const painting = painter.make(T, p.body, { look: state.look, invalidate: () => options.redraw(), ratio: ratio(), maxTexture: placed.length > 6 ? 1024 : 2048 });
+                        scene.add(painting.object);
+                        one = { painting, look: state.look };
+                        held.set(p.body, one);
+                    }
+                    const r = Math.max(p.r, MIN_RADIUS_PX / pxPerUnit);
+                    one.painting.object.position.set(p.x, p.y, i * slot);
+                    one.painting.object.scale.setScalar(r);
+                    const pose = poseOf(p, state.ms, state.seconds, state.light);
+                    one.painting.update({
+                        toSun,
+                        ms: state.ms ?? 0,
+                        radiusPx: r * pxPerUnit,
+                        pose: { pole: pose.pole, meridian: pose.meridian },
+                        ...(state.shadows ? { occluders: occludersFor(placed, i) } : {}),
+                    });
+                });
+            };
+            apply(latest);
+            return {
+                scene,
+                camera,
+                apply,
+                get bodies() {
+                    return held.size;
+                },
+                afterDraw(fn) {
+                    after.push(fn);
+                },
+                resize(w, h) {
+                    viewWidth = w;
+                    viewHeight = h;
+                    apply(latest);
+                },
+                update() {
+                    if (after.length > 0) {
+                        const run = after;
+                        after = [];
+                        queueMicrotask(() => run.forEach((fn) => fn()));
+                    }
+                    return false;
+                },
+                dispose() {
+                    for (const id of [...held.keys()])
+                        drop(id);
+                    scene.clear();
+                },
+            };
+        },
+    };
+}

package/dist/pose.d.ts

@@ -50,12 +50,14 @@ export declare const drawnTilt: (facts: BodyFacts) => number;
  * ```
  */
 export declare function portrait(id: BodyId, options?: PortraitOptions): Pose;
-/** A longitude and latitude (degrees) as a point on the body, in the viewer's frame (unit radius): x right, y up, z toward the viewer. The flattening squeezes it along the pole. */
-export declare function surfacePoint(pose: Pose, lon: number, lat: number, flattening?: number): Vec3;
+/** The semi-axes of a body that is not a spheroid, as fractions of its radius: along its longitude 0, along its east and along its pole. */
+export type Axes = readonly [number, number, number];
+/** A longitude and latitude (degrees) as a point on the body, in the viewer's frame (unit radius): x right, y up, z toward the viewer. The flattening squeezes it along the pole; `axes` shape a triaxial body instead. */
+export declare function surfacePoint(pose: Pose, lon: number, lat: number, flattening?: number, axes?: Axes): Vec3;
 /** The outward normal's z at a longitude and latitude: positive when that point faces the viewer. */
-export declare function facing(pose: Pose, lon: number, lat: number, flattening?: number): number;
-/** The silhouette of a body: its half-width, half-height along the pole's direction and the angle of the pole from straight up, clockwise, in degrees. */
-export declare function silhouette(pose: Pose, flattening: number): {
+export declare function facing(pose: Pose, lon: number, lat: number, flattening?: number, axes?: Axes): number;
+/** The silhouette of a body: its half-width, half-height along the pole's direction and the angle of the pole from straight up, clockwise, in degrees. With `axes` it is the outline of a triaxial body: its long half-width, its short one and the angle of the long one from straight right, clockwise. */
+export declare function silhouette(pose: Pose, flattening: number, axes?: Axes): {
     a: number;
     b: number;
     angle: number;

package/dist/pose.js

@@ -43,26 +43,40 @@ export function portrait(id, options = {}) {
     const light = unit([-Math.sin(phase) * Math.cos(lift), Math.sin(lift), Math.cos(phase) * Math.cos(lift)]);
     return { pole, meridian, light };
 }
-/** A longitude and latitude (degrees) as a point on the body, in the viewer's frame (unit radius): x right, y up, z toward the viewer. The flattening squeezes it along the pole. */
-export function surfacePoint(pose, lon, lat, flattening = 0) {
+/** A longitude and latitude (degrees) as a point on the body, in the viewer's frame (unit radius): x right, y up, z toward the viewer. The flattening squeezes it along the pole; `axes` shape a triaxial body instead. */
+export function surfacePoint(pose, lon, lat, flattening = 0, axes) {
     const cl = Math.cos(lat * RAD);
     const east = cross(pose.pole, pose.meridian);
-    const x = cl * Math.cos(lon * RAD);
-    const y = cl * Math.sin(lon * RAD);
-    const z = Math.sin(lat * RAD) * (1 - flattening);
+    const x = cl * Math.cos(lon * RAD) * (axes?.[0] ?? 1);
+    const y = cl * Math.sin(lon * RAD) * (axes?.[1] ?? 1);
+    const z = Math.sin(lat * RAD) * (axes?.[2] ?? 1 - flattening);
     return [pose.meridian[0] * x + east[0] * y + pose.pole[0] * z, pose.meridian[1] * x + east[1] * y + pose.pole[1] * z, pose.meridian[2] * x + east[2] * y + pose.pole[2] * z];
 }
 /** The outward normal's z at a longitude and latitude: positive when that point faces the viewer. */
-export function facing(pose, lon, lat, flattening = 0) {
+export function facing(pose, lon, lat, flattening = 0, axes) {
     const cl = Math.cos(lat * RAD);
     const east = cross(pose.pole, pose.meridian);
-    const x = cl * Math.cos(lon * RAD);
-    const y = cl * Math.sin(lon * RAD);
-    const z = Math.sin(lat * RAD) / (1 - flattening);
+    const x = (cl * Math.cos(lon * RAD)) / (axes?.[0] ?? 1);
+    const y = (cl * Math.sin(lon * RAD)) / (axes?.[1] ?? 1);
+    const z = Math.sin(lat * RAD) / (axes?.[2] ?? 1 - flattening);
     return pose.meridian[2] * x + east[2] * y + pose.pole[2] * z;
 }
-/** The silhouette of a body: its half-width, half-height along the pole's direction and the angle of the pole from straight up, clockwise, in degrees. */
-export function silhouette(pose, flattening) {
+/** The silhouette of a body: its half-width, half-height along the pole's direction and the angle of the pole from straight up, clockwise, in degrees. With `axes` it is the outline of a triaxial body: its long half-width, its short one and the angle of the long one from straight right, clockwise. */
+export function silhouette(pose, flattening, axes) {
+    if (axes !== undefined) {
+        const east = cross(pose.pole, pose.meridian);
+        const cols = [
+            [pose.meridian[0] * axes[0], pose.meridian[1] * axes[0]],
+            [east[0] * axes[1], east[1] * axes[1]],
+            [pose.pole[0] * axes[2], pose.pole[1] * axes[2]],
+        ];
+        const sxx = cols.reduce((t, c) => t + c[0] * c[0], 0);
+        const syy = cols.reduce((t, c) => t + c[1] * c[1], 0);
+        const sxy = cols.reduce((t, c) => t + c[0] * c[1], 0);
+        const mean = (sxx + syy) / 2;
+        const spread = Math.sqrt(((sxx - syy) / 2) ** 2 + sxy * sxy);
+        return { a: Math.sqrt(mean + spread), b: Math.sqrt(Math.max(0, mean - spread)), angle: -0.5 * Math.atan2(2 * sxy, sxx - syy) * DEG };
+    }
     const c = 1 - flattening;
     const s = pose.pole[2];
     return { a: 1, b: Math.sqrt(c * c * (1 - s * s) + s * s), angle: Math.atan2(pose.pole[0], pose.pole[1]) * DEG };

package/dist/scene/body.d.ts

@@ -4,7 +4,7 @@ import type { Pose } from "../ephemeris.ts";
 import { type BodyFacts, type BodyId } from "../facts.ts";
 import { type BodyLook } from "./look.ts";
 /** The parts of three.js the bodies use: a page may hand over a module with only these (see `setThreeLoader`). */
-export type ThreeParts = Pick<typeof THREE, "AdditiveBlending" | "BufferAttribute" | "BufferGeometry" | "ClampToEdgeWrapping" | "DataTexture" | "DoubleSide" | "Line" | "LineBasicMaterial" | "LinearFilter" | "Mesh" | "NoColorSpace" | "OrthographicCamera" | "PlaneGeometry" | "RepeatWrapping" | "RGBAFormat" | "RingGeometry" | "Scene" | "ShaderMaterial" | "SphereGeometry" | "TextureLoader" | "Vector2" | "Vector3" | "WebGLRenderer">;
+export type ThreeParts = Pick<typeof THREE, "AdditiveBlending" | "BufferAttribute" | "BufferGeometry" | "ClampToEdgeWrapping" | "DataTexture" | "DoubleSide" | "Group" | "Line" | "LineBasicMaterial" | "LinearFilter" | "Mesh" | "NoColorSpace" | "OrthographicCamera" | "PlaneGeometry" | "RepeatWrapping" | "RGBAFormat" | "RingGeometry" | "Scene" | "ShaderMaterial" | "SphereGeometry" | "TextureLoader" | "Vector2" | "Vector3" | "WebGLRenderer">;
 /** One moon in a system view: its place in planet radii (viewer's frame) and the points of its orbit, if they changed. */
 export interface MoonDraw {
     id: BodyId;

package/dist/scene/glsl.js

@@ -71,7 +71,7 @@ ${painted ? "uniform sampler2D uMap;" : ""}
 varying vec3 vObj;
 varying vec3 vN;
 varying vec3 vW;
-${world ? "varying vec3 vV;" : ""}
+${world ? "varying vec3 vV;\nuniform int uOccN;\nuniform vec4 uOcc[6];" : ""}
 ${PRELUDE}
 ${surface}
 void main() {
@@ -104,6 +104,15 @@ void main() {
       }
     }
   }
+${world ? `  for (int i = 0; i < 6; i++) {
+    if (i >= uOccN) break;
+    vec3 oc = uOcc[i].xyz - vW;
+    float along = dot(oc, uLight);
+    if (along > 0.0) {
+      float miss = length(oc - along * uLight);
+      diff *= 1.0 - 0.92 * (1.0 - smoothstep(uOcc[i].w * 0.8, uOcc[i].w * 1.04 + 0.01, miss));
+    }
+  }` : ""}
   vec3 alb = pow(s.rgb, vec3(2.2));
   vec3 lit = alb * (uAmbient + (1.0 - uAmbient) * diff * 1.18);
   float rim = pow(1.0 - mu, uAtmosPow);

package/dist/scene/painter.d.ts

@@ -63,6 +63,13 @@ export interface PaintInfo {
     toSun: Vec3;
     ms: number;
     radiusPx: number;
+    /** The pole and the prime meridian to draw instead of the body's real ones at `ms` (a portrait's own pose), in the scene's axes. */
+    pose?: {
+        pole: Vec3;
+        meridian: Vec3;
+    };
+    /** Spheres that may shade this body from the Sun: x, y, z (from this body's centre) and radius, all in this body's radii, in the scene's axes. At most six are used. */
+    occluders?: readonly (readonly [number, number, number, number])[];
 }
 /**
  * One body made by the painter: an object of radius 1 at the origin for the caller to move and scale.

package/dist/scene/painter.js

@@ -95,6 +95,8 @@ function paint(T, id, context, bases) {
             uRingTex: { value: null },
             uMap: { value: null },
             uScale: { value: 1 },
+            uOccN: { value: 0 },
+            uOcc: { value: new Float32Array(24) },
         };
     };
     const material = (painted) => {
@@ -280,17 +282,23 @@ function paint(T, id, context, bases) {
             light.set(info.toSun[0], info.toSun[1], info.toSun[2]);
             const scale = group.scale.x || 1;
             if (look.emissive !== true) {
-                const { pole, meridian } = orientation(id, info.ms);
+                const { pole, meridian } = info.pose ?? orientation(id, info.ms);
                 const east = cross(pole, meridian);
                 basis(mesh, east, pole, meridian, scaleX, scaleY, scaleZ);
                 if (ringMesh !== undefined)
                     basis(ringMesh, meridian, east, pole);
                 poleVec.set(pole[0], pole[1], pole[2]);
             }
+            const occluders = info.occluders ?? [];
+            const shaded = Math.min(6, occluders.length);
             for (const m of materials) {
                 m.uniforms.uLight.value.copy(light);
                 m.uniforms.uScale.value = scale;
                 m.uniforms.uRingN.value.copy(poleVec);
+                m.uniforms.uOccN.value = shaded;
+                const packed = m.uniforms.uOcc.value;
+                for (let i = 0; i < shaded; i += 1)
+                    packed.set(occluders[i], i * 4);
             }
             if (ringMaterial !== undefined) {
                 ringMaterial.uniforms.uLight.value.copy(light);

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.6.0";
+export declare const VERSION = "0.11.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.6.0";
+export const VERSION = "0.11.0";