@johnmorrisdotca/wakusei-planets 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.6.0 - 2026-11-03
+
+The demo's pickers, and a scale that is a scale.
+
+- **A compact picker** (MODULES-285): the ten bodies in one row, and when the one chosen has moons, its moons on the row below, in the same place; no long list down the page. The moons' own section is gone. Every picture in it is a picture, in the line, the realistic and the painted look: a test looks at all 35 (10 bodies and 25 moons) for blank and single-colour pictures. (The broken thumbnails of 0.3.0 were the tiles being drawn to scale, which 0.3.1 stopped.) The same picker is in "Put it in your page" (MODULES-286), so the body for the code is chosen beside the code; Copy's word can be read (it was ink on ink).
+- **The buttons under the view stay where they are** (MODULES-283): one push button for each body of the system (the planet and its moons), the chosen one pressed, and others pressed with it to see them side by side under the view, at equal sizes or at their true relative sizes (`span-km`), kept in the address (`?with=phobos,deimos&rel=1`). The orbit-distance layout is not made yet.
+- **To scale says what it is against** (MODULES-284): "Its planet" (for a moon), "Earth" or "Sun", and draws it so: Deimos is 0.0018 times Mars's radius, a magnified picture beside it with a line, the caption says so. `?scale=1&ref=planet`.
+- **Deimos is drawn whole** (MODULES-287): an irregular body reaches past its mean radius along its longest axis, and its picture was cut off at the sides.
+- **Every body is fitted by its globe** (MODULES-293): at about half the view's height, the same for all, so Saturn's rings, the Sun's glow and a haze have room, and the Sun is no smaller than a planet. `fit="tight"` on an element gives the old fit (thumbnails).
+- **The sky shows the real phase** (MODULES-294): in "As seen from Earth" the night side is dark (no wrapped terminator, no rim of air round it), so Venus a few days from new is a thin crescent, not a full disc.
+- **A line under every choice** (MODULES-298) says what it does, in English and Japanese, always on the page and tied to its button with `aria-describedby`.
+
 ## 0.5.1 - 2026-11-03
 
 - kazoku-ui 0.12.0: the demo's view controls have a zoom slider, on top of 0.11's Centre button and exact grab.

package/README.md

@@ -13,9 +13,9 @@ A clean line drawing, a shaded realistic drawing, or a painted surface map, with
 
 <p align="center"><a href="https://johnmorrisdotca.github.io/wakusei-planets/"><strong>Open the demo →</strong></a> · <a href="https://johnmorrisdotca.github.io/wakusei-planets/embed.html">Embed page</a> · <a href="https://johnmorrisdotca.github.io/wakusei-planets/docs/">Docs</a></p>
 
-<p align="center"><img alt="Jupiter and Saturn drawn in the realistic look, and Saturn as a line drawing" src="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/v0.5.1/docs/images/hero-desk.png" width="640"></p>
+<p align="center"><img alt="Jupiter and Saturn drawn in the realistic look, and Saturn as a line drawing" src="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/v0.6.0/docs/images/hero-desk.png" width="640"></p>
 
-<p align="center"><img alt="Every body at one scale, the Earth among them: each small body has a magnified picture joined by a line, and the Sun shows only its edge" src="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/v0.5.1/docs/images/lineup-desk.png" width="640"></p>
+<p align="center"><img alt="Every body at one scale, the Earth among them: each small body has a magnified picture joined by a line, and the Sun shows only its edge" src="https://raw.githubusercontent.com/johnmorrisdotca/wakusei-planets/v0.6.0/docs/images/lineup-desk.png" width="640"></p>
 
 ## One minute
 

package/dist/element.d.ts

@@ -25,7 +25,7 @@ export type WakuseiState = "line" | "loading" | "still" | "live" | "lost" | "una
  * console.log(TEXTURE_BASE);
  * ```
  */
-export declare const TEXTURE_BASE = "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets@0.5.1/dist/textures/";
+export declare const TEXTURE_BASE = "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets@0.6.0/dist/textures/";
 /**
  * Where the sharpest surface pictures are: the files of this exact version in the repository, on jsDelivr's GitHub address. The npm package holds only the two smaller widths, so a page that
  * never zooms in never fetches them. Set `texture-far-base` on an element to serve them yourself.
@@ -37,7 +37,7 @@ export declare const TEXTURE_BASE = "https://cdn.jsdelivr.net/npm/@johnmorrisdot
  * console.log(TEXTURE_FAR_BASE);
  * ```
  */
-export declare const TEXTURE_FAR_BASE = "https://cdn.jsdelivr.net/gh/johnmorrisdotca/wakusei-planets@v0.5.1/textures/";
+export declare const TEXTURE_FAR_BASE = "https://cdn.jsdelivr.net/gh/johnmorrisdotca/wakusei-planets@v0.6.0/textures/";
 /**
  * The `<wakusei-body>` custom element: a body of the solar system, drawn in a look.
  *

package/dist/element.js

@@ -48,6 +48,8 @@ const readTime = (value) => {
     return Number.isFinite(ms) ? ms : undefined;
 };
 /** The half-width of the picture, in body radii, for a body alone, with a scale to another body, or with its moons. */
+/** The half-width of a body's picture, in its radii, when it has no scale of its own: the globe takes a little under half the height, so its rings, glow and haze have room round it. */
+const ROOM = 2.2;
 function extentOf(id, options) {
     const f = BODIES[id];
     if (options.moons === true && id in BODIES && f.parent === undefined && id !== "sun") {
@@ -59,7 +61,11 @@ function extentOf(id, options) {
         return options.spanKm / f.radiusKm;
     if (options.scaleTo !== undefined)
         return (BODIES[options.scaleTo].radiusKm * 1.06) / f.radiusKm;
-    return Math.max(id === "sun" ? 1.55 : 1.06, ringReach(f) * 1.04);
+    if (options.tight !== true)
+        return ROOM;
+    // tight (a thumbnail): the picture holds the body and its rings, and an irregular body (Deimos, Phobos, Nix, Hydra) whole along its longest axis
+    const longest = f.axesKm === undefined ? 1 : Math.max(...f.axesKm) / f.radiusKm;
+    return Math.max(1.06, ringReach(f) * 1.04, longest * 1.06);
 }
 /** Keep the body in the picture: at least a quarter of its width stays inside the edge, however far the view is moved. `pan` is in half-widths of the picture. */
 function clampPan(pan, extent, zoom) {
@@ -91,7 +97,7 @@ const TEMPLATE = `<style>
  * ```
  */
 export class WakuseiBody extends HTMLElement {
-    static observedAttributes = ["body", "look", "size", "time", "tilt", "pitch", "phase", "meridian", "turn", "rate", "moons", "range", "scale-to", "span-km", "live", "texture-base", "texture-far-base", "lang", "labels"];
+    static observedAttributes = ["body", "look", "size", "time", "tilt", "pitch", "phase", "meridian", "turn", "rate", "moons", "range", "scale-to", "span-km", "fit", "live", "texture-base", "texture-far-base", "lang", "labels"];
     #stage;
     #state = "line";
     #renderer;
@@ -293,7 +299,7 @@ export class WakuseiBody extends HTMLElement {
         const scaleTo = this.getAttribute("scale-to");
         const range = this.hasAttribute("range") ? num(this.getAttribute("range"), 0) : undefined;
         const span = num(this.getAttribute("span-km"), 0);
-        const extent = extentOf(this.body, { ...(span > 0 ? { spanKm: span } : {}), ...(scaleTo !== null && scaleTo in BODIES ? { scaleTo } : {}), moons: r.moons, ...(range !== undefined && range > 0 ? { range } : {}) });
+        const extent = extentOf(this.body, { ...(this.getAttribute("fit") === "tight" ? { tight: true } : {}), ...(span > 0 ? { spanKm: span } : {}), ...(scaleTo !== null && scaleTo in BODIES ? { scaleTo } : {}), moons: r.moons, ...(range !== undefined && range > 0 ? { range } : {}) });
         const moons = r.moons
             ? frame.moons
                 .filter((m) => m.distance <= extent * 1.05)
@@ -303,7 +309,7 @@ export class WakuseiBody extends HTMLElement {
                 return { id: m.id, x: rotated[0], y: rotated[1], z: rotated[2], ...(orbit !== undefined ? { orbit: tiltBy === 0 ? orbit : this.#tiltedOrbit(m.id, orbit, tiltBy) } : {}) };
             })
             : undefined;
-        return { pose: { pole, meridian, light }, extent, zoom: this.#zoom, panX: clampPan(this.#panX, extent, this.#zoom), panY: clampPan(this.#panY, extent, this.#zoom), ...(moons !== undefined ? { moons } : {}) };
+        return { pose: { pole, meridian, light }, extent, sky: frame.time !== undefined, zoom: this.#zoom, panX: clampPan(this.#panX, extent, this.#zoom), panY: clampPan(this.#panY, extent, this.#zoom), ...(moons !== undefined ? { moons } : {}) };
     }
     #tilted = new Map();
     #tiltedOrbit(id, orbit, tilt) {
@@ -442,7 +448,7 @@ export class WakuseiBody extends HTMLElement {
             size,
             pose: scene.pose,
             ...(r.moons ? { moons: true, ...(frame.time !== undefined ? { time: frame.time } : {}), range: scene.extent, moonsAt: (scene.moons ?? []).map((m) => ({ id: m.id, x: m.x, y: m.y, z: m.z, distance: Math.hypot(m.x, m.y, m.z) })), orbits: new Map((scene.moons ?? []).filter((m) => m.orbit !== undefined).map((m) => [m.id, m.orbit])) } : {}),
-            ...(scaleTo !== null || this.hasAttribute("span-km") ? { fill: this.#fill() } : {}),
+            ...(scaleTo !== null || this.hasAttribute("span-km") || this.getAttribute("fit") !== "tight" ? { fill: this.#fill() } : {}),
             ...(this.getAttribute("lang") === "ja" ? { lang: "ja" } : {}),
             ...(this.getAttribute("labels") === "off" ? { labels: false } : {}),
             ...(stroke !== "" ? { stroke } : {}),
@@ -532,7 +538,7 @@ export class WakuseiBody extends HTMLElement {
         const scaleTo = this.getAttribute("scale-to");
         const span = num(this.getAttribute("span-km"), 0);
         const half = span > 0 ? span : scaleTo !== null && scaleTo in BODIES ? BODIES[scaleTo].radiusKm * 1.06 : 0;
-        return half > 0 ? Math.max(0.01, Math.min(1, BODIES[this.body].radiusKm / half)) : 1;
+        return half > 0 ? Math.max(0.01, Math.min(1, BODIES[this.body].radiusKm / half)) : this.getAttribute("fit") === "tight" ? 1 : 1 / ROOM;
     }
     /** Make the view's still, once, when it is in sight. */
     #still() {

package/dist/line.js

@@ -227,7 +227,7 @@ export function lineSvg(id, options = {}) {
     if (options.moons === true && facts.parent === undefined && id !== "sun")
         return systemSvg(id, options, size, stroke, paper, hair, head);
     const pose = poseFor(id, options);
-    const reach = Math.max(ringReach(facts), id === "sun" ? 1.26 : 1);
+    const reach = Math.max(ringReach(facts), id === "sun" ? 1.08 : 1);
     const fit = options.fill === undefined ? 0.94 / reach : options.fill;
     const zoom = options.zoom ?? 1;
     const frame = { cx: (size / 2) * (1 - (options.panX ?? 0)), cy: (size / 2) * (1 + (options.panY ?? 0)), r: (size / 2) * fit * zoom };

package/dist/scene/body.d.ts

@@ -23,6 +23,8 @@ export interface SceneState {
     panX: number;
     panY: number;
     moons?: readonly MoonDraw[];
+    /** The body is drawn as the sky shows it at a date: its real phase, with no light on the night side from a wrapped terminator or a rim of air. */
+    sky?: boolean;
     /** The smallest a moon is drawn, in CSS pixels across its radius. Default 2.5. */
     minMoonPx?: number;
     /** The colour of the orbit lines, `#rrggbb`. */

package/dist/scene/body.js

@@ -23,6 +23,7 @@ function makeBodyMaterial(T, look, painted) {
             uWrap: { value: look.wrap ?? (a === undefined ? 0.04 : 0.3) },
             uAtmos: { value: col3(T, a?.colour ?? [0, 0, 0]) },
             uAtmosPow: { value: a?.power ?? 3 },
+            uRimBase: { value: 0.12 },
             uEmissive: { value: look.emissive === true ? 1 : 0 },
             uRingN: { value: new T.Vector3(0, 1, 0) },
             uRingR: { value: new T.Vector2(1, 2) },
@@ -56,6 +57,8 @@ export function createBodyItem(options) {
             const geometry = assets.acquire("wk:sphere", () => new T.SphereGeometry(1, 128, 64), (g) => g.dispose());
             const shader = assets.acquire(`wk:body:${options.id}:r`, () => makeBodyMaterial(T, look, false), (m) => m.dispose());
             const paintedMaterial = wantPainted ? assets.acquire(`wk:body:${options.id}:p`, () => makeBodyMaterial(T, look, true), (m) => m.dispose()) : undefined;
+            const baseWrap = look.wrap ?? (look.atmosphere === undefined ? 0.04 : 0.3);
+            const baseAmbient = look.ambient ?? 0.04;
             const scene = new T.Scene();
             const camera = new T.OrthographicCamera(-1, 1, 1, -1, 0.1, 400);
             camera.position.set(0, 0, 200);
@@ -279,8 +282,15 @@ export function createBodyItem(options) {
                         mat.uniforms.uRingTex.value = ringTexture;
                     }
                 }
-                for (const mat of [shader, paintedMaterial])
-                    mat?.uniforms.uLight.value.copy(v3(T, state.pose.light));
+                for (const mat of [shader, paintedMaterial]) {
+                    if (mat === undefined)
+                        continue;
+                    mat.uniforms.uLight.value.copy(v3(T, state.pose.light));
+                    const sky = state.sky === true;
+                    mat.uniforms.uWrap.value = sky ? 0.02 : (mat === paintedMaterial ? baseWrap : baseWrap);
+                    mat.uniforms.uAmbient.value = sky ? 0.012 : baseAmbient;
+                    mat.uniforms.uRimBase.value = sky ? 0.02 : 0.12;
+                }
                 if (glow !== undefined)
                     glow.scale.setScalar(1);
                 // a sharper picture, when the disc is big enough to show it

package/dist/scene/glsl.js

@@ -61,6 +61,7 @@ uniform float uLimb;
 uniform float uWrap;
 uniform vec3 uAtmos;
 uniform float uAtmosPow;
+uniform float uRimBase;
 uniform float uEmissive;
 uniform vec3 uRingN;
 uniform vec2 uRingR;
@@ -106,7 +107,7 @@ void main() {
   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);
-  lit += pow(uAtmos, vec3(2.2)) * rim * (0.12 + 0.88 * clamp(dg * 1.6 + 0.35, 0.0, 1.0));
+  lit += pow(uAtmos, vec3(2.2)) * rim * (uRimBase + (1.0 - uRimBase) * clamp(dg * 1.6 + 0.35, 0.0, 1.0));
   lit *= mix(1.0, pow(mu, 0.45), uLimb);
   gl_FragColor = vec4(pow(lit, vec3(1.0 / 2.2)), 1.0);
 }`;

package/dist/scene/painter.js

@@ -87,6 +87,7 @@ function paint(T, id, context, bases) {
             uWrap: { value: look.wrap ?? (a === undefined ? 0.04 : 0.3) },
             uAtmos: { value: new T.Vector3(...(a?.colour ?? [0, 0, 0])) },
             uAtmosPow: { value: a?.power ?? 3 },
+            uRimBase: { value: 0.12 },
             uEmissive: { value: look.emissive === true ? 1 : 0 },
             uRingN: { value: new T.Vector3(0, 1, 0) },
             uRingR: { value: new T.Vector2(1, 2) },

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/wakusei-planets",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Wakusei Planets 惑星 — The Sun, planets and moons for the web: each as a clean line drawing, a shaded realistic drawing or a painted surface map, with real sizes, axial tilt and rotation as data, and positions of the moons for any date and time. SVG for the lines, three.js (optional) for the rest.",
   "keywords": [
     "planets",