Piano Projection Mapping Tool

A web-based tool for mapping piano keys to projected visuals with configurable keystoning and real-time MIDI visualization.

Features

• MIDI Input: Connect to your MIDI keyboard or device via Web MIDI API
• Config Screen:
  • Visual 88-key piano that highlights keys when played
  • White grid overlay for projection mapping reference
  • 4-corner keystoning editor to adjust for projector angle
  • Save/load configuration
• Performance Screen:
  • Visual effects that light up corresponding key areas when notes are played
  • Random colors per note
  • Effects fade out when keys are released

Setup

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser to the URL shown (typically http://localhost:5173)

Usage

1. Connect MIDI Device:

   • Make sure your MIDI keyboard is connected
   • The browser will prompt for MIDI access permission
   • Select your MIDI device from the dropdown

2. Configure:

   • Play keys to see them highlight on the piano
   • Drag the 4 corner handles to adjust keystoning for your projector angle
   • Click "Save Config" to save your settings
   • Click "OK - Go to Performance" when ready

3. Performance:

   • The piano and grid become invisible
   • Play keys to see colored effects light up at the corresponding positions
   • Click "Back to Config" to return to configuration

Browser Compatibility

• Chrome/Edge: Full Web MIDI API support
• Firefox: Limited Web MIDI support (may require additional setup)
• Safari: No Web MIDI support

For best results, use Chrome or Edge.

Technical Details

• Built with React + TypeScript
• Uses Web MIDI API for MIDI input
• Canvas-based rendering for visual effects
• localStorage for configuration persistence
• Bilinear interpolation for keystoning transformation