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.