Skip to the content

Wakusei Planets惑星

The Sun, the planets and their moons as a clean line drawing, a shaded realistic drawing or a painted surface map, with real sizes, tilt and rotation, and the moons where they are at any date and time.

Wakusei is the Japanese word 惑星 for a planet. About the name

Contents

How-to

Looks and bodies

The looks, each body's own entry point, three.js, pictures and the budget that keeps the page light.

The looks

  • line: a clean outline drawing, an SVG string. It needs nothing else.
  • realistic: the photo maps, lit from the Sun's side. painted is the same maps, kept so an older page still works. The demo's one button for them is Realistic.
  • illustrated: the shaded drawing realistic used to be, worked out in the shader from the body's colours and features. It is not a default.
  • painted: a real surface map, for the Sun, the planets from Mercury to Pluto, Ceres, the Moon, the four Galilean moons, Saturn's Mimas, Enceladus, Tethys, Dione, Rhea, Titan and Iapetus, Triton and Charon; Saturn's rings come from a Cassini picture of them. A small picture is drawn first and a sharper one is fetched when the view is zoomed in; if a picture cannot be fetched the shaded look stays. NOTICE.md names each map.

Saturn in the painted look, with its rings from a Cassini picture.

The Earth in the painted look, from NASA's Blue Marble picture.

Io in the painted look, one of the fourteen painted moons.

Venus in the realistic look, from its cloud map.

Each body is its own entry point

A shaded look is code and data for one body, so each has its own import: @johnmorrisdotca/wakusei-planets/saturn, and /moons-jupiter for the Galilean moons. /all imports every one. A body whose entry has not been imported is drawn as a plain lit ball in its colour.

The Earth

The Earth is drawn like every other body. Its realistic and painted looks are NASA's Blue Marble picture, lit and turned like the rest, with a rim of air (a shaded Earth cannot honestly be worked out from numbers, so both looks use the picture); /all includes it. They share the page's one WebGL context and have stills in a row of bodies. Its line look is this package's own outline unless the page also has chikyu-earth's globe with the countries. For that, install @johnmorrisdotca/chikyu-earth (an optional peer, 0.10.0 or later) and import its element beside /earth:

import "@johnmorrisdotca/chikyu-earth/element";
import "@johnmorrisdotca/wakusei-planets/earth";

/earth never imports chikyu-earth itself, so a project without it builds and draws the outline; when chikyu-earth's element arrives later on the page, the Earth switches to its globe.

The dwarf planets

Besides Pluto: ceres, orcus, haumea, quaoar, makemake, gonggong, eris and sedna, in every look. They are put where they are from JPL's osculating elements of June 2026 (good for a few years either side), their sizes are from the papers NOTICE.md lists, Haumea (1161 x 852 x 513 km, turning every 3.9 hours) and Quaoar are drawn as the long shapes they are, and only Ceres has a painted map (Dawn's), which its realistic look draws too, so Ceres looks like Ceres, with the bright spots of Occator crater, in every look. The surface of the others is drawn from their published colours, so it is an estimate, and where a pole has not been measured it is taken along the orbit's pole: NOTICE.md says which. The moons Weywot, Xiangliu and S/2015 (136472) 1 are not drawn because no orbit with a published phase exists.

The moons

Every moon has its own name for body, in every look and in the demo's row of moons: Mars: phobos, deimos. Jupiter: io, europa, ganymede, callisto. Saturn: mimas, enceladus, tethys, dione, rhea, titan, iapetus. Uranus: miranda, ariel, umbriel, titania, oberon. Neptune: proteus, triton, nereid. Pluto: charon, nix, hydra. Orcus: vanth. Haumea: hiiaka, namaka. Eris: dysnomia. The Earth's is moon. ?body=io opens the demo on Io.

One WebGL context, drawn on demand

Every shaded body on a page shares one WebGL context through kazoku-ui's shared renderer. The body in focus is live and the others show pictures: set live="hover" to give the context to whichever one the reader points at, live="off" for pictures only. Nothing is drawn while nothing changes, no animation frame is asked for while the page is at rest, a moving picture is drawn at most thirty times a second, the canvas is held to 4096 pixels a side and six million pixels, and everything is freed when the element leaves. A body that is out of sight or in a hidden tab is not drawn, and a lost WebGL context comes back by itself.

Real sizes

scale-to="jupiter" draws a body at its real size relative to Jupiter. The body's radiusKm, tiltDeg and rotationHours are in BODIES.

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/wakusei-planets 0.24.0.