diff options
Diffstat (limited to 'HYDRA_EFFECTS_GUIDE.md')
| -rw-r--r-- | HYDRA_EFFECTS_GUIDE.md | 329 |
1 files changed, 329 insertions, 0 deletions
diff --git a/HYDRA_EFFECTS_GUIDE.md b/HYDRA_EFFECTS_GUIDE.md new file mode 100644 index 0000000..4549ddc --- /dev/null +++ b/HYDRA_EFFECTS_GUIDE.md @@ -0,0 +1,329 @@ +# Retrowave Player - Hydra Effects Guide + +A comprehensive guide to all the visual effects and features implemented in the synthwave/retrowave music player. + +## Overview + +This project is a synthwave/retrowave-themed web music player featuring: +- 3D UI with floating animations and glowing effects +- Terminal overlay for command-line interaction +- 14 unique Hydra-based visual effects +- Mobile-friendly responsive design +- Clean, AI-comment-free codebase + +## Visual Effects Library + +### 🎵 Core Synthwave Effects + +#### 1. **Vernoi** (`effect vernoi`) +- **Description**: Synthwave Voronoi patterns +- **Features**: + - Neon pink, cyan, and purple Voronoi cells + - Animated scaling and rotation + - High contrast synthwave aesthetic + +#### 2. **Waveyzz** (`effect waveyzz`) +- **Description**: Neon wave synthesis +- **Features**: + - Flowing neon pink and cyan waves + - Complex modulation and feedback loops + - Purple accents with breathing effects + +#### 3. **OscRotate** (`effect oscrotate`) +- **Description**: Oscillating neon shapes +- **Features**: + - Rotating neon pink and cyan oscillators + - Hexagonal grid overlays + - Dynamic contrast and brightness + +#### 4. **RetroSun** (`effect retrosun`) +- **Description**: Classic synthwave sunset with grid +- **Features**: + - Golden circular sun with glow effect + - Horizontal and vertical perspective grid + - Pink horizon line and mountain silhouettes + - Proper 3D grid perspective + +#### 5. **SynthWave** (`effect synthwave`) +- **Description**: Basic synthwave pattern with moving elements +- **Features**: + - Animated cyan grid lines + - Pink to black gradients + - Orange pulsing geometric shapes + - Counter-moving line effects + +### 🌌 Space & Cosmic Effects + +#### 6. **Galaxy** (`effect galaxy`) +- **Description**: Deep space galaxy with swirling arms and stars +- **Features**: + - Rotating spiral arms with cosmic dust + - Pulsing golden galactic core + - Twinkling star fields of various sizes + - Pink nebula regions and cyan gas clouds + +### 🤖 Cyberpunk & AI Effects + +#### 7. **Electric Sheep** (`effect electricsheep`) +- **Description**: Digital dreams & synthetic memories (Philip K. Dick inspired) +- **Features**: + - Electric blue digital static base + - Pink neural pattern networks + - Yellow memory fragment shapes + - Matrix-style green digital rain + - Glitch pixelation effects + +#### 8. **Cyberpunk City** (`effect cyberpunk`) +- **Description**: Neon-soaked cityscape +- **Features**: + - Hot pink and cyan neon advertising signs + - Green holographic displays + - Atmospheric blue rain effects + - Orange street light glows + +#### 9. **Digital Dreams** (`effect digitaldreams`) +- **Description**: Abstract consciousness patterns +- **Features**: + - Purple neural network base + - Cyan synaptic connections + - Golden memory bubbles + - Pink thought streams + +#### 10. **Quantum Static** (`effect quantumstatic`) +- **Description**: Quantum interference & particles +- **Features**: + - Deep purple quantum field fluctuations + - Teal and pink interference patterns + - Bright yellow probability waves + - White particle traces + +### 🎬 Movie-Inspired Effects + +#### 11. **Johnny Mnemonic** (`effect johnny`) +- **Description**: Data highways and ice breaking +- **Features**: + - Matrix green data streams + - Ice blue crystalline barriers + - Yellow flowing data packets + - Pink neural pathways + - Red glitch corruption with pixelation + +#### 12. **Bill & Ted's Excellent Adventure** (`effect billted`) +- **Description**: Psychedelic time travel vortex +- **Features**: + - Orange 80s glow with spiral vortex + - Purple time ripples with kaleidoscope effects + - Golden "excellent" sparkles + - Cyan phone booth trails + - Pink "bogus" interference static + +#### 13. **Tron Legacy** (`effect tron`) +- **Description**: Digital grid world with light cycles +- **Features**: + - Dark blue-black base with cyan grid lines + - Orange and cyan light cycle trails + - Spinning identity discs + - Digital de-resolution pixel effects + - Golden recognition sequences + +#### 14. **Hitchhiker's Guide to the Galaxy** (`effect hitchhiker`) +- **Description**: Infinite improbability and babel fish +- **Features**: + - Golden improbability field (rotating at 0.042 speed for "42" reference) + - Yellow babel fish swimming patterns + - Green paradox loops with kaleidoscope effects + - Blue Deep Thought computational patterns + - Gray pan-dimensional mice dots + - Pink "42" squares repeated 42 times horizontally + - All effects modulated at 0.42 frequency for maximum "42" references + +## UI Enhancements + +### 3D Effects +- **Player Container**: Floating animation with perspective transforms +- **Buttons**: Pulsing glow effects and 3D shadows +- **Terminal**: 3D floating overlay with neon borders +- **Modal**: Glowing intro screen with floating animation +- **Footer**: Animated glow effects + +### Animations +- `playerFloat`: Gentle floating motion for the main player +- `playerPulse`: Subtle pulsing effect +- `trackNameFloat`: Floating track name display +- `trackNameGlow`: Glowing text effects +- `buttonPulse`: Interactive button animations +- `hrPulse` & `hrRotate`: Animated divider elements +- `introFloat`: Modal introduction animations +- `footerGlow`: Footer highlight effects + +## Controls & Commands + +### Keyboard Shortcuts +- **Space**: Toggle play/pause +- **W**: Volume up +- **S**: Volume down +- **N**: Next track +- **F**: Toggle fullscreen +- **H**: Toggle controls visibility +- **X**: Toggle everything (player + overlay) +- **E**: Cycle through visual effects +- **T**: Toggle terminal overlay + +### Terminal Commands + +#### Media Controls +```bash +play # Start/resume playback +pause # Pause playback +next # Skip to next track +volume [0-10] # Set volume (0-10) +status # Show current track info +history # Download playlist history +``` + +#### Visual Effects +```bash +effect list # Show all available effects +effect <effect_name> # Switch to specific effect +effect vernoi # Synthwave Voronoi patterns +effect waveyzz # Neon wave synthesis +effect oscrotate # Oscillating neon shapes +effect retrosun # Retro sunset with grid +effect synthwave # Basic synthwave pattern +effect galaxy # Deep space galaxy +effect electricsheep # Digital dreams (PKD inspired) +effect cyberpunk # Neon cityscape +effect digitaldreams # Consciousness patterns +effect quantumstatic # Quantum interference +effect johnny # Johnny Mnemonic data highways +effect billted # Bill & Ted time vortex +effect tron # Tron Legacy grid world +effect hitchhiker # Hitchhiker's Guide improbability +``` + +#### System Commands +```bash +help # Show help message +fullscreen # Toggle fullscreen mode +clear # Clear terminal +exit # Close terminal +``` + +## Technical Implementation + +### Hydra.js Integration +- All effects use valid Hydra.js syntax +- Proper error handling for browser compatibility +- Effects are loaded with 100ms timeout for stability +- Background processing doesn't block UI + +### Mobile Support +- Touch gestures for volume control (swipe up/down) +- Responsive design for all screen sizes +- Mobile-friendly terminal interface + +### Performance +- Clean, optimized code without verbose comments +- Efficient Hydra rendering +- Proper memory management for audio instances + +## Code Quality + +### Clean Implementation +- ❌ Removed all AI-generated comments +- ❌ Removed verbose explanatory comments +- ✅ Clean, production-ready code +- ✅ Proper error handling +- ✅ Robust mobile support + +### Browser Compatibility +- Modern browsers with WebGL support +- Hydra.js requirements met +- Fallback error messages for unsupported features + +## File Structure + +``` +retrowave-player/ +├── index.html # Main HTML structure +├── hg.css # All styling and 3D animations +├── player.js # Core functionality and Hydra effects +├── favicon.ico # Site icon +├── favicon.svg # Vector site icon +├── fonts/ +│ └── Streamster.ttf # Custom synthwave font +├── images/ +│ ├── comp009.jpg # Background image +│ └── rainbowprism.gif # Additional assets +└── libs/ + ├── codef_3d.js # 3D rendering library + ├── codef_core.js # Core graphics library + └── codef_starfield.js # Starfield effects +``` + +## Usage Examples + +### Quick Start +1. Open `index.html` in a modern browser +2. Click "ENTER THE GRID" to initialize +3. Use keyboard shortcuts or terminal for control +4. Press 'E' to cycle through visual effects + +### Terminal Usage +```bash +# Open terminal +Press 'T' + +# Switch to a specific effect +effect tron + +# Adjust volume +volume 7 + +# Check what's playing +status + +# Get help +help +``` + +## Development Notes + +### Adding New Effects +1. Create new effect function following the pattern: +```javascript +const newEffect = () => { + setTimeout(() => { + // Hydra effect code here + .out(); + }, 100); +}; +``` + +2. Add to `hydraEffects` array +3. Update terminal command switch statement +4. Add to help text + +### Hydra Syntax Tips +- Use `scrollX()` and `scrollY()` for positioning (not `translate()`) +- Use `shape(32, ...)` for smooth circles (not `shape(4, ...)`) +- Always end effect chains with `.out()` +- Use `setTimeout()` wrapper for stability + +## Troubleshooting + +### Common Issues +1. **Effects not loading**: Check browser WebGL support +2. **Audio not playing**: Check CORS and network connectivity +3. **Mobile controls not working**: Ensure touch events are enabled +4. **Terminal not responding**: Check for JavaScript errors in console + +### Browser Requirements +- WebGL support for Hydra effects +- Modern ES6+ JavaScript support +- Audio API support for music playback +- Local storage for playlist history + +--- + +*Created for the ultimate synthwave/retrowave music experience. Do you dream of electric sheep? 🐑⚡* |