A musical interactive game where obstacles generate melodies and hand gestures trigger percussion. Features progressive polyphonic composition through accumulated ostinatos.
Melodic Aviator is a Flappy Bird-inspired musical experience where:
- Obstacles generate melodies - Each pipe plays a note based on its vertical position
- Hand gestures trigger percussion - Upward hand flicks make the bird jump with percussive sounds
- Scores become ostinatos - Each game session creates a repeating musical pattern that layers into the next
- Progressive composition - The more you play, the richer the polyphonic texture becomes
The game cycles through 7 different musical modes every 10 measures:
- Major Pentatonic
- Natural Minor
- Major
- Dorian
- Phrygian
- Whole Tone
- Japanese Pentatonic
- Measures 0-3: Monophonic melody
- Measures 4-7: Diatonic thirds added
- Measures 8+: Full triadic harmony with sustained pads
- Each completed game generates a unique melodic motif based on your score
- Motifs are stored and play as looping ostinatos in subsequent games
- Creates evolving polyphonic textures across multiple play sessions
- Use "Clear Composition" to reset all accumulated layers
- Click / Spacebar - Jump / Start game
- SHIFT + R - Clear all accumulated ostinatos
- Click "📷 Enable Hand Tracking" button
- Allow camera permissions
- Make upward flicking gestures with your hand to jump
- Node.js (v16 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/yourusername/melodic-aviator.git
cd melodic-aviator
# Install dependencies
npm install
# Start development server
npm run devThe game will open at http://localhost:3000
npm run build
npm run preview- React - UI framework
- Tone.js - Web Audio synthesis and scheduling
- MediaPipe Hands - Hand tracking via webcam
- Vite - Build tool and dev server
The game features a retro-futuristic synthwave aesthetic with:
- Deep purple/blue gradient backgrounds
- Neon glows and animated grids
- Rainbow spectrum obstacles mapped to musical frequencies
- Space Mono monospace font for digital feel
- Ostinato - A repeating musical phrase
- Polyphonic texture - Multiple independent melodic lines
- Modal center - The tonal framework (scale/mode)
- Voice leading - Smooth harmonic progression between chords
- Diatonic thirds - Harmony notes from within the scale
- Start simple - master the basic controls first
- Each game adds musical complexity
- Higher scores create longer, more complex ostinatos
- Listen to how the modes shift every 10 measures
- Use the hand tracking for a more expressive experience
- Clear the composition when it gets too dense
This is a personal project, but feel free to fork and experiment!
MIT License - feel free to use this for educational purposes or personal projects.
- Inspired by classic Flappy Bird mechanics
- Musical concepts from minimalist composition and game music design
- Built with the amazing Tone.js library
- Hand tracking powered by MediaPipe
Enjoy creating your own musical compositions through gameplay! 🎵