wupeihan06.com Simple

Galaxy: Water Ripples · Point-Line-Plane · Astrolabe

The process and trade-offs of rebuilding the homepage's "flat galaxy" into "water ripples + point-line-plane + a three-dimensional astrolabe"

The galaxy on the homepage started as a watercolor whirlpool painted on a single 2D canvas. This time I rebuilt the whole thing into a three-layer composite, and jotted down a few trade-offs along the way.

Three Layers

  • Water ripples (bottom): A real-time shader runs fbm noise + domain warping, painting a slowly drifting watercolor ripple. It stands in for the “galaxy” itself—background, not stealing the show.
  • Point-line-plane (middle): Kandinsky-style points (dots / concentric circles / light spots) + four straight cyan guide lines, their ends landing precisely on the nodes of the four sections. Turning “decoration” into “signposts.”
  • Astrolabe (top): A three-dimensional astrolabe as the central hub, its hollowed-out arms letting the water beneath show through the gaps, with a small hemispherical core at the very center.

A Few Trade-offs

  • Don’t upstage the host: The astrolabe sits above the points and lines but is tuned semi-transparent, letting the water and the point-line layer show through the openings—each of the three layers gives a little ground.
  • Still, not cold: The galaxy stays within the blue-purple family, leaning toward “serene” rather than running to either the “warm” or “cool” extreme.
  • It has to run: The three-dimensional model was compressed from 52MB down to 3MB before I dared put it on the homepage; under a “reduced motion” preference it renders just one frame and never enters the animation loop.

The Flavor I Kept

The mooring-rope opening when you enter the site, the ionizing transition when you click “Japan Fieldwork”—these Arknights / Endfield-style terminal textures are a taste I deliberately kept, not a casual default.