🎵👁️ CrumbVisuals - Audio-Visual Live Coding
Strudel + Hydra + Crew = Die ultimative Show!
🎯 Die Vision
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ 🎵 SOUND → 👁️ VISUALS │
│ │
│ ┌─────────────────┐ ┌─────────────────────────────────┐ │
│ │ STRUDEL │ │ HYDRA │ │
│ │ Audio Patterns│ ───► │ WebGL Live Visuals │ │
│ │ │ │ • Shapes │ │
│ │ sound("bd") │ H() │ • Colors │ │
│ │ note("c4") │ ───► │ • Feedback │ │
│ │ .gain() │ │ • Audio-Reactive │ │
│ └─────────────────┘ └─────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────┐ │
│ │ CRUMBVISUALS │ │
│ │ • Crew Characters │ │
│ │ • Tailwind Overlays │ │
│ │ • Schnippsi Integration │ │
│ │ • Full VJ Setup │ │
│ └─────────────────────────────┘ │
│ │
│ Sound → Resonanz → Tanz → Atmen → Crumbforest │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
🔧 Was Strudel + Hydra BEREITS können
1. Hydra initialisieren
await initHydra()
// Mit Audio-Detection
await initHydra({ detectAudio: true })
// Mit Strudel Visuals (pianoroll, spiral, scope)
await initHydra({ feedStrudel: true })
2. Patterns als Visual Input: H()
await initHydra()
// Pattern definieren
let pattern = "3 4 5 [6 7]*2"
// Pattern → Hydra Shape
shape(H(pattern)).out(o0)
// Pattern → Audio
n(pattern).scale("A:minor").piano().room(1)
3. Audio-reaktive Visuals
await initHydra({ detectAudio: true })
// a.fft[0-3] = Frequenzbänder
osc(10, 0.1, () => a.fft[0] * 4)
.color(1, 0.5, () => a.fft[1])
.modulate(noise(() => a.fft[2] * 3))
.out()
// Audio
sound("bd sd [hh hh] sd").room(0.5)
4. Strudel Visualizations in Hydra
await initHydra({ feedStrudel: true })
// s0 = Strudel Canvas (pianoroll, spiral, scope)
src(s0)
.saturate(2)
.kaleid(4)
.modulate(noise(2), 0.1)
.out()
// Audio mit Visual Feedback
note("c3 e3 g3 b3").piano()._scope() // oder ._pianoroll() oder ._spiral()
🌟 HYDRA Basics
Hydra ist ein visueller Synthesizer im Browser:
// SOURCES (Quellen)
osc(freq, sync, offset) // Oszillator
noise(scale) // Rauschen
shape(sides, radius, smooth) // Formen
solid(r, g, b, a) // Farbe
gradient(speed) // Gradient
voronoi(scale, speed) // Voronoi-Muster
// GEOMETRY (Transformationen)
.rotate(angle, speed)
.scale(amount, xMult, yMult)
.pixelate(x, y)
.kaleid(sides)
.scroll(x, y, speedX, speedY)
// COLOR
.color(r, g, b, a)
.saturate(amount)
.contrast(amount)
.brightness(amount)
.invert(amount)
// BLEND (Kombinieren)
.add(source, amount)
.mult(source, amount)
.blend(source, amount)
.diff(source)
.modulate(source, amount)
// OUTPUT
.out() // → o0 (default)
.out(o1) // → o1
.out(o2) // → o2
.out(o3) // → o3
render() // Zeige alle 4 Outputs
render(o1) // Zeige nur o1
🎵👁️ CRUMBVISUALS PATTERNS
Pattern 1: Bass = Puls
await initHydra({ detectAudio: true })
// Visuals: Kreis pulsiert mit Bass
shape(4, () => 0.2 + a.fft[0] * 0.5)
.color(1, 0.3, 0.5)
.rotate(() => time * 0.1)
.out()
// Audio: Four on the floor
sound("bd bd bd bd")
.lpf(200)
.gain(1)
Pattern 2: Melodie = Farbe
await initHydra()
let melody = "0 2 4 7 4 2"
// Visuals: Farbe folgt Melodie
osc(10, 0.1, H(melody).div(12))
.color(
H(melody).div(7),
0.5,
H(melody).div(5).add(0.5)
)
.out()
// Audio
n(melody).scale("C:major").sound("sine").room(0.5)
Pattern 3: Full Audiovisual Reggae
await initHydra({ detectAudio: true })
// VISUALS
osc(3, 0.5, 1)
.rotate(() => time * 0.05)
.color(0.2, 1, 0.3) // Grün = Roots
.modulate(noise(() => a.fft[1] * 2), 0.2)
.mult(shape(4, () => 0.3 + a.fft[0] * 0.4)) // Bass = Puls
.saturate(1.5)
.out()
// AUDIO: One Drop
setcps(75/60/2)
$: sound("~ ~ bd ~").lpf(150)
$: sound("~ ~ rim ~").hpf(800).delay(0.5).dfb(0.6)
$: sound("hh*4").gain(0.3)
$: note("a1 ~ ~ a1, ~ a2 ~ ~").s("triangle").lpf(300)
Pattern 4: Ambient mit Feedback
await initHydra({ detectAudio: true })
// VISUALS: Feedback + Audio
src(o0)
.scale(1.01)
.rotate(() => 0.002)
.blend(
osc(6, 0, () => a.fft[2] * 2)
.color(0.5, 0.2, 1)
.modulate(noise(() => a.fft[1]), 0.1)
, () => a.fft[0] * 0.3
)
.out()
// AUDIO: Ambient
setcps(0.5)
$: note("<c3 e3 g3 b3>").sound("pad").room(0.9)
$: n(irand(7)).s("sine").gain(0.2).delay(0.5)
Pattern 5: House + Kaleidoskop
await initHydra({ detectAudio: true })
// VISUALS
voronoi(5, 0.3, 0.3)
.color(1, 0.5, () => a.fft[3])
.kaleid(() => 4 + a.fft[0] * 4)
.modulate(osc(10), () => a.fft[1] * 0.2)
.saturate(() => 1 + a.fft[2])
.out()
// AUDIO: House
setcps(128/60/2)
$: sound("bd bd bd bd").gain(1)
$: sound("~ hh ~ hh").hpf(6000).gain(0.5)
$: sound("~ ~ cp ~").room(0.3)
$: note("c2 ~ c2 ~, ~ ~ e2 g2").s("sawtooth").lpf(500)
🦊 CREW ON STAGE - Character Visuals
Die Idee: Waldwächter als Visuals!
await initHydra({ feedStrudel: true })
// Basis: Strudel Visualisierung
src(s0)
.saturate(1.5)
.out(o0)
// Character Layer (via HTML/Canvas)
// → Schnippsi Integration!
Konzept: Crew Canvas Overlay
<!-- Schnippsi UI Integration -->
<div id="crumb-stage" class="fixed inset-0 pointer-events-none">
<!-- Hydra Canvas (Background) -->
<canvas id="hydra-canvas" class="absolute inset-0 z-0"></canvas>
<!-- Crew Characters (Overlay) -->
<div id="crew-layer" class="absolute inset-0 z-10">
<!-- FunkFox 🦊 - Music Master -->
<div id="funkfox" class="absolute transition-all duration-200"
style="animation: bounce 0.5s infinite;">
🦊
</div>
<!-- Eule 🦉 - Wisdom -->
<div id="eule" class="absolute">
🦉
</div>
<!-- BashPanda 🐼 - Beats -->
<div id="bashpanda" class="absolute">
🐼
</div>
</div>
<!-- Info Overlay -->
<div id="info-layer" class="absolute bottom-4 left-4 z-20
bg-black/50 text-white p-4 rounded-lg">
<div class="text-2xl font-bold">🎵 CrumbVisuals Live</div>
<div class="text-sm opacity-75">Pattern: Reggae One Drop</div>
</div>
</div>
Tailwind Animation Classes
/* Pulsing with beat */
@keyframes pulse-beat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Bounce on kick */
@keyframes bounce-kick {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* Glow on snare */
@keyframes glow-snare {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.5) drop-shadow(0 0 10px white); }
}
/* Usage */
.pulse-beat { animation: pulse-beat 0.5s infinite; }
.bounce-kick { animation: bounce-kick 0.25s; }
.glow-snare { animation: glow-snare 0.1s; }
🔗 INTEGRATION ARCHITEKTUR
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ STRUDEL REPL │
│ ├── Audio Engine (WebAudio) │
│ ├── Pattern Engine (mini-notation) │
│ └── Hydra Bridge (await initHydra()) │
│ │ │
│ ├── H(pattern) → Hydra input │
│ ├── a.fft[0-3] → Audio analysis │
│ └── feedStrudel → Canvas capture │
│ │
│ HYDRA │
│ ├── WebGL Canvas │
│ ├── Sources (osc, noise, shape, src) │
│ ├── Transforms (rotate, scale, kaleid) │
│ └── Outputs (o0, o1, o2, o3) │
│ │
│ CRUMBVISUALS (Neu!) │
│ ├── Crew Character Layer (HTML/Canvas) │
│ ├── Schnippsi UI Integration │
│ ├── Tailwind Animations │
│ ├── MIDI/OSC Trigger → DOM Events │
│ └── Preset System (Genre → Visual Style) │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
🎨 GENRE → VISUAL PRESETS
G-Funk (98 BPM)
// Sunset colors, slow motion, smooth
osc(4, 0.2, 0.5)
.color(1, 0.6, 0.2) // Orange sunset
.rotate(() => time * 0.02)
.modulate(noise(1), 0.1)
DnB (196 BPM)
// Fast, glitchy, high contrast
voronoi(20, 2, 0)
.thresh(0.5)
.kaleid(8)
.scroll(1, 0)
House (128 BPM)
// Disco, colorful, kaleidoscope
osc(10, 0.5, 2)
.color(1, 0.5, 1)
.kaleid(6)
.rotate(() => time * 0.1)
Baobab (110 BPM)
// Earth tones, organic, flowing
noise(3)
.color(0.8, 0.5, 0.2) // Earth brown
.modulate(voronoi(10, 0.3), 0.2)
Reggae (75 BPM)
// Green/Gold/Red, slow pulse, roots
osc(3, 0.1, 1)
.color(0.2, 0.8, 0.1) // Green
.blend(solid(1, 0.8, 0), 0.3) // Gold
Ambient (30 BPM)
// Slow feedback, ethereal, space
src(o0).scale(1.005).rotate(0.002)
.blend(noise(2).color(0.2, 0.1, 0.5), 0.05)
🚀 QUICK START
// 1. Kopiere das in Strudel REPL:
await initHydra({ detectAudio: true })
// VISUALS
osc(10, 0.1, () => a.fft[0] * 2)
.color(1, 0.5, () => a.fft[1])
.rotate(() => time * 0.1)
.kaleid(() => 4 + a.fft[2] * 4)
.modulate(noise(() => a.fft[3]), 0.1)
.out()
// AUDIO
setcps(128/60/2)
$: sound("bd bd bd bd").gain(1)
$: sound("~ hh ~ hh ~ hh oh hh").gain(0.5).hpf(6000)
$: sound("~ ~ cp ~").room(0.3)
$: note("c2 ~ c3 ~").s("sawtooth").lpf(sine.range(200, 800).slow(4))
// 2. Drücke Play!
// 3. Visuals reagieren auf Audio! 🎵👁️
🦊 FunkFox VJ Rules
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ 👁️ "a.fft[0] = Bass, a.fft[1] = Low-Mid, a.fft[2] = High-Mid, │
│ a.fft[3] = Highs" │
│ │
│ 👁️ "H(pattern) = Pattern wird Visual-Parameter" │
│ │
│ 👁️ "Feedback: src(o0).scale(1.01).out() = unendliche Tiefe" │
│ │
│ 👁️ "kaleid() macht alles psychedelisch" │
│ │
│ 👁️ "modulate() = Verzerrung, der VJ Superpower" │
│ │
│ 👁️ "Slow = time * 0.01, Fast = time * 0.5" │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
🔮 ROADMAP: CrumbVisuals
- [x] Hydra + Strudel Integration (existiert!)
- [x] Audio-reactive Visuals (a.fft)
- [x] Pattern → Visual (H())
- [ ] Crew Character Overlay
- [ ] Schnippsi UI Integration
- [ ] Tailwind Animation Presets
- [ ] Genre → Visual Mapping
- [ ] MIDI Trigger → DOM Events
- [ ] Multi-Screen Setup (Projector)
- [ ] Recording/Streaming
🌲 Die Show
🎵 SOUND 👁️ VISUALS
Strudel Pattern → Hydra WebGL
│ │
│ H(pattern) │
│ a.fft[] │
│ │
▼ ▼
┌──────────────────────────────────────┐
│ │
│ 🦊 CREW ON STAGE 🦉 │
│ │
│ Resonanz → Tanz → Atmen │
│ │
│ 🌲 CRUMBFOREST 🌲 │
│ │
└──────────────────────────────────────┘
#crumbvisuals #hydra #strudel #vj #livecoding #audiovisual
🎵👁️✨