Skip to the object
TACTILE UI

Globe

A desk globe on a meridian. A satin-metal ball with the land etched into it, held in a machined half-meridian on a turned stand. It spins with inertia, and markers are small domed lamps that glow, light the metal around them and go behind the limb.

Everything you set here is what the Code and Prompt tabs give you.

Datasheet

Mechanism
Analytic sphere shader, Land mask mip sampling, Engraved coast bevel, Bead lattice, Axle friction inertia, Resisted axle give, Short way seek, Domed lamp markers, Ray cast stand, Unrolled meridian scale, Sleeping loop
Stack
Vanilla ES modules, WebGL2, CSS
Needs
Nothing — no dependencies
States
17 documented
Version
0.1.0
Licence
With a Pass

States

  1. At restNothing moves and no frame is requested; the terminator, the highlight and every lamp are still.
  2. DraggingThe surface under the pointer follows it along its parallel. A vertical drag does not turn it: the ball gives a few degrees on its axle.
  3. CoastingAfter a flick it keeps turning against viscous and dry friction, slows and stops; the loop then sleeps.
  4. Meridian resistsVertical drag tips the ball at most 4.5 degrees, following the hand, and it springs back with a small ring.
  5. Turning to a placefocus() and focusMarker() turn it the short way round with a spring that starts quickly and arrives slowly.
  6. KeyboardArrows turn 15 degrees, Page keys 45, Home returns to the prime meridian, Escape clears the selection; Tab moves through the markers that are on the near side.
  7. SelectedA small engraved plate with the label and state sits beside the lamp (on the left if it would run out of the box) and select fires.
  8. LampsGreen, amber, red or white domes set into the surface; each lights the metal around it, dims and foreshortens toward the limb and is gone behind it, its button hidden.
  9. State changeA lamp fades to its new colour; setState turns one red.
  10. EngravedThe land is a shallow frosted recess with a bevelled coast.
  11. DottedThe land is raised beads on rows of equal spacing, fewer toward the poles.
  12. AluminiumA bead-blasted aluminium ring and stand and a light satin ball.
  13. GraphiteA graphite ring and stand and a dark satin ball with the land frosted lighter.
  14. DriftOptional: a slow idle turn that pauses on hover, on focus and while a marker is selected.
  15. SoundOptional: a soft bearing hum while it turns and a knock when a lamp is selected. Off by default and only after the page has been touched.
  16. Off screen or hiddenThe loop pauses and nothing runs.
  17. Reduced motionNo inertia and no springs; focus() jumps; no drift; no sound.

What it is for

Places and their state, where the picture should be a thing you can hold: an infrastructure map of regions and their health, a fleet or an edge network, a status board of sites, energy and IoT assets by country, an incident view that turns to the region that went red. Every marker is a real button (Tab walks the ones on the near side, Enter selects), the ball is a slider for longitude with its value spoken as "30 degrees east, facing Frankfurt", and select, turn and settle events report what the visitor did.

Original. One fragment shader draws the ball, the stand and the desk; the land is a mask rasterised once from baked Natural Earth polygons; the markers are DOM buttons positioned from the same rotation the shader uses.