🎪 CRUMBLIVE - Complete Live Performance System
FunkFox 🦊 feat. Schnippsi 🎀 feat. Dumbo 🐘 (Hardware)
"Beardyman macht's mit seiner Stimme - wir machen's mit dem Wald!" 🌲
🎯 Die Vision
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ 🎪 CRUMBLIVE STACK 🎪 │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 🎤 IN │ │ 🎹 MIDI │ │ 💡 DMX │ │ 🎛️ CTRL │ │
│ │ Audio │ │ IN/OUT │ │ WLED │ │ Tracker │ │
│ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │
│ │ │ │ │ │
│ └──────────────┴──────────────┴──────────────┘ │
│ │ │
│ ┌─────────▼─────────┐ │
│ │ 🌲 CRUMBLIVE │ │
│ │ SERVER │ │
│ │ │ │
│ │ • Node.js │ │
│ │ • WebSocket │ │
│ │ • MQTT Bridge │ │
│ │ • FFT Analysis │ │
│ └─────────┬─────────┘ │
│ │ │
│ ┌─────────────────────┼─────────────────────┐ │
│ │ │ │ │
│ ┌────▼────┐ ┌─────▼─────┐ ┌────▼────┐ │
│ │ 🎵 DJ │ │ 👁️ VJ │ │ 💡 LJ │ │
│ │ Strudel │ │ Hydra │ │ WLED │ │
│ │ │ │ CrumbVJ │ │ DMX │ │
│ └─────────┘ └───────────┘ └─────────┘ │
│ │
│ 🔊 → 👁️ → 💡 → 🎪 │
│ Sound Visual Light AUDIENCE │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
✅ Was schon funktioniert (v0.9)
[x] Strudel Patterns (9 Missions)
[x] CrumbVJ Controller + Display
[x] WebSocket Sync
[x] Hydra Visuals (Genre Presets)
[x] Audio-Reactive (FFT)
[x] HUE Slider für EFX
[x] WAV Export
[x] Multiplayer (2+ Browser)
🎤 FEATURE 1: Audio Input
Was Strudel bereits kann:
// Microphone Input!
$: sound("in").gain(0.8)
// Mit Effekten:
$: sound("in")
.delay(0.5)
.room(0.3)
.lpf(sine.range(500, 2000).slow(4))
// Live Sampling (Beatbox style!)
$: sound("in")
.slice(8, "<0 3 2 7 1 4 6 5>") // Slicen wie ein Sampler!
Was wir bauen:
// Audio File Player
samples({
'track': 'https://url.to/mixcloud-rip.mp3'
})
$: s("track").begin(0).end(1).slow(60) // Ganzer Track
// Live Input zu Hydra FFT
// → CrumbLive Server nimmt Audio Input
// → Analysiert FFT
// → Sendet an alle Clients via WebSocket
// → Hydra reagiert auf LIVE Musik!
Setup:
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 🎤 Mic │ │ 🎧 DJ Mixer │ │ 📁 Files │
│ Beatbox │ │ Line In │ │ WAV/MP3 │
└──────┬──────┘ └──────┬──────┘ └──────┬──────┘
│ │ │
└───────────────────┴───────────────────┘
│
┌────────▼────────┐
│ Web Audio API │
│ FFT Analysis │
└────────┬────────┘
│
┌────────────┴────────────┐
│ │
┌────▼────┐ ┌─────▼─────┐
│ Strudel │ │ CrumbVJ │
│ sound() │ │ a.fft[] │
└─────────┘ └───────────┘
🎹 FEATURE 2: MIDI IN/OUT
Was Strudel bereits kann:
// MIDI Output - zu Reason, Ableton, Hardware!
$: note("<c4 e4 g4 e4>")
.midi() // Sendet MIDI!
.midichan(1) // Kanal 1
// MIDI Input - von Controller!
$: ccv(74) // CC #74 Value
.range(200, 2000) // Map zu Frequenz
// → Als Filter nutzen!
// Komplettes MIDI Setup:
$: note("<c3 e3 g3 b3>")
.midi()
.midichan(1)
.velocity(0.8)
.ccv(1, 64) // Modwheel
CrumbLive MIDI Bridge:
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ 🎹 MIDI IN 🎹 MIDI OUT │
│ ────────── ─────────── │
│ │
│ Akai APC ─┐ ┌─► Reason │
│ Launchpad ─┼──► CrumbLive ──────┼─► Ableton │
│ Beatstep ─┤ Server ├─► Hardware Synth │
│ Any Controller─┘ └─► MIDI Thru │
│ │
│ Features: │
│ • Button → Scene Wechsel │
│ • Fader → slider() Werte │
│ • Pads → Sample Trigger │
│ • Encoder → Parameter Kontrolle │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Node.js MIDI Bridge:
// npm install midi
const midi = require('midi')
const input = new midi.Input()
const output = new midi.Output()
input.on('message', (deltaTime, message) => {
const [status, note, velocity] = message
// CC → WebSocket → Strudel slider
if ((status & 0xF0) === 0xB0) {
wss.broadcast({ type: 'cc', cc: note, value: velocity })
}
// Note → WebSocket → Sample Trigger
if ((status & 0xF0) === 0x90) {
wss.broadcast({ type: 'note', note, velocity })
}
})
💡 FEATURE 3: DMX & WLED Integration
Architektur:
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ 🎵 AUDIO FFT │
│ │ │
│ ▼ │
│ ┌─────────────┐ MQTT ┌─────────────┐ │
│ │ CrumbLive │ ───────────────►│ ESP32 │ │
│ │ Server │ │ WLED │ │
│ └─────────────┘ └──────┬──────┘ │
│ │ │ │
│ │ WebSocket │ LED Data │
│ ▼ ▼ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Hydra │ │ 💡💡💡💡💡 │ │
│ │ Visuals │ │ LED Strip │ │
│ └─────────────┘ └─────────────┘ │
│ │
│ GENRE → COLOR MAPPING: │
│ 🟢 Reggae → Green/Gold/Red │
│ 🟣 House → Neon Pink/Cyan │
│ 🔴 DnB → Red/Orange strobe │
│ 🔵 Ambient → Slow blue fade │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
MQTT → WLED:
// npm install mqtt
const mqtt = require('mqtt')
const client = mqtt.connect('mqtt://localhost:1883')
// FFT → WLED
function sendToWLED(fft, scene) {
const colors = genreColors[scene]
// WLED JSON API
const payload = {
on: true,
bri: Math.floor(fft[0] * 255), // Bass → Brightness
seg: [{
col: [
colors.primary,
colors.secondary
],
fx: scene === 'dnb' ? 12 : 0, // Strobe für DnB
sx: Math.floor(fft[1] * 255) // Low-mid → Speed
}]
}
client.publish('wled/all', JSON.stringify(payload))
}
ESP32 + WLED Setup:
Hardware:
├── ESP32 DevKit
├── WS2812B LED Strip (5V)
├── 5V Power Supply
└── WLAN Verbindung
Software:
├── WLED Firmware (https://install.wled.me)
├── MQTT Sync aktivieren
└── CrumbLive als MQTT Source
→ QDRANT → Crumbforest:
// Scene-Erkennung mit Embeddings!
// Audio Features → QDRANT → Ähnlichste Genre → WLED Preset
async function detectScene(fftFeatures) {
const embedding = await model.embed(fftFeatures)
const results = await qdrant.search('scenes', {
vector: embedding,
limit: 1
})
return results[0].payload.scene // 'reggae', 'house', etc.
}
🎛️ FEATURE 4: Tracker/Controller UI
Vision: Ableton-Style Grid für Strudel
┌─────────────────────────────────────────────────────────────────────────────┐
│ 🎛️ CRUMB TRACKER [▶] [■] [●REC] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ SCENES │ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │ │
│ ───────────────────────────────────────────────── │
│ 🥁 Drums │[■]│[ ]│[■]│[ ]│[■]│[ ]│[■]│[ ]│ ← Mute/Unmute │
│ 🎸 Bass │[■]│[■]│[■]│[■]│[ ]│[ ]│[ ]│[ ]│ │
│ 🎹 Keys │[ ]│[ ]│[■]│[■]│[■]│[■]│[ ]│[ ]│ │
│ 🎤 Vox │[ ]│[ ]│[ ]│[ ]│[■]│[■]│[■]│[■]│ │
│ ───────────────────────────────────────────────── │
│ │
│ PARAMETERS │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Filter ════════════●═══════════════════════ 1200Hz │ │
│ │ Room ════●═══════════════════════════════ 0.3 │ │
│ │ Delay ════════════════●═══════════════════ 0.5 │ │
│ │ Gain ════════════════════════●═══════════ 0.8 │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ PATTERN EDITOR │
│ ┌────────────────────────────────────────────────────┐ │
│ │ bd . . . bd . . . bd . . . bd . . . │ │
│ │ . . . . sn . . . . . . . sn . . . │ │
│ │ hh hh hh hh hh hh hh hh hh hh hh hh hh hh hh hh │ │
│ └────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Implementation:
// React Component für Track
function Track({ name, pattern, muted, onMute, onEdit }) {
return (
<div className="track">
<span className="name">{name}</span>
<button onClick={onMute}>{muted ? '[ ]' : '[■]'}</button>
<div className="pattern">{pattern}</div>
</div>
)
}
// Strudel Integration
const tracks = {
drums: { pattern: 'bd ~ bd ~', muted: false },
bass: { pattern: 'c2 ~ g2 ~', muted: false },
keys: { pattern: '<Am G F E>', muted: true }
}
// Generate Strudel code from tracks
function generateCode(tracks) {
return Object.entries(tracks)
.filter(([_, t]) => !t.muted)
.map(([name, t]) => `$: ${t.pattern} // ${name}`)
.join('\n')
}
🗺️ ROADMAP
Phase 1: Audio Bridge (v1.0)
[ ] Audio Input Node Server
[ ] FFT → WebSocket
[ ] Live Mic to Hydra
[ ] File Playback (WAV/MP3)
Phase 2: MIDI Bridge (v1.1)
[ ] WebMIDI in Browser
[ ] Node.js MIDI Bridge
[ ] Controller Mapping UI
[ ] MIDI Out to DAW
Phase 3: Light Bridge (v1.2)
[ ] MQTT Integration
[ ] WLED Presets per Genre
[ ] DMX Bridge (Art-Net)
[ ] ESP32 Templates
Phase 4: Tracker UI (v1.3)
[ ] Scene Grid
[ ] Track Mute/Solo
[ ] Pattern Editor
[ ] Parameter Automation
Phase 5: Crumbforest Integration (v2.0)
[ ] QDRANT Scene Detection
[ ] Auto-Genre via Embeddings
[ ] AI Pattern Suggestions
[ ] Collaborative Jam Sessions
🐘 Hardware Corner (Dumbo's Domain)
Minimal Setup:
├── Laptop + Browser
├── Audio Interface (optional)
└── Internet für strudel.cc
Pro Setup:
├── Laptop + Local Strudel
├── Audio Interface (4+ channels)
├── MIDI Controller (Launchpad, APC)
├── ESP32 + WLED Strip
├── Beamer/LED Wall
├── PA System
└── Crumbforest Server (optional)
DIY ESP32 WLED Box:
┌───────────────────────────┐
│ 🔲 ESP32 WLED Controller │
│ │
│ [PWR] [USB] [LED OUT] │
│ │
│ • WLAN: CrumbLive │
│ • MQTT: Enabled │
│ • Sync: UDP Multicast │
│ │
└───────────────────────────┘
🙏 Inspiration
- Beardyman - One-Man-Band Live Looping
- Strudel/TidalCycles - Live Coding
- Hydra - Live Visual Coding
- WLED - Open Source LED Control
- Crumbforest - Open Knowledge Sharing
🌲 Crumbforest Spirit
Nullfeld = Jede Frage willkommen
Wer fragt, wächst = Neugier ist die Währung
Codex = Wissen gehört allen
Atmen → Wachsen → Teilen → Atmen...
Kindgerecht. Immer. 🌱
🎤 IN → 🎵 PROCESS → 👁️ VISUAL → 💡 LIGHT → 🎪 STAGE
Beardyman Style - aber Open Source!
🌲 CRUMBLIVE - Where Sound Becomes Light 🌲
Wuuuhuuuuu! 🦉✨