🎛️ CrumbVJ - Audio-Visual Live Performance System

FunkFox 🦊 feat. Schnippsi 🎀

🎯 Was ist CrumbVJ?

CrumbVJ ist ein VJ Setup für Live-Performances:

• Controller (CrumbMPC) - Button-Grid auf iPad/Phone/Laptop
• Display - Fullscreen Hydra Visuals auf HDMI/Beamer
• Server - Verbindet beide via WebSocket

┌─────────────────────────────────────────────────────────────────────────────┐
│                                                                             │
│   🎧 DJ              🎛️ CONTROLLER           👁️ DISPLAY                  │
│   (Strudel)          (iPad/Browser)          (HDMI/Beamer)                 │
│                            │                       │                        │
│                            └───────────────────────┘                        │
│                                      │                                      │
│                               WebSocket                                    │
│                                      │                                      │
│                            ┌─────────▼─────────┐                           │
│                            │  🖥️ NODE SERVER   │                           │
│                            │   (crumbvj)       │                           │
│                            └───────────────────┘                           │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

🚀 Quick Start

# 1. Clone/Download
cd crumbvj

# 2. Install dependencies
npm install

# 3. Start server
npm start

# 4. Open in browser:
#    Controller: http://localhost:3000/controller
#    Display:    http://localhost:3000/display (press F for fullscreen)

📱 Controller (CrumbMPC)

Das Button-Grid für den VJ:

┌─────┬─────┬─────┬─────┐
│ 🟢  │ 🟣  │ 🔴  │ 🔵  │  ← Genre Presets
│REGG │HOUSE│ DNB │AMBI │
├─────┼─────┼─────┼─────┤
│ 🟤  │ 🟠  │ ⬛  │ 🌀  │
│BAOB │GFUNK│TECH │FEED │
├─────┼─────┼─────┼─────┤
│  ↻  │  ◐  │  ▦  │  ✦  │  ← FX Buttons
│ROTA │KALE │PIXI │GLIT │
└─────┴─────┴─────┴─────┘

[────────────────────]  ← Intensity
[────────────────────]  ← Speed

[BLACKOUT] [FLASH] [RESET]

Features:
- Touch-optimiert (iPad, Phone)
- Echtzeit-Verbindung zum Display
- Beat-Indicator
- Slider für Intensity & Speed

👁️ Display (Hydra)

Fullscreen Visuals auf HDMI/Beamer:

Keyboard Shortcuts:
| Taste | Aktion |
|-------|--------|
| 1-8 | Scene wechseln |
| F | Fullscreen |
| H | Info ein/aus |
| B | Blackout |
| R | Reset |
| Space | Flash |

Scenes:
1. REGGAE - Grün/Gold, langsam
2. HOUSE - Neon, Kaleidoskop
3. DNB - Rot/Orange, chaotisch
4. AMBIENT - Feedback, ethereal
5. BAOBAB - Earth tones
6. G-FUNK - Sunset, smooth
7. TECHNO - Dunkel, minimal
8. FEEDBACK - Infinite loop

🏗️ Architektur

crumbvj/
├── server.js           # Node.js WebSocket Server
├── package.json
├── README.md
│
├── controller/
│   └── index.html      # CrumbMPC Button Grid
│
└── display/
    └── index.html      # Hydra Fullscreen Visuals

🔌 API (WebSocket)

Controller → Server → Display

// Scene wechseln
{ type: 'scene', scene: 'house' }

// FX toggle
{ type: 'fx', fx: 'kaleid', active: true }

// Intensity (0-1)
{ type: 'intensity', value: 0.7 }

// Speed (0.1-2.0)
{ type: 'speed', value: 1.5 }

// Commands
{ type: 'command', command: 'blackout' }
{ type: 'command', command: 'flash' }
{ type: 'command', command: 'reset' }

Server → Clients

// Beat sync
{ type: 'beat', beat: 0 }  // 0-3

// FFT data (future)
{ type: 'fft', values: [0.8, 0.3, 0.2, 0.1] }

🎪 Live Setup

Minimales Setup

Laptop
├── Browser 1: /controller (VJ bedient)
└── Browser 2: /display (HDMI → Beamer)

Volles Setup

DJ Laptop
├── Strudel REPL (Audio)
└── Audio Out → PA

VJ iPad
└── /controller

Display PC
├── /display (HDMI → Beamer/LED Wall)
└── Audio In → FFT Analyse (future)

Server
└── Raspberry Pi / Laptop mit Node.js

🔮 Roadmap

• [x] Controller UI
• [x] Display (Hydra)
• [x] WebSocket Server
• [ ] Audio Input (FFT)
• [ ] MIDI Controller Support
• [ ] Scene Editor
• [ ] Recording/Streaming
• [ ] Strudel Integration

🎵 Mit Strudel kombinieren

1. Öffne https://strudel.cc in einem Tab
2. Öffne /display in einem anderen Tab
3. Audio von Strudel geht zu Speakers
4. Visuals reagieren auf Controller Buttons

Zukünftig: Audio-Analyse direkt von Strudel → FFT → CrumbVJ

🌲 Crumbforest

CrumbVJ ist Teil des Crumbforest Ökosystems:

• CrumbMidi - Music Patterns
• CrumbVector - Semantic Code Search
• CrumbRegistry - Federation Network
• CrumbVJ - Audio-Visual System

📜 Lizenz

MIT + CKL (Children's Knowledge License)

🦊 Credits

• FunkFox 🦊 - Audio Patterns
• Schnippsi 🎀 - Visual Design
• Hydra - Visual Engine (Olivia Jack)
• Strudel - Audio Engine (Felix Roos, Alex McLean)

     🎧 CRUMB DJ  +  🎛️ CRUMB MPC  +  👁️ CRUMB VJ

     Sound → Controller → Visuals → Audience

     🌲 CRUMBFOREST 🌲

     Wuuuhuuuuu! 🦉✨