Lattice Learner

An interactive web-based game for learning musical interval relationships through the Tonnetz lattice.

🎵 What is this?

The Tonnetz (German for "tone network") is a visual representation of musical harmony where notes are arranged in a lattice based on their harmonic relationships. This game helps you learn how notes connect to each other through different musical intervals.

🎮 How to Play

1. Start: Click "New Game" to get a random center note
2. Learn: One edge will be highlighted showing an interval type (P5, M3, m3, etc.)
3. Answer: Type the note you think you'll land on following that interval
4. Progress: Correct answers turn green and move to the next edge
5. Complete: Fill all 6 directions to complete the lattice

🎯 What You'll Learn

• Perfect 5ths and 4ths: The most fundamental harmonic relationships
• Major and Minor 3rds: Building blocks of triads and chords
• 6th intervals: How they relate to inverted 3rds
• Enharmonic equivalents: C# = Db, F# = Gb, etc.
• Spatial music theory: How harmony works geometrically

✨ Features

• Progressive validation: Real-time feedback as you type
• Enharmonic support: Accepts both sharps and flats
• Auto-progression: Moves to next edge when correct
• Randomized variety: Includes rare note spellings like B# and Cb
• Mobile friendly: Works on phones and tablets
• No installation: Runs in any modern web browser

🚀 Try It Now

Play Lattice Learner →

🛠️ For Developers

Quick Start

git clone https://github.com/insanedefaults/lattice-learner.git
cd lattice-learner
# Open index.html in your browser - no build process needed!

Tech Stack

• Pure HTML/CSS/JavaScript (ES6)
• No dependencies or frameworks
• Mathematical CSS positioning
• Progressive web app ready

File Structure

• tonnetz.js - Core music theory and game logic
• app.js - UI controller and input validation
• index.html - Clean, minimal interface
• style.css - Responsive design with calculated positions

🎓 Educational Background

The Tonnetz lattice comes from 19th-century music theory and helps visualize:

• How chords are constructed from intervals
• Why certain chord progressions sound natural
• The mathematical relationships underlying Western harmony
• How to think spatially about music theory

Perfect for music students, composers, and anyone curious about the geometric nature of musical harmony.

🤝 Contributing

Ideas for enhancements:

• Sound playback for intervals
• Different lattice orientations
• Chord identification mode
• Progress tracking and statistics
• Alternative tuning systems

📄 License

MIT License - feel free to use this for educational purposes!

---

Built with ♪ for music theory education