330 lines
9.8 KiB
Markdown
330 lines
9.8 KiB
Markdown
# 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? 🐑⚡*
|