♫

ⓘ

Build Notes

What This Is

A single-file 3D solar system orrery built with Three.js 0.160, custom GLSL shaders, Web Audio generative soundscape, and glass-morphism UI. Each planet represents a state of consciousness: Stillness, Curiosity, Passion, Logic, and Transcendence.

Architecture

The file is organized into clearly delimited sections. All tunable parameters are constants at the top. Custom GLSL shaders (sun plasma, procedural terrain, aurora, star twinkle) live in <script> tags. Simplex 3D noise and FBM functions are injected at init. Three procedural textures (corona, glow ring, nebula) are generated via hidden Canvas2D at startup.

Implementation Map

• 1. 3D Scene — Sun with simplex-noise plasma shader + 6 corona sprites + 80 particle flares. Five planets with distinct identities (Stillness: smooth iridescent; Curiosity: FBM terrain shader + cloud layer; Passion: displaced icosahedron with emissive veins; Logic: nested wireframe polyhedra; Transcendence: dual-layer aurora shell + bright core + particle trail). Orbits: thin TorusGeometry rings, each inclined. Asteroid belt: 600 InstancedMesh particles. Starfield: 2,200 Fibonacci-distributed stars with vertex-shader twinkle. Four nebula planes deep in the background.
• 2. Animation — Planets orbit at distance-based speeds with self-rotation. Sun pulsates at 72 BPM heartbeat (synced to audio). Asteroid belt with eccentricity. Comets streak across on random parabolic paths every 15-25s.
• 3. Interactive Controls — OrbitControls (drag orbit, scroll zoom, right-click pan). Hover: planet name + attribute label with orbit highlight. Click: smooth camera flight to planet + sidebar. Double-click empty: return to overview. Timeline slider (0x-3x). 2D canvas minimap.
• 4. Audio — Web Audio API with master AudioContext. Sun: low-pass sawtooth ~55Hz with heartbeat LFO. Planets: sine (Stillness), triangle + LFO (Curiosity), filtered sawtooth (Passion), staccato square (Logic), additive chime (Transcendence). Algorithmic reverb via 8-tap delay lines. Distance-based spatial mixing.
• 5. Visual Effects — Lens flare via HTML/CSS elements tracking sun screen position. Additive-blended corona sprites for bloom simulation. Canvas-generated nebula textures with radial gradients.
• 6. Shaders — Four custom GLSL shader pairs plus shared simplex3D/FBM utilities. All injected at runtime from <script> templates.
• 7. Easter Eggs — Konami code supernova (sun expands + screen flash + smooth return). Triple starfield click = shooting star. Planet alignment detection (screen-space collinearity) with constellation lines and chime. Midnight mode (00:00-06:00) shifts UI colors to deeper purple.
• 8. Technical Constraints — Single HTML file. Three.js 0.160 via ES module import map + OrbitControls ES module. Cormorant Garamond from Google Fonts. No external textures. Responsive viewport. Loading state. Error handling for audio/WebGL failures.

Things I'm Proud Of

• The Curiosity procedural terrain: 5-octave FBM noise mapped to a 7-level biome color ramp (deep ocean → snow). No external textures needed.
• The sun plasma shader: 4-octave simplex noise displacement in the vertex shader, fresnel rim lighting in the fragment shader.
• The audio engine: each planet's tone derives from orbital resonance ratios relative to the sun's 55Hz fundamental.
• The Konami supernova: non-linear expansion curve (cubic ease-out for the burst, quadratic ease-in for the recovery), with cascading visual feedback.

Known Limitations

• No shadow maps — sun glow is faked with additive sprites.
• Reverb is algorithmic (multi-tap delay), not convolution — less realistic but works without impulse response files.
• Planet alignment detection is approximate (screen-space projection tolerance).
• Minimap is 2D canvas for simplicity.
• Mobile touch support is basic (single-touch orbit only).
• No WebXR / VR support.

Ideas for Future Expansion

• Moons around Curiosity and Logic.
• WebXR VR mode.
• MIDI controller support for real-time audio manipulation.
• Save/load camera bookmarks.
• Procedural ring system around Logic (Saturn-like).
• Day/night cycle on Curiosity.
• User-composable sequencer using planetary positions as notes.

---

Original Instructions

Philosophy

The experience should evoke a sense of cosmic scale and introspection. Each planet represents a different "state of consciousness" (stillness, curiosity, passion, logic, transcendence). The user is an observer who can also interact and compose a musical-visual journey.

1. The 3D Scene

• Sun: Center. Glowing, pulsating sphere with custom vertex/fragment shaders for roiling plasma surface (simplex noise-based displacement), corona effect using additive-blended sprites, dynamic point light, particle flares.
• 5 Planets: 1. Stillness (Mercury-like): Small, smooth, pale blue-grey, subtle iridescence. 2. Curiosity (Earth-like): Procedural terrain with FBM in real-time — no external textures. Cloud layer with scrolling noise alpha. 3. Passion (Mars-like): Deep crimson, displaced icosahedron with crystalline facets, emissive orange veins. 4. Logic (Jupiter-like): Rotating icosahedron with wireframe edges, translucent faces, nested counter-rotating octahedron. 5. Transcendence (Neptune-like): Dual-layered sphere — outer aurora gradient shader, inner bright point of light, particle trail.
• Orbits: Thin glowing TorusGeometry rings, each unique color, slightly inclined.
• Asteroid Belt: 500+ particles between Passion and Logic, InstancedMesh for performance.

2. Animation & Motion

• Planets orbit at distance-based speeds, self-rotate.
• Sun pulsates with 72 BPM heartbeat.
• Asteroid belt with eccentricity and inclination randomness.
• Idle camera auto-orbit with gentle bobbing.
• Comet every 15-25s on random parabolic path.

3. Interactive Controls

• Click-drag: orbit. Scroll: zoom. Right-click-drag: pan.
• Hover planet: glow + floating label.
• Click planet: smooth fly-to. Double-click empty: overview.
• Timeline slider (0x-3x), minimap, collapsible planet info sidebar.

4. Audio Experience

• Sun: low-pass sawtooth ~55Hz, heartbeat volume LFO.
• Planet tones based on orbital resonance ratios (2:3, 3:4, 4:5, 5:6, 6:7).
• Unique waveforms per planet: sine, triangle+LFO, sawtooth+filter, square+staccato, additive chime.
• Algorithmic reverb via multi-tap delay lines. Spatial mixing by camera distance.

5. Visual Effects

• Sun bloom via additive-blended geometries.
• 2000+ Fibonacci-sphere stars with vertex-shader twinkle.
• Canvas-generated nebula planes in background.
• HTML/CSS lens flare tracking sun screen position.

6. Shaders

• Sun surface: vertex displacement with multi-octave simplex noise, fragment color by displacement height.
• Curiosity terrain: FBM 5 octaves → 7-level biome color map.
• Transcendence aurora: sin/cos patterns on UVs with time.
• Star twinkle: point size oscillation with random phase per star.

7. Easter Eggs

• Konami code: supernova (sun expands, particles, 5s then smooth return).
• 3 rapid starfield clicks: shooting star.
• 3+ planets aligned: chime + constellation line for 3 seconds.
• Midnight mode (00:00-06:00): deeper purple palette.

8. Technical Constraints

• Single HTML file. Three.js + OrbitControls from CDN ES modules. Google Fonts only external dependency.
• 60 FPS target. InstancedMesh for asteroids. DeltaTime for frame-rate independence.
• Responsive. Touch support. Loading state. Graceful error fallbacks.

9. Code Quality

• Extensive comments, clean section separation, constants at top, DEV NOTES block.

10. Asset Generation

• 64x64 corona texture, 128x128 glow ring, 512x256 nebula — all generated procedurally via hidden Canvas2D at startup.