@johnmorrisdotca/wakusei-planets 0.1.0 → 0.3.1

package/CHANGELOG.md

@@ -1,6 +1,34 @@
 # Changelog
 
-## Unreleased
+## 0.3.1
+
+The Earth is a body like the others, and "To scale" is a comparison.
+
+- **The Earth draws in every look.** In the realistic and painted looks the big view was empty and the row showed chikyu-earth's line globe, because the Earth was handed to chikyu-earth's own live element (0.7.0 here, a second WebGL context, no still). It is now drawn by this package like every other body, from NASA's Blue Marble picture (`earth-512`, `-1024` and `-2048`; the package grows by 0.08 MB), through the page's one WebGL context, with a still in the row. Both looks use the picture (an honest shaded Earth cannot be worked out from numbers), with a rim of air. Only the line look is chikyu-earth's globe. The Earth is in `/all`. chikyu-earth is now `^0.10.0` (it was `^0.7.0`).
+- **"To scale" is a lineup** (section "To scale" in the demo): every body at the same scale in the same size of picture, a magnified picture joined by a line for each body too small to see, Saturn's rings whole, the Sun as the curved edge it is, the Earth at its true size. The tiles in the row are never scaled any more (the Sun was a flat square, Mercury a dot). New attribute `span-km`: the half-width of a picture in kilometres, the same in every picture of a lineup.
+- **Every moon has a tile and a name** for `body` (`?body=io`), in the demo under its planet, with chips on each planet's and moon's view for its moons, its planet and its sister moons.
+- **The body cannot be dragged out of the view** (a quarter of it stays in), and Fit centres it and returns it to its first angle.
+- The README's pictures are absolute addresses pinned to the release's tag (npm's page showed a different picture from GitHub's), and a test holds it (`pnpm readme:images` pins them after a version bump).
+
+## 0.3.0
+
+Painted moons, Saturn's rings from Cassini, and a drag that goes the right way up.
+
+- **Painted maps of nine moons**, from public-domain imagery on Wikimedia Commons, each file's licence read from Commons and credited in `NOTICE.md`: the Moon (LRO WAC, NASA's SVS Moon Kit), Io (Galileo and Voyager), Europa (USGS), Ganymede and Callisto (USGS), Titan (Cassini's 938 nm map, coloured and low in contrast, said plainly in `NOTICE.md`), Rhea, Enceladus (Cassini colour maps, the false colour turned most of the way to grey) and Mimas (Cassini). 512 and 1024 pixel widths in the package, 2048 from the repository as for the planets (Europa's source is 1024 wide, so it has no 2048). Where a source does not state its longitudes, `NOTICE.md` says what the map was turned by and why. Tethys, Dione, Iapetus, Triton and Charon keep their drawn look: Cassini maps of the first three are not made yet, Triton's source gives no longitudes, and the only clean public-domain map of Charon is under a grid of labels.
+- **Saturn's rings in the painted look are a Cassini picture** (PIA07874, natural colour): one strip of 2048 colours and opacities from 74,794 to 137,035 km, 2.4 KB, with the real ringlets, the Cassini Division and the Encke gap. The realistic look keeps the strip made from the ring table. `PaintedMap.rings` names the strip; a strip that cannot load leaves the table's.
+- **The package's pictures grow from 0.53 MB to 1.31 MB** (the 512 and 1024 widths of 18 maps and the ring strip); the budget in `pnpm test:package` is 1.5 MB.
+- **The Moon is in `/all`.** `@johnmorrisdotca/wakusei-planets/all` left out `moons-earth`, so the demo's Moon was drawn as a plain ball.
+- **Io's Pele is at 105 degrees east** in the shaded look (it was at 90 degrees west; Pele is at 255 degrees west).
+- **A drag up moves the surface up** (it moved it down), in every look: the controls' tilt tipped the pole toward you as it grew, and now tips the top of the body away, so the near surface goes up, as in chikyu-earth 0.9.1. Drag right, the right arrow and the up arrow agree. Test (`e2e/drag.demo.ts`): a real pointer and real key presses on Mars (line, shaded, painted), Venus and the Moon (painted); the vertical checks fail on 0.2.0.
+- `scripts/make-textures.py` makes the moons and the ring strip too (`python3 scripts/make-textures.py io saturn-ring`) and writes each source's file page, licence and credit into `textures/SOURCES.json`.
+
+## 0.2.0
+
+The painted looks.
+
+- `look="painted"`: real surface maps of Mercury, Venus, Mars, Jupiter, Saturn, Uranus, Neptune, Pluto and the Sun, from public-domain NASA, USGS and JPL imagery, each file's licence checked and credited in `NOTICE.md`. Saturn, Uranus, Neptune and the Sun have no global map, so theirs are made from one photograph each (said plainly in `NOTICE.md`).
+- Small pictures by default: the 512 and 1024 pixel widths are in the package (0.53 MB in all); a view that is zoomed in fetches the 2048 pixel width from the repository by jsDelivr's GitHub address (`texture-far-base` to serve it yourself). A picture that fails to load leaves the shaded look drawn, and no picture is asked for twice.
+- A texture is freed when a sharper one replaces it and when the element leaves.
 
 ## 0.1.0
 

package/NOTICE.md

@@ -15,10 +15,35 @@ The tests compare the Galilean moons and four planets with astronomy-engine (MIT
 
 ## The Earth
 
-The Earth is drawn by chikyu-earth (MIT, by John Morris; https://github.com/johnmorrisdotca/chikyu-earth), an optional peer dependency: its own NOTICE.md has the terms of its outlines and its NASA pictures.
+The Earth's line drawing is chikyu-earth's own globe (MIT, by John Morris; https://github.com/johnmorrisdotca/chikyu-earth), an optional peer dependency: its own NOTICE.md has the terms of its outlines. The Earth's realistic and painted looks are drawn here, like every other body, from NASA's Blue Marble picture (below).
 
 ## Surface pictures
 
-None yet. When the painted looks arrive, each picture will be listed here with its source and licence, checked per file.
-
-NASA says its content "generally are not subject to copyright in the United States" and asks for acknowledgement (https://www.nasa.gov/nasa-brand-center/images-and-media/). This package is not endorsed by NASA and uses none of NASA's insignia or logotype.
+The painted looks' pictures in `textures/` (the 512 and 1024 pixel widths are also in the package's `dist/textures/`) are made by `scripts/make-textures.py` from public-domain imagery on Wikimedia Commons. The script reads each file's licence from Commons' own metadata and stops unless it is public domain or CC0; the originals are downloaded to `.cache/` and never kept in the repository. `textures/SOURCES.json` records the file pages, licences and credits as read on 2026-11-02.
+
+NASA says its content "generally are not subject to copyright in the United States" and asks for acknowledgement (https://www.nasa.gov/nasa-brand-center/images-and-media/); USGS and JPL maps are works of the United States government. This package is not endorsed by NASA, the USGS or any mission, and uses none of their insignia or logotypes.
+
+| Pictures | Body | Source file | Licence | Credit | What was done |
+|---|---|---|---|---|---|
+| `mercury-*.webp` | Mercury | [Mercury MESSENGER MDIS Basemap EnhancedColor Mosaic Global 32ppd.jpg](https://commons.wikimedia.org/wiki/File:Mercury_MESSENGER_MDIS_Basemap_EnhancedColor_Mosaic_Global_32ppd.jpg) | Public domain | Johns Hopkins Applied Physics Laboratory, Applied Coherent Technology Corporation | MESSENGER MDIS enhanced-colour global mosaic (USGS Astrogeology map), colour turned most of the way to grey and brightened; the polar rows with no data repeat the nearest real ones |
+| `venus-*.webp` | Venus | [Cylindrical Map of Venus.jpg](https://commons.wikimedia.org/wiki/File:Cylindrical_Map_of_Venus.jpg) | Public domain | NASA / Jet Propulsion Laboratory | Magellan radar global map in the orange tone of the Venera pictures (a colour for the radar's brightness, not a photograph of the surface under the clouds), turned so Maxwell Montes is at 3 degrees east |
+| `mars-*.webp` | Mars | [Mars Viking MDIM21 ClrMosaic 1km.jpg](https://commons.wikimedia.org/wiki/File:Mars_Viking_MDIM21_ClrMosaic_1km.jpg) | Public domain | NASA / Jet Propulsion Lab / USGS | Viking Orbiter MDIM 2.1 colour mosaic (USGS Astrogeology), as it is |
+| `jupiter-*.webp` | Jupiter | [Jupiter Cylindrical Map - Dec 2000 PIA07782.jpg](https://commons.wikimedia.org/wiki/File:Jupiter_Cylindrical_Map_-_Dec_2000_PIA07782.jpg) | Public domain | NASA/JPL/Space Science Institute | Cassini cylindrical map of December 2000 (PIA07782), as it is; the poles are the map's own |
+| `saturn-*.webp` | Saturn | [Saturn during Equinox.jpg](https://commons.wikimedia.org/wiki/File:Saturn_during_Equinox.jpg) | Public domain | NASA / JPL / Space Science Institute | made from Cassini's natural-colour portrait of 2009 (PIA11141): the visible hemisphere turned back onto the sphere, the limb darkening taken off, and each latitude's colour kept all the way round (a photograph has no longitudes to map), the ring shadow and the ring crossing the disc taken out |
+| `uranus-*.webp` | Uranus | [Uranus as seen by NASA's Voyager 2.tif](https://commons.wikimedia.org/wiki/File:Uranus_as_seen_by_NASA%27s_Voyager_2.tif) | Public domain | NASA | made from Voyager 2's portrait (PIA18182): one colour for the whole planet, a little brighter toward the south pole, because that photograph has no features to map |
+| `neptune-*.webp` | Neptune | [Neptune Full (original).jpg](https://commons.wikimedia.org/wiki/File:Neptune_Full_(original).jpg) | Public domain | NASA/JPL | made from Voyager 2's full-disk view (PIA01492): the bands of each latitude all the way round, and the Great Dark Spot with its bright companion clouds put back where the photograph shows them |
+| `pluto-*.webp` | Pluto | [Pluto color mapmosaic.jpg](https://commons.wikimedia.org/wiki/File:Pluto_color_mapmosaic.jpg) | Public domain | NASA / Johns Hopkins University Applied Physics Laboratory / Southwest Research Institute | New Horizons global colour map, turned so Sputnik Planitia is at 178 degrees east; the south, in the polar night New Horizons never saw, fades into a dark brown |
+| `sun-*.webp` | Sun | [SDO 20240810 000000 4096 HMIIC (HMI).jpg](https://commons.wikimedia.org/wiki/File:SDO_20240810_000000_4096_HMIIC_(HMI).jpg) | Public domain | Courtesy of NASA/SDO and the AIA, EVE, and HMI science teams. | SDO's HMI continuum picture of 10 August 2024: the visible hemisphere turned back onto the sphere, limb darkening taken off, and its sunspots and granulation kept on a flat orange, repeated on the far side |
+| `moon-*.webp` | The Moon | [CGI Moon Kit - Lroc color poles.tif](https://commons.wikimedia.org/wiki/File:CGI_Moon_Kit_-_Lroc_color_poles.tif) | Public domain | NASA's Scientific Visualization Studio (Ernie Wright, Noah Petro); Lunar Reconnaissance Orbiter Camera | LRO WAC colour map from the SVS Moon Kit (4720), as it is, longitude 0 in the middle |
+| `io-*.webp` | Io | [Io from Galileo and Voyager missions.jpg](https://commons.wikimedia.org/wiki/File:Io_from_Galileo_and_Voyager_missions.jpg) | Public domain | NASA / JPL (Galileo SSI and Voyager images); the file page names no author | Galileo and Voyager colour map between 57 degrees north and south, turned so Pele is at 105 degrees east; the poles it does not reach fade from the map's edge into its mean colour |
+| `europa-*.webp` | Europa | [Europa Voyager GalileoSSI global mosaic.jpg](https://commons.wikimedia.org/wiki/File:Europa_Voyager_GalileoSSI_global_mosaic.jpg) | Public domain | U.S. Geological Survey / Planetary Data System / Tammy Becker | USGS Voyager and Galileo grey-scale mosaic, longitude 0 in the middle (the source does not say; the Pwyll crater and the dark trailing side fall at 90 degrees east, the bright leading side at 90 degrees west); the unmapped rim of the south fades to its mean grey. The source is 1024 pixels wide, so there is no 2048 picture |
+| `ganymede-*.webp` | Ganymede | [Ganymede equatorial.jpg](https://commons.wikimedia.org/wiki/File:Ganymede_equatorial.jpg) | Public domain | USGS | USGS Voyager and Galileo colour mosaic (I-2762), the Mercator sheet for 57 degrees north and south, redrawn as an equirectangular map with longitude 0 in the middle (the source does not say; Galileo Regio falls at 140 degrees west); the poles are not on that sheet and fade from its edge into its mean colour |
+| `callisto-*.webp` | Callisto | [Callisto equatorial.jpg](https://commons.wikimedia.org/wiki/File:Callisto_equatorial.jpg) | Public domain | USGS | USGS Voyager and Galileo mosaic (I-2770), the Mercator sheet for 57 degrees north and south, redrawn as an equirectangular map with longitude 0 in the middle (the source does not say; Valhalla falls at 56 degrees west); the poles fade from its edge into its mean grey |
+| `titan-*.webp` | Titan | [Titan map April 2011 full.png](https://commons.wikimedia.org/wiki/File:Titan_map_April_2011_full.png) | Public domain | NASA / JPL / Space Science Institute | Cassini ISS 938 nm map (PIA14908), turned so longitude 0 is in the middle (the original is centred on 180). Titan's surface cannot be seen in visible light under its haze, so the picture is a colour for the infrared brightness, with its contrast turned down: it is not a photograph, as with Venus |
+| `earth-*.webp` | Earth | [Blue Marble: Next Generation with topography and bathymetry, September 2004](https://visibleearth.nasa.gov/images/73801) (Visible Earth 73801) | Public domain (NASA) | NASA Earth Observatory (Reto Stockli) | Resized from the 2048 pixel picture chikyu-earth already makes from the 5400 x 2700 original; the realistic and the painted looks both draw it, because an honest shaded Earth cannot be worked out from numbers |
+| `rhea-*.webp` | Rhea | [Rhea Color Map.jpg](https://commons.wikimedia.org/wiki/File:Rhea_Color_Map.jpg) | Public domain | NASA/JPL-Caltech/Space Science Institute/Lunar and Planetary Institute | Cassini global colour map (PIA18438), turned half way round so longitude 0 is in the middle (the source does not say where it is centred; the dark trailing side is put at 90 degrees east); the colours are false-colour (infrared, green, ultraviolet) and are turned about half way to grey |
+| `enceladus-*.webp` | Enceladus | [Enceladus Color Map.jpg](https://commons.wikimedia.org/wiki/File:Enceladus_Color_Map.jpg) | Public domain | NASA/JPL-Caltech/Space Science Institute/Lunar and Planetary Institute | Cassini global colour map (PIA18435), turned half way round the same way as Rhea's (the source does not say where it is centred; the fractured trailing terrain is put at 90 degrees east); the colours are false-colour (the blue of the tiger stripes is ultraviolet) and are turned most of the way to grey |
+| `mimas-*.webp` | Mimas | [Map of Mimas 2010-02 PIA12780.jpg](https://commons.wikimedia.org/wiki/File:Map_of_Mimas_2010-02_PIA12780.jpg) | Public domain | NASA/JPL/Space Science Institute | Cassini ISS map of February 2010 (PIA12780), cropped inside its frame and labels; Herschel is at 110 degrees west as its own scale says |
+| `saturn-ring-2048.webp` | Saturn's rings | [Saturn's rings in visible light and radio.jpg](https://commons.wikimedia.org/wiki/File:Saturn's_rings_in_visible_light_and_radio.jpg) | Public domain | NASA / JPL / Space Science Institute | Cassini's natural-colour mosaic of the lit rings (PIA07874, from PIA06175), read along one radius into a strip of 2048 colours and opacities from 74,794 to 137,035 km. The radii are fitted to five edges the picture shows (the B ring's inner edge, the two edges of the Cassini Division, the Encke gap and the A ring's outer edge), each within 300 km. The opacity is taken from the brightness, and the colour balance is moved to match the Saturn portrait above; the F ring and the D ring are not in the picture |
+
+The package does not ship the 2048 pixel widths: `TEXTURE_FAR_BASE` fetches them from this repository by jsDelivr's GitHub address when a view is zoomed in. The 512 and 1024 pixel widths of every picture, and the ring strip, are 1.31 MB in the package (the nine of 0.2.0 were 0.53 MB). Tethys, Dione, Iapetus, Triton and Charon have no picture: Cassini's maps of the first three are not made yet, the source of Triton's map does not give its longitudes, and the only clean public-domain map of Charon is under a grid of labels, so those five keep their drawn look.

package/README.md

@@ -1,7 +1,7 @@
 <h1 align="center">Wakusei Planets <sub>惑星</sub></h1>
 
 <p align="center"><strong>The Sun, the planets and their moons, for the web.</strong><br>
-A clean line drawing, a shaded realistic drawing, or (soon) a painted surface map, with each body's real size, axial tilt and rotation as data, and a planet's moons where they are at any date and time.</p>
+A clean line drawing, a shaded realistic drawing, or a painted surface map, with each body's real size, axial tilt and rotation as data, and a planet's moons where they are at any date and time.</p>
 
 <p align="center">
   <a href="https://github.com/johnmorrisdotca/wakusei-planets/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/johnmorrisdotca/wakusei-planets/actions/workflows/ci.yml/badge.svg"></a>
@@ -11,7 +11,9 @@ A clean line drawing, a shaded realistic drawing, or (soon) a painted surface ma
 
 <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="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.3.1/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.3.1/docs/images/lineup-desk.png" width="640"></p>
 
 ## One minute
 
@@ -72,9 +74,9 @@ A bundled app imports it: `import "@johnmorrisdotca/wakusei-planets/element"` (a
 |---|---|---|
 | `line` | A clean outline drawing with the body's key features: bands, craters, rings and their gaps, caps, the dark side dashed off. An SVG. | nothing |
 | `realistic` | A shaded sphere drawn from the body's real colours and features, lit from the Sun's side, with the rings casting shadows. No pictures: the surface is worked out in a shader. | `three`, the body's entry point |
-| `painted` | A real surface map from public-domain imagery. Small pictures first, sharper when you zoom in. | arriving in a later version |
+| `painted` | A real surface map from public-domain NASA, USGS and JPL imagery. Small pictures first (1.31 MB for all of them in the package), a sharper one fetched when you zoom in. | `three`, the body's entry point |
 
-Every body has its real size relative to the others (`scale-to="jupiter"`), its axial tilt and its rotation. The Sun, Mercury, Venus, Mars, Jupiter, Saturn, Uranus, Neptune and Pluto are drawn, and so are 25 moons (the Moon, Phobos and Deimos, the four Galilean moons, Saturn's seven larger moons, Uranus's five, Proteus, Triton and Nereid, Charon, Nix and Hydra). The Earth is [chikyu-earth](https://github.com/johnmorrisdotca/chikyu-earth)'s own globe, not a second copy: `import "@johnmorrisdotca/wakusei-planets/earth"` (it needs `@johnmorrisdotca/chikyu-earth` installed). The painted looks follow.
+Every body has its real size relative to the others (`scale-to="jupiter"`), its axial tilt and its rotation. The Sun, Mercury, Venus, Mars, Jupiter, Saturn, Uranus, Neptune and Pluto are drawn, and so are 25 moons (the Moon, Phobos and Deimos, the four Galilean moons, Saturn's seven larger moons, Uranus's five, Proteus, Triton and Nereid, Charon, Nix and Hydra). The Earth is drawn like the rest in the realistic and painted looks (NASA's Blue Marble), and its line look is [chikyu-earth](https://github.com/johnmorrisdotca/chikyu-earth)'s own globe: `import "@johnmorrisdotca/wakusei-planets/earth"` (it needs `@johnmorrisdotca/chikyu-earth` 0.10.0 or later installed). The painted looks cover the Sun, the planets from Mercury to Earth and Pluto, the Moon, the four Galilean moons, Titan, Rhea, Enceladus and Mimas, and Saturn's rings are Cassini's own picture of them.
 
 ## As the Earth sees it
 
@@ -140,7 +142,7 @@ The pure side has no DOM: `BODIES`, `apparent(id, time)`, `system(planet, time)`
 
 ## The data
 
-Sizes, flattening, poles and rotation are the IAU's and NASA's; planet positions are JPL's approximate elements; the Moon's are Meeus's largest terms; the other moons are JPL's mean elements. Nothing is fetched at run time, and no picture is used by the line and shaded looks. See [NOTICE.md](NOTICE.md).
+Sizes, flattening, poles and rotation are the IAU's and NASA's; planet positions are JPL's approximate elements; the Moon's are Meeus's largest terms; the other moons are JPL's mean elements. Nothing is fetched at run time by the line and shaded looks, which use no pictures. See [NOTICE.md](NOTICE.md).
 
 ## The name
 

package/dist/bodies/all.d.ts

@@ -7,6 +7,8 @@ import "./saturn.ts";
 import "./uranus.ts";
 import "./neptune.ts";
 import "./pluto.ts";
+import "./earth-look.ts";
+import "./moons-earth.ts";
 import "./moons-mars.ts";
 import "./moons-jupiter.ts";
 import "./moons-saturn.ts";

package/dist/bodies/all.js

@@ -7,6 +7,8 @@ import "./saturn.js";
 import "./uranus.js";
 import "./neptune.js";
 import "./pluto.js";
+import "./earth-look.js";
+import "./moons-earth.js";
 import "./moons-mars.js";
 import "./moons-jupiter.js";
 import "./moons-saturn.js";

package/dist/bodies/earth-look.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/bodies/earth-look.js

@@ -0,0 +1,18 @@
+import { registerLook } from "../scene/look.js";
+// The Earth's realistic and painted looks, drawn like every other body's from the Blue Marble picture, so they share the page's one WebGL context and have stills like the rest.
+registerLook({
+    id: "earth",
+    surface: `
+vec4 surface(vec3 p) {
+  float land = smoothstep(0.52, 0.58, fbm(p * 2.6 + 3.0));
+  vec3 sea = vec3(0.05, 0.17, 0.38);
+  vec3 ground = mix(vec3(0.22, 0.38, 0.16), vec3(0.62, 0.55, 0.40), smoothstep(0.55, 0.8, fbm(p * 5.0)));
+  float ice = smoothstep(radians(66.0), radians(76.0), abs(lat(p)));
+  return vec4(mix(mix(sea, ground, land), vec3(0.93, 0.96, 0.98), ice), 0.0);
+}`,
+    atmosphere: { colour: [0.32, 0.52, 0.95], strength: 0.5, power: 3 },
+    wrap: 0.12,
+    limb: 0.12,
+    mapped: true,
+    painted: { map: "earth", widths: [512, 1024, 2048], far: 2048, relief: 0 },
+});

package/dist/bodies/earth.d.ts

@@ -1 +1 @@
-export {};
+import "./earth-look.ts";

package/dist/bodies/earth.js

@@ -1,6 +1,7 @@
+import "./earth-look.js";
 import { delegates } from "../scene/store.js";
-// The Earth is drawn by chikyu-earth's own elements, not a second copy of them: the line globe with the countries, and the Earth from space with the real Sun, clouds and night lights.
-// chikyu-earth is an optional peer, loaded only when an Earth is drawn.
+// The Earth's line look is chikyu-earth's own globe with the countries, not a second copy (chikyu-earth is an optional peer, loaded only when that line globe is drawn). The realistic and
+// painted looks are drawn here like every other body's (earth-look.ts, which `/all` also loads).
 const CENTRE = "10,20";
 delegates.set("earth", {
     async line({ center, size }) {
@@ -11,13 +12,4 @@ delegates.set("earth", {
         globe.setAttribute("size", String(size));
         return globe;
     },
-    async live({ center, time, textureBase }) {
-        await import("@johnmorrisdotca/chikyu-earth/realistic/element");
-        const earth = document.createElement("chikyu-earth-realistic");
-        earth.setAttribute("center", center || CENTRE);
-        earth.setAttribute("time", time);
-        if (textureBase !== null)
-            earth.setAttribute("texture-base", textureBase);
-        return earth;
-    },
 });

package/dist/bodies/jupiter.js

@@ -8,8 +8,8 @@ registerLook({
         streaks: 0.22,
         plateau: 0.22,
         extra: `
-    float spot = oval(p, -20.0, -22.0, 9.5, 6.0, 0.55);
-    float halo = oval(p, -20.0, -22.0, 14.0, 9.0, 0.5) - spot;
+    float spot = oval(p, -48.0, -22.0, 9.5, 6.0, 0.55);
+    float halo = oval(p, -48.0, -22.0, 14.0, 9.0, 0.5) - spot;
     vec3 spotCol = mix(vec3(0.70, 0.31, 0.20), vec3(0.86, 0.52, 0.36), fbm(p * 16.0 + 2.0));
     col = mix(col, col * 0.78, clamp(halo, 0.0, 1.0) * 0.5);
     col = mix(col, spotCol, spot);
@@ -18,4 +18,5 @@ registerLook({
     }),
     atmosphere: { colour: [0.75, 0.7, 0.62], strength: 0.12, power: 3.5 },
     limb: 0.45,
+    painted: { map: "jupiter", widths: [512, 1024, 2048], far: 2048, relief: 0 },
 });

package/dist/bodies/mars.js

@@ -21,4 +21,5 @@ vec4 surface(vec3 p) {
     atmosphere: { colour: [0.85, 0.6, 0.45], strength: 0.16, power: 4 },
     relief: 0.7,
     ambient: 0.03,
+    painted: { map: "mars", widths: [512, 1024, 2048], far: 2048 },
 });

package/dist/bodies/mercury.js

@@ -5,4 +5,5 @@ registerLook({
     surface: rock({ dark: "#4f4a46", light: "#a6a09a", craters: 0.9, contrast: 0.8, seed: 2, patches: 1.8, extra: "col *= 1.0 + 0.5 * smoothstep(0.05, 0.25, h);" }),
     relief: 0.9,
     ambient: 0.03,
+    painted: { map: "mercury", widths: [512, 1024, 2048], far: 2048 },
 });

package/dist/bodies/moons-earth.js

@@ -33,4 +33,5 @@ registerLook({
     }),
     relief: 0.8,
     ambient: 0.02,
+    painted: { map: "moon", widths: [512, 1024, 2048], far: 2048 },
 });

package/dist/bodies/moons-jupiter.js

@@ -11,17 +11,19 @@ vec4 surface(vec3 p) {
   col = mix(col, vec3(0.96, 0.96, 0.92), smoothstep(0.68, 0.85, fbm(p * 5.0 + 8.0)) * 0.65);
   float c = -craters(p, 6.5, 1.0, 21.0);
   col = mix(col, vec3(0.20, 0.12, 0.07), smoothstep(0.06, 0.26, c) * 0.8);
-  float pele = oval(p, -90.0, -18.0, 13.0, 13.0, 0.5) - oval(p, -90.0, -18.0, 6.0, 6.0, 0.5);
+  float pele = oval(p, 105.0, -19.0, 13.0, 13.0, 0.5) - oval(p, 105.0, -19.0, 6.0, 6.0, 0.5);
   col = mix(col, vec3(0.78, 0.2, 0.1), clamp(pele, 0.0, 1.0) * 0.55);
   return vec4(col, 0.0);
 }`,
     ambient: 0.02,
+    painted: { map: "io", widths: [512, 1024, 2048], far: 2048 },
 });
-registerLook({ id: "europa", surface: ice({ base: "#e9e0cd", stain: "#a2623e", cracks: 0.85, craters: 0.2 }), ambient: 0.02, relief: 0.4 });
+registerLook({ id: "europa", surface: ice({ base: "#e9e0cd", stain: "#a2623e", cracks: 0.85, craters: 0.2 }), ambient: 0.02, painted: { map: "europa", widths: [512, 1024] } });
 registerLook({
     id: "ganymede",
     surface: rock({ dark: "#5f5448", light: "#b6aa99", craters: 0.9, contrast: 0.9, seed: 12, patches: 3.4, extra: "col = mix(col, vec3(0.30, 0.25, 0.21), oval(p, -140.0, 20.0, 38.0, 50.0, 0.4) * 0.7); col += vec3(0.28) * smoothstep(0.05, 0.2, -h) * 0.6;" }),
     relief: 0.6,
     ambient: 0.02,
+    painted: { map: "ganymede", widths: [512, 1024, 2048], far: 2048 },
 });
-registerLook({ id: "callisto", surface: rock({ dark: "#3f3832", light: "#7d7265", craters: 1.8, contrast: 0.9, seed: 21, patches: 3.2, extra: "col += vec3(0.4, 0.4, 0.42) * smoothstep(0.05, 0.22, -h);" }), relief: 0.9, ambient: 0.02 });
+registerLook({ id: "callisto", surface: rock({ dark: "#3f3832", light: "#7d7265", craters: 1.8, contrast: 0.9, seed: 21, patches: 3.2, extra: "col += vec3(0.4, 0.4, 0.42) * smoothstep(0.05, 0.22, -h);" }), relief: 0.9, ambient: 0.02, painted: { map: "callisto", widths: [512, 1024, 2048], far: 2048 } });

package/dist/bodies/moons-saturn.js

@@ -1,21 +1,23 @@
 import { registerLook } from "../scene/look.js";
 import { cloud, ice, rock } from "../scene/recipes.js";
-registerLook({ id: "mimas", surface: rock({ dark: "#7f7d79", light: "#bebcb7", craters: 1.7, contrast: 1, seed: 6, extra: "float hs = bowl(p, -110.0, 0.0, 33.0, 0.7); h += hs; col *= 1.0 + 0.9 * hs;" }), relief: 1, ambient: 0.02 });
+registerLook({ id: "mimas", surface: rock({ dark: "#7f7d79", light: "#bebcb7", craters: 1.7, contrast: 1, seed: 6, extra: "float hs = bowl(p, -110.0, 0.0, 33.0, 0.7); h += hs; col *= 1.0 + 0.9 * hs;" }), relief: 1, ambient: 0.02, painted: { map: "mimas", widths: [512, 1024, 2048], far: 2048 } });
 registerLook({
     id: "enceladus",
     surface: ice({ base: "#f4f7fa", stain: "#c3cfd9", craters: 0.35, extra: "float tiger = oval(p, 0.0, -80.0, 170.0, 14.0, 0.5) * (1.0 - smoothstep(0.0, 0.04, abs(fbm(p * vec3(4.0, 4.0, 14.0)) - 0.5))); col = mix(col, vec3(0.45, 0.72, 0.85), tiger * 0.85);" }),
     ambient: 0.03,
     relief: 0.3,
+    painted: { map: "enceladus", widths: [512, 1024, 2048], far: 2048 },
 });
 registerLook({ id: "tethys", surface: rock({ dark: "#8f8d88", light: "#d0cec9", craters: 1.2, contrast: 0.9, seed: 14, patches: 2.2, extra: "float od = bowl(p, 232.0, 5.0, 24.0, 0.6); h += od; col *= 1.0 + 0.7 * od;" }), relief: 0.8, ambient: 0.02 });
 registerLook({ id: "dione", surface: rock({ dark: "#8c8a85", light: "#cdcbc5", craters: 1, contrast: 0.9, seed: 18, patches: 2.6 }), relief: 0.8, ambient: 0.02 });
-registerLook({ id: "rhea", surface: rock({ dark: "#8a8883", light: "#cac8c2", craters: 1.5, contrast: 0.9, seed: 24, patches: 2 }), relief: 0.85, ambient: 0.02 });
+registerLook({ id: "rhea", surface: rock({ dark: "#8a8883", light: "#cac8c2", craters: 1.5, contrast: 0.9, seed: 24, patches: 2 }), relief: 0.85, ambient: 0.02, painted: { map: "rhea", widths: [512, 1024, 2048], far: 2048 } });
 registerLook({
     id: "titan",
     surface: cloud({ light: "#ecbe6c", dark: "#b8802f", swirl: 0.7 }),
     atmosphere: { colour: [0.92, 0.66, 0.3], strength: 0.65, power: 2.3 },
     limb: 0.3,
     ambient: 0.06,
+    painted: { map: "titan", widths: [512, 1024, 2048], far: 2048 },
 });
 registerLook({
     id: "iapetus",

package/dist/bodies/neptune.js

@@ -7,7 +7,7 @@ registerLook({
         turbulence: 0.022,
         streaks: 0.1,
         extra: `
-    float spot = oval(p, -30.0, -22.0, 11.0, 6.5, 0.5);
+    float spot = oval(p, -30.0, -24.0, 11.0, 6.5, 0.5);
     col = mix(col, vec3(0.10, 0.17, 0.46), spot * 0.9);
     float cirrus = smoothstep(0.6, 0.8, fbm(vec3(p.xy * 3.0, p.z * 30.0) + 8.0)) * smoothstep(0.5, 0.0, abs(degrees(la) + 38.0) / 10.0);
     col = mix(col, vec3(0.86, 0.9, 1.0), clamp(cirrus + oval(p, -8.0, -28.0, 7.0, 2.0, 0.6) * 0.8, 0.0, 1.0) * 0.55);`,
@@ -15,4 +15,5 @@ registerLook({
     atmosphere: { colour: [0.35, 0.5, 0.95], strength: 0.42, power: 2.8 },
     limb: 0.3,
     ambient: 0.05,
+    painted: { map: "neptune", widths: [512, 1024, 2048], far: 2048, relief: 0 },
 });

package/dist/bodies/pluto.js

@@ -18,4 +18,5 @@ registerLook({
     atmosphere: { colour: [0.6, 0.7, 0.9], strength: 0.12, power: 5 },
     relief: 0.4,
     ambient: 0.025,
+    painted: { map: "pluto", widths: [512, 1024, 2048], far: 2048 },
 });

package/dist/bodies/saturn.js

@@ -10,4 +10,5 @@ registerLook({
     }),
     atmosphere: { colour: [0.9, 0.82, 0.62], strength: 0.12, power: 3.5 },
     limb: 0.4,
+    painted: { map: "saturn", widths: [512, 1024, 2048], far: 2048, relief: 0, rings: { map: "saturn-ring", width: 2048, from: 74794, to: 137035 } },
 });

package/dist/bodies/sun.js

@@ -16,4 +16,5 @@ vec4 surface(vec3 p) {
   col = mix(col, vec3(0.16, 0.04, 0.01), spot * 0.92);
   return vec4(col * 1.12, 0.0);
 }`,
+    painted: { map: "sun", widths: [512, 1024, 2048], far: 2048, relief: 0 },
 });

package/dist/bodies/uranus.js

@@ -11,4 +11,5 @@ registerLook({
     atmosphere: { colour: [0.55, 0.88, 0.92], strength: 0.4, power: 2.8 },
     limb: 0.3,
     ambient: 0.05,
+    painted: { map: "uranus", widths: [512, 1024, 2048], far: 2048, relief: 0 },
 });

package/dist/bodies/venus.js

@@ -6,4 +6,5 @@ registerLook({
     atmosphere: { colour: [1, 0.9, 0.62], strength: 0.55, power: 2.6 },
     limb: 0.35,
     ambient: 0.07,
+    painted: { map: "venus", widths: [512, 1024, 2048], far: 2048 },
 });

package/dist/element.d.ts

@@ -25,13 +25,25 @@ 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.1.0/dist/textures/";
+export declare const TEXTURE_BASE = "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets@0.3.1/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.
+ *
+ * @example
+ * ```ts no-run
+ * import { TEXTURE_FAR_BASE } from "@johnmorrisdotca/wakusei-planets/element";
+ *
+ * console.log(TEXTURE_FAR_BASE);
+ * ```
+ */
+export declare const TEXTURE_FAR_BASE = "https://cdn.jsdelivr.net/gh/johnmorrisdotca/wakusei-planets@v0.3.1/textures/";
 /**
  * The `<wakusei-body>` custom element: a body of the solar system, drawn in a look.
  *
  * Attributes: `body` (a name, such as `jupiter`), `look` (`line`, `realistic` or `painted`), `size` (pixels across), `time` (`now` or an ISO date: the body as the Earth sees it then; leave it out for a portrait),
  * `tilt`, `pitch`, `phase` and `meridian` (a portrait's pose, degrees), `turn` (a portrait turns this many degrees a second), `rate` (simulated seconds for each real second), `moons` (draw the planet's moons on their orbits),
- * `range` (planet radii the moons picture reaches), `scale-to` (draw to scale with another body), `live` (`always`, `hover` or `off`: when it takes the page's one WebGL context), `texture-base` (where the surface pictures are) and `lang` (`en` or `ja`).
+ * `range` (planet radii the moons picture reaches), `scale-to` (draw to scale with another body), `span-km` (draw to scale: the half-width of the picture in kilometres, the same in every picture of a lineup), `live` (`always`, `hover` or `off`: when it takes the page's one WebGL context), `texture-base` (where the surface pictures are) and `lang` (`en` or `ja`).
  *
  * @example
  * ```ts no-run
@@ -65,7 +77,7 @@ export declare class WakuseiBody extends HTMLElement {
     goLive(): Promise<boolean>;
     /** Give the WebGL context back: the picture stays as a still. */
     rest(): void;
-    /** The shared controllers' camera: `yaw` turns the body about its pole, `tilt` tips its pole toward or away, `zoom` and the pan move the picture. */
+    /** The shared controllers' camera: `yaw` turns the body about its pole, `tilt` tips its top away from you as it grows (a drag up moves the surface up), `zoom` and the pan move the picture. */
     setView(view: {
         yaw?: number;
         tilt?: number;

package/dist/element.js

@@ -20,6 +20,18 @@ export { setThreeLoader };
  * ```
  */
 export const TEXTURE_BASE = `https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets@${VERSION}/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.
+ *
+ * @example
+ * ```ts no-run
+ * import { TEXTURE_FAR_BASE } from "@johnmorrisdotca/wakusei-planets/element";
+ *
+ * console.log(TEXTURE_FAR_BASE);
+ * ```
+ */
+export const TEXTURE_FAR_BASE = `https://cdn.jsdelivr.net/gh/johnmorrisdotca/wakusei-planets@v${VERSION}/textures/`;
 const num = (value, fallback) => {
     if (value === null || value.trim() === "")
         return fallback;
@@ -43,10 +55,18 @@ function extentOf(id, options) {
         const far = Math.max(1.8, ringReach(f) * 1.15, ...near.map((m) => m.reach * 1.1));
         return options.range ?? far;
     }
+    if (options.spanKm !== undefined)
+        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);
 }
+/** 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) {
+    const half = extent / Math.max(0.05, zoom);
+    const limit = 1 + 0.5 / half;
+    return Math.max(-limit, Math.min(limit, pan));
+}
 const TEMPLATE = `<style>
 :host { display: block; width: var(--wakusei-size, 320px); max-width: 100%; aspect-ratio: 1 / 1; position: relative; contain: layout style; }
 #stage { position: absolute; inset: 0; }
@@ -57,7 +77,7 @@ const TEMPLATE = `<style>
  *
  * Attributes: `body` (a name, such as `jupiter`), `look` (`line`, `realistic` or `painted`), `size` (pixels across), `time` (`now` or an ISO date: the body as the Earth sees it then; leave it out for a portrait),
  * `tilt`, `pitch`, `phase` and `meridian` (a portrait's pose, degrees), `turn` (a portrait turns this many degrees a second), `rate` (simulated seconds for each real second), `moons` (draw the planet's moons on their orbits),
- * `range` (planet radii the moons picture reaches), `scale-to` (draw to scale with another body), `live` (`always`, `hover` or `off`: when it takes the page's one WebGL context), `texture-base` (where the surface pictures are) and `lang` (`en` or `ja`).
+ * `range` (planet radii the moons picture reaches), `scale-to` (draw to scale with another body), `span-km` (draw to scale: the half-width of the picture in kilometres, the same in every picture of a lineup), `live` (`always`, `hover` or `off`: when it takes the page's one WebGL context), `texture-base` (where the surface pictures are) and `lang` (`en` or `ja`).
  *
  * @example
  * ```ts no-run
@@ -71,7 +91,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", "live", "texture-base", "lang", "labels"];
+    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"];
     #stage;
     #state = "line";
     #renderer;
@@ -197,10 +217,6 @@ export class WakuseiBody extends HTMLElement {
         if (this.look === "line")
             return false;
         this.#wantLive = true;
-        if (delegates.has(this.body)) {
-            await this.#delegated(delegates.get(this.body));
-            return true;
-        }
         await this.#ensureView();
         const ok = (await this.#view?.focus()) === true;
         if (ok) {
@@ -215,10 +231,6 @@ export class WakuseiBody extends HTMLElement {
     /** Give the WebGL context back: the picture stays as a still. */
     rest() {
         this.#wantLive = false;
-        if (delegates.has(this.body)) {
-            this.#queue(true);
-            return;
-        }
         this.#stopTick();
         if (this.#view !== undefined) {
             this.#view.blur();
@@ -228,7 +240,7 @@ export class WakuseiBody extends HTMLElement {
             }
         }
     }
-    /** The shared controllers' camera: `yaw` turns the body about its pole, `tilt` tips its pole toward or away, `zoom` and the pan move the picture. */
+    /** The shared controllers' camera: `yaw` turns the body about its pole, `tilt` tips its top away from you as it grows (a drag up moves the surface up), `zoom` and the pan move the picture. */
     setView(view) {
         this.#yaw = view.yaw ?? 0;
         this.#tilt = view.tilt ?? 0;
@@ -268,7 +280,7 @@ export class WakuseiBody extends HTMLElement {
     // --- the state of the scene --------------------------------------------------------------------------------------------------------------------
     #sceneOf(frame) {
         let { pole, meridian, light } = frame.pose;
-        const tiltBy = this.#tilt + this.#pitchDelta;
+        const tiltBy = this.#pitchDelta - this.#tilt;
         if (this.#yaw !== 0)
             meridian = turnVec(meridian, pole, this.#yaw);
         if (tiltBy !== 0) {
@@ -280,7 +292,8 @@ export class WakuseiBody extends HTMLElement {
         const r = this.#request();
         const scaleTo = this.getAttribute("scale-to");
         const range = this.hasAttribute("range") ? num(this.getAttribute("range"), 0) : undefined;
-        const extent = extentOf(this.body, { ...(scaleTo !== null && scaleTo in BODIES ? { scaleTo } : {}), moons: r.moons, ...(range !== undefined && range > 0 ? { range } : {}) });
+        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 moons = r.moons
             ? frame.moons
                 .filter((m) => m.distance <= extent * 1.05)
@@ -290,7 +303,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: this.#panX, panY: this.#panY, ...(moons !== undefined ? { moons } : {}) };
+        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 } : {}) };
     }
     #tilted = new Map();
     #tiltedOrbit(id, orbit, tilt) {
@@ -347,7 +360,7 @@ export class WakuseiBody extends HTMLElement {
         this.setAttribute("aria-label", this.#label());
         if (this.hasAttribute("size"))
             this.style.setProperty("--wakusei-size", `${num(this.getAttribute("size"), 320)}px`);
-        const delegate = delegates.get(this.body);
+        const delegate = this.look === "line" ? delegates.get(this.body) : undefined;
         if (delegate !== undefined) {
             await this.#delegated(delegate);
             return;
@@ -429,12 +442,12 @@ 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 && scaleTo in BODIES ? { fill: BODIES[this.body].radiusKm / (BODIES[scaleTo].radiusKm * 1.06) } : {}),
+            ...(scaleTo !== null || this.hasAttribute("span-km") ? { fill: this.#fill() } : {}),
             ...(this.getAttribute("lang") === "ja" ? { lang: "ja" } : {}),
             ...(this.getAttribute("labels") === "off" ? { labels: false } : {}),
             ...(stroke !== "" ? { stroke } : {}),
             ...(paper !== "" ? { paper } : {}),
-            ...(this.#zoom !== 1 ? { zoom: this.#zoom, panX: this.#panX, panY: this.#panY } : {}),
+            ...(this.#zoom !== 1 ? { zoom: this.#zoom, panX: scene.panX, panY: scene.panY } : {}),
         });
         this.#stage.innerHTML = html;
     }
@@ -471,6 +484,12 @@ export class WakuseiBody extends HTMLElement {
             key: this.#viewKey,
             state: () => this.#sceneState ?? state,
             textureBase: base,
+            farBase: () => {
+                const own = this.getAttribute("texture-far-base");
+                if (own !== null && own !== "")
+                    return own.endsWith("/") ? own : `${own}/`;
+                return this.hasAttribute("texture-base") ? base() : TEXTURE_FAR_BASE;
+            },
             wantedWidth: (discPx) => discPx * Math.min(2, window.devicePixelRatio || 1) * 1.6,
             redraw: () => this.#view?.invalidate(),
             report: (note) => {
@@ -486,30 +505,34 @@ export class WakuseiBody extends HTMLElement {
         if (this.#visible)
             this.#still();
     }
-    /** A body another package draws (the Earth): its line globe, or its shaded Earth once it is asked to go live. */
+    /** A body whose line look another package draws (the Earth's globe with its countries). It is drawn at the body's size in a scale picture, never larger than the picture. */
     async #delegated(delegate) {
         if (this.#view !== undefined) {
             this.#view.dispose();
             this.#view = undefined;
             this.#viewKey = "";
         }
-        const shaded = this.look !== "line" && (this.#wantLive || (this.#hasPriority() && (this.getAttribute("live") ?? "always") === "always"));
-        const kind = shaded ? "live" : "line";
-        const time = this.#start === undefined ? "now" : new Date(this.#start).toISOString();
-        const base = this.getAttribute("texture-base");
         const center = this.hasAttribute("meridian") ? `${num(this.getAttribute("meridian"), 10)},20` : "10,20";
-        const key = `${kind}|${center}|${time}|${base ?? ""}`;
+        const size = Math.round(this.clientWidth || 320);
+        const fill = this.#fill();
+        const key = `line|${center}|${fill}`;
         if (this.#delegateEl !== undefined && this.#delegateKind === key)
             return;
-        const size = Math.round(this.clientWidth || 320);
-        const el = kind === "live" ? await delegate.live({ center, time, textureBase: base }) : await delegate.line({ center, size });
+        const el = await delegate.line({ center, size });
         this.#delegateEl?.remove();
         this.#stage.innerHTML = "";
-        el.style.cssText = "display:block;width:100%;height:100%;aspect-ratio:1";
+        el.style.cssText = `display:block;width:${fill * 100}%;height:${fill * 100}%;aspect-ratio:1;position:absolute;left:${(1 - fill) * 50}%;top:${(1 - fill) * 50}%`;
         this.#stage.append(el);
         this.#delegateEl = el;
         this.#delegateKind = key;
-        this.#set(kind === "live" ? "live" : this.look === "line" ? "line" : "still");
+        this.#set("line");
+    }
+    /** How much of the picture's width the body's disc takes: 1 alone, less in a scale picture (`scale-to`, `span-km`). */
+    #fill() {
+        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;
     }
     /** Make the view's still, once, when it is in sight. */
     #still() {

package/dist/facts.js

@@ -110,7 +110,7 @@ export const BODIES = {
         ],
     }),
     jupiter: f("jupiter", "planet", "Jupiter", "木星", 71492, 0.06487, 3.13, 268.056595, 64.495303, 284.95, 870.536, 9.925, "#d9b48a", {
-        showLon: -20,
+        showLon: -48,
         features: [...bandsAt([62, 48, 35, 22, 8, -8, -22, -34, -48, -62]), { kind: "oval", lon: 20, lat: -22, rx: 12, ry: 6 }, { kind: "oval", lon: -70, lat: -33, rx: 3, ry: 2 }],
     }),
     saturn: f("saturn", "planet", "Saturn", "土星", 60268, 0.09796, 26.73, 40.589, 83.537, 38.9, 810.7939024, 10.656, "#e4d09c", {
@@ -119,7 +119,7 @@ export const BODIES = {
     }),
     uranus: f("uranus", "planet", "Uranus", "天王星", 25559, 0.02293, 97.77, 257.311, -15.175, 203.81, -501.1600928, -17.24, "#a9e0e5", { rings: URANUS_RINGS, features: bandsAt([62, 38, 14, -14, -38]) }),
     neptune: f("neptune", "planet", "Neptune", "海王星", 24764, 0.01708, 28.32, 299.36, 43.46, 249.978, 541.1397757, 16.11, "#4a6ee0", {
-        showLon: -25,
+        showLon: -30,
         features: [...bandsAt([58, 34, 10, -14, -38, -60]), { kind: "oval", lon: -20, lat: -22, rx: 12, ry: 6 }, { kind: "oval", lon: 45, lat: -42, rx: 5, ry: 2.5 }],
     }),
     pluto: f("pluto", "dwarf-planet", "Pluto", "冥王星", 1188.3, 0, 122.53, 132.993, -6.163, 302.695, 56.3625225, -153.2935, "#c9a98a", {

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" | "RGBAFormat" | "RingGeometry" | "Scene" | "ShaderMaterial" | "SphereGeometry" | "TextureLoader" | "Vector2" | "Vector3" | "WebGLRenderer">;
+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">;
 /** 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;
@@ -43,6 +43,8 @@ export interface BodyItemOptions {
     state(): SceneState;
     /** Where the pictures are: a folder address that ends in a slash. */
     textureBase(): string;
+    /** Where the widths from `painted.far` up are: a folder address that ends in a slash. */
+    farBase(): string;
     /** The widest texture worth fetching for a disc this many CSS pixels across (the element's call). */
     wantedWidth(discPx: number): number;
     /** The scene asks for a redraw when a sharper picture arrives. */

package/dist/scene/body.js

@@ -52,7 +52,7 @@ export function createBodyItem(options) {
         key: options.key,
         async build({ three: T, assets, width, height }) {
             const look = lookOf(options.id) ?? fallbackLook(facts);
-            const wantPainted = options.look === "painted" && look.painted !== undefined;
+            const wantPainted = (options.look === "painted" || look.mapped === true) && look.painted !== undefined;
             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;
@@ -62,28 +62,56 @@ export function createBodyItem(options) {
             const mesh = new T.Mesh(geometry, shader);
             mesh.frustumCulled = false;
             scene.add(mesh);
-            // rings
-            const strip = ringStrip(facts, 1024);
+            // rings: a picture of them when the look has one (painted), else the table's strip
+            const loadImage = (url) => new Promise((resolve, reject) => {
+                const loader = new T.TextureLoader();
+                loader.setCrossOrigin("anonymous");
+                loader.load(url, (t) => resolve(t), undefined, (e) => reject(e instanceof Error ? e : new Error("texture failed")));
+            });
+            const table = ringStrip(facts, 1024);
+            const photo = wantPainted && table !== null ? look.painted?.rings : undefined;
+            let photoTexture;
+            if (photo !== undefined) {
+                try {
+                    photoTexture = await loadImage(`${options.textureBase()}${photo.map}-${photo.width}.webp`);
+                }
+                catch {
+                    photoTexture = undefined;
+                }
+            }
+            const ringInner = photo !== undefined && photoTexture !== undefined ? photo.from / facts.radiusKm : (table?.inner ?? 1);
+            const ringOuter = photo !== undefined && photoTexture !== undefined ? photo.to / facts.radiusKm : (table?.outer ?? 2);
+            const ringKey = photoTexture !== undefined ? `${options.id}:p` : options.id;
             let ringMesh;
             let ringTexture;
             let ringMaterial;
-            if (strip !== null && look.emissive !== true) {
-                ringTexture = assets.acquire(`wk:ringtex:${options.id}`, () => {
-                    const tex = new T.DataTexture(strip.data, strip.width, 1, T.RGBAFormat);
+            if (table !== null && look.emissive !== true) {
+                ringTexture = assets.acquire(`wk:ringtex:${ringKey}`, () => {
+                    if (photoTexture !== undefined) {
+                        photoTexture.magFilter = T.LinearFilter;
+                        photoTexture.minFilter = T.LinearFilter;
+                        photoTexture.generateMipmaps = false;
+                        photoTexture.wrapS = T.ClampToEdgeWrapping;
+                        photoTexture.colorSpace = T.NoColorSpace;
+                        return photoTexture;
+                    }
+                    const tex = new T.DataTexture(table.data, table.width, 1, T.RGBAFormat);
                     tex.magFilter = T.LinearFilter;
                     tex.minFilter = T.LinearFilter;
                     tex.wrapS = T.ClampToEdgeWrapping;
                     tex.needsUpdate = true;
                     return tex;
                 }, (t) => t.dispose());
-                const ringGeometry = assets.acquire(`wk:ring:${options.id}`, () => new T.RingGeometry(strip.inner, strip.outer, 256, 1), (g) => g.dispose());
-                ringMaterial = assets.acquire(`wk:ringmat:${options.id}`, () => new T.ShaderMaterial({
+                if (photoTexture !== undefined && ringTexture !== photoTexture)
+                    photoTexture.dispose();
+                const ringGeometry = assets.acquire(`wk:ring:${ringKey}`, () => new T.RingGeometry(ringInner, ringOuter, 256, 1), (g) => g.dispose());
+                ringMaterial = assets.acquire(`wk:ringmat:${ringKey}`, () => new T.ShaderMaterial({
                     vertexShader: RING_VERTEX,
                     fragmentShader: RING_FRAGMENT,
                     side: T.DoubleSide,
                     transparent: true,
                     depthWrite: false,
-                    uniforms: { uRingTex: { value: ringTexture }, uRingR: { value: new T.Vector2(strip.inner, strip.outer) }, uLight: { value: new T.Vector3(0, 0, 1) }, uRingN: { value: new T.Vector3(0, 1, 0) } },
+                    uniforms: { uRingTex: { value: ringTexture }, uRingR: { value: new T.Vector2(ringInner, ringOuter) }, uLight: { value: new T.Vector3(0, 0, 1) }, uRingN: { value: new T.Vector3(0, 1, 0) } },
                 }), (m) => m.dispose());
                 ringMesh = new T.Mesh(ringGeometry, ringMaterial);
                 ringMesh.frustumCulled = false;
@@ -111,14 +139,15 @@ export function createBodyItem(options) {
             let texture;
             let loading = false;
             let failed = false;
+            const tried = new Set();
             let latest = options.state();
-            const loadTexture = (w) => new Promise((resolve, reject) => {
-                const loader = new T.TextureLoader();
-                loader.setCrossOrigin("anonymous");
-                loader.load(`${options.textureBase()}${look.painted.map}-${w}.webp`, (t) => resolve(t), undefined, (e) => reject(e instanceof Error ? e : new Error("texture failed")));
-            });
+            const loadTexture = (w) => {
+                const far = look.painted.far !== undefined && w >= look.painted.far;
+                return loadImage(`${far ? options.farBase() : options.textureBase()}${look.painted.map}-${w}.webp`);
+            };
             const use = (t, w) => {
                 t.anisotropy = 4;
+                t.wrapS = T.RepeatWrapping;
                 t.colorSpace = T.NoColorSpace;
                 const previous = texture;
                 texture = t;
@@ -236,7 +265,7 @@ export function createBodyItem(options) {
                 orient(state);
                 frame(state);
                 place(state);
-                if (ringMaterial !== undefined && strip !== null) {
+                if (ringMaterial !== undefined) {
                     const light = v3(T, state.pose.light);
                     const pole = v3(T, state.pose.pole);
                     ringMaterial.uniforms.uLight.value.copy(light);
@@ -246,7 +275,7 @@ export function createBodyItem(options) {
                             continue;
                         mat.uniforms.uRingOn.value = 1;
                         mat.uniforms.uRingN.value.copy(pole);
-                        mat.uniforms.uRingR.value.set(strip.inner, strip.outer);
+                        mat.uniforms.uRingR.value.set(ringInner, ringOuter);
                         mat.uniforms.uRingTex.value = ringTexture;
                     }
                 }
@@ -260,7 +289,8 @@ export function createBodyItem(options) {
                     const discPx = (aspect >= 1 ? viewHeight : viewWidth) * (state.zoom / state.extent);
                     const wanted = options.wantedWidth(discPx);
                     const next = look.painted.widths.find((w) => w >= wanted) ?? look.painted.widths[look.painted.widths.length - 1];
-                    if (next > textureWidth) {
+                    if (next > textureWidth && !tried.has(next)) {
+                        tried.add(next);
                         loading = true;
                         void loadTexture(next).then((t) => {
                             loading = false;

package/dist/scene/look.d.ts

@@ -33,8 +33,17 @@ export interface PaintedMap {
     map: string;
     /** The widths made, smallest first: the smallest is drawn first and sharper ones are fetched when the view is zoomed in. */
     widths: readonly number[];
+    /** The smallest width that is not in the npm package: it is fetched from the repository's own files (see `texture-far-base`). */
+    far?: number;
     /** How much of the map's brightness is also relief. Default 0. */
     relief?: number;
+    /** A picture of the body's rings for this look, one pixel high: colour and opacity from the inner edge to the outer, `width` samples. Used instead of the table's strip when it loads. */
+    rings?: {
+        map: string;
+        width: number;
+        from: number;
+        to: number;
+    };
     /** The painted pictures' credit line, for the page. */
     credit?: string;
 }
@@ -65,6 +74,8 @@ export interface BodyLook {
     /** How much of the night side shows (0 to 1). Default 0.04. */
     ambient?: number;
     painted?: PaintedMap;
+    /** Draw the painted map in the realistic look too: for a body with no honest drawing from numbers (the Earth's continents). */
+    mapped?: boolean;
 }
 /**
  * Teach the package how to draw a body in three.js. Each body's entry point (`@johnmorrisdotca/wakusei-planets/jupiter`) calls this once as it loads; call it yourself to add or replace a look.

package/dist/scene/store.d.ts

@@ -1,18 +1,12 @@
 import type { BodyId } from "../facts.ts";
 import type { BodyLook } from "./look.ts";
-/** A body drawn by another package's element (the Earth, by chikyu-earth) instead of by this one: the element asks it for what to show. */
+/** A body whose line look another package's element draws (the Earth, by chikyu-earth) instead of this one: the element asks it for what to show. The shaded and painted looks are always this package's. */
 export interface Delegate {
     /** The line look: an element for the body, centred on a longitude and latitude (`"lon,lat"`). */
     line(options: {
         center: string;
         size: number;
     }): Promise<HTMLElement>;
-    /** The shaded and painted looks, drawn live: an element lit by the Sun at `time` (`"now"` or an ISO date). */
-    live(options: {
-        center: string;
-        time: string;
-        textureBase: string | null;
-    }): Promise<HTMLElement>;
 }
 export declare const looks: Map<BodyId, BodyLook>, waiting: Set<() => void>, delegates: Map<BodyId, Delegate>;
 /** Call `wake` whenever a look is registered; returns a function that stops it. */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.1.0";
+export declare const VERSION = "0.3.1";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.1.0";
+export const VERSION = "0.3.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/wakusei-planets",
-  "version": "0.1.0",
+  "version": "0.3.1",
   "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",
@@ -160,7 +160,7 @@
     "node": ">=24"
   },
   "scripts": {
-    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.json",
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.json && node scripts/copy-textures.mjs",
     "lint": "eslint .",
     "typecheck": "tsc -p tsconfig.check.json && tsc -p tsconfig.tools.json && tsc -p tsconfig.demo.json",
     "test": "node --test test/*.test.ts",
@@ -168,6 +168,7 @@
     "check": "pnpm lint && pnpm typecheck && pnpm test && pnpm build && node scripts/check-package.ts",
     "prepublishOnly": "pnpm check",
     "family:readme": "node scripts/family-readme.mjs",
+    "readme:images": "node scripts/readme-images.mjs",
     "site": "pnpm build && node scripts/site.ts",
     "dev": "pnpm site && node scripts/dev.ts",
     "test:demo": "pnpm site && node scripts/docs-site.mjs build && playwright test --project=chromium-desk --project=chromium-phone --project=webkit-desk --project=webkit-phone",
@@ -186,7 +187,7 @@
     "@angular/core": "^22.2.4",
     "@angular/platform-browser": "^22.2.4",
     "@eslint/js": "^9.0.0",
-    "@johnmorrisdotca/chikyu-earth": "^0.7.0",
+    "@johnmorrisdotca/chikyu-earth": "^0.10.0",
     "@playwright/test": "1.64.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/node": "^24.0.0",
@@ -220,7 +221,7 @@
   },
   "peerDependencies": {
     "three": ">=0.160.0",
-    "@johnmorrisdotca/chikyu-earth": ">=0.7.0"
+    "@johnmorrisdotca/chikyu-earth": ">=0.10.0"
   },
   "peerDependenciesMeta": {
     "three": {