Piano Projection Visualizer 🎹✨

Eine audiovisuelle Installation zur Live-Visualisierung von Klavierspiel

1. Projektidee

Unser Projekt visualisiert live gespielte Klaviertöne (via MIDI) mit Hilfe von TouchDesigner. Sobald eine Taste gedrückt wird, erscheint ein Feedback-basierter visueller Effekt. Die Visualisierung wird projiziert – z. B. auf eine Wand – und macht das Klavierspiel auch visuell erfahrbar.

2. Setup & Komponentenplan

Hardware:

• Yamaha CLP-785 (MIDI)
• MacBook Pro (TouchDesigner 2023.12230, non-commercial)
• Projektor (Full HD, 16:9)

Software:

• TouchDesigner
• MIDI Input via midiin → Verarbeitung → Feedback → Projektion

Verbindungsschema:

3. Technische Umsetzung

MIDI-Verarbeitung

MIDI-Signale des Klaviers werden mit einem midiin-Operator empfangen und analysiert (select, event, trail, etc.).

Visualisierung

Jede gedrückte Taste löst einen farbigen Kreis mit Partikeleffekt & Feedback aus.
Die Klaviertastatur wird visuell horizontal gestreckt (88 Tasten auf 16:9). Die Mapping-Logik verwendet lookup, math, pattern, um Positionen auf der X-Achse zuzuweisen.

Beispielansicht

4. Reproduzierbarkeit

Quickstart

1. MIDI-Keyboard anschliessen
2. TouchDesigner öffnen → MIDIverse.toe laden
3. MIDI-In richtig konfigurieren (Gerät auswählen)
4. Projektor-Output richtig konfigurieren (Gerät auswählen)
5. Mit dem Klavierspielen starten

Projekt selbst nachbauen (für Fortgeschrittene)

1. Erstelle einen neuen .toe-File in TouchDesigner.
2. Baue eine MIDI-Input-Struktur mit folgenden CHOPs:
   • midiin, select, info, event, trail, math, pattern, lookup
   • Nutze selectCHOPs um Note-On/Off und Velocity zu isolieren.
3. Baue ein DAT oder CHOP Netzwerk zur Analyse der Tastenevents.
4. Verwende einen feedback-TOP-Loop:
   • feedback, transform, level, blur
5. Visualisiere gedrückte Tasten mit Kreisen (z. B. über Circle SOP, Geo, Instance + Phong MAT)
6. Steuere deren Position über MIDI-Note-Mapping (Note → X-Achse)
7. Nutze colormap oder noise + LUT zur Farbstreuung.
8. Kombiniere dein Visual über composite und crop zu einem finalen Bild.
9. Ausgabe via Window COMP oder HDMI-Projektion konfigurieren.

Tipp: Verwende Netzwerk-Boxen und Farben zur besseren Struktur!

5. Umsetzungsprozess

Teamarbeit & Planung

Projektteam: Jonas, Giacumin
Wir haben uns viermal vor Ort getroffen, Aufgaben aufgeteilt und gemeinsam getestet. Ziel war eine minimalistische, aber wirkungsvolle Visualisierung, die Live-Musik unmittelbar übersetzt.

Aufgabenverteilung: Wir haben alle Elemente gemeinsam erarbeitet und ausprobiert. Die Umsetzung war ein gemeinsamer kreativer und technischer Prozess, bei dem wir uns wechselseitig ergänzt und unterstützt haben. Es gab keine strikte Aufgabentrennung – stattdessen haben wir gemeinsam geforscht, getestet und angepasst.

Hilfsmittel:

• ChatGPT: zur Ideenfindung, für Fragen zu TouchDesigner-Operatoren, Optimierung der Feedback-Loops
• TouchDesigner Dokumentation (online)

Entwicklungsprozess

• Start: Einfache MIDI-Verarbeitung – Note-On/Off erkennen
• Ziel: Live-generierte Projektion aller gespielten Tasten mit Feedback-Ästhetik
• Iterationen:
  • V1: Punkte pro Taste, keine Dynamik
  • V2: Feedback-Loop für "Klangspur"-Effekt
  • V3: Zufällige Farben über Noise & Colormap
  • V4: Optimierung der Performance durch Kompression & Pixel-Format-Anpassung

Herausforderungen

• 88-Tasten-Mapping auf 16:9 Format: mathematisch korrekt auflösen und visuell gleichmässig verteilen
• Dynamische Darstellung pro Taste: Velocity & Duration korrekt erfassen
• Feedback: Schleife darf sich nicht unkontrolliert aufschaukeln → levelTOP + transformTOP genutzt

Lösung

• feedback-TOPs mit transform & level kontrolliert
• Alle Positionen mit lookup und math skaliert
• Farbauswahl über Noise & Colormap

Verworfen / Umplanung

• Ursprünglich wollten wir pro Note auch Audio-Wellenformen darstellen → zu rechenintensiv
• Ursprünglich sollten visuelle Formen nach Velocity skalieren → optisch unruhig, verworfen

Known Bugs

• Bei sehr schnellem Spiel mit Pedal können einzelne Töne visuell nicht mehr dargestellt werden
• Feedback-Effekte können bei Dauerbespielung "ausfransen", da keine automatische Reset-Zeit eingebaut ist

6. Lernfortschritt

• Einstieg in TouchDesigner
• MIDI in TouchDesigner verstehen und nutzbar machen
• Performance-Optimierung von Visuals durch Kompositing und effiziente TOPs
• Zusammenarbeit im Kreativ-Technologie-Kontext mit Hardware-Anbindung
• Nutzung von Feedback-Schleifen
• Visual Mapping für Audio
• Generatives Design & Projektion
• KI gezielt einsetzen, um Probleme schneller zu lösen oder Designfragen zu klären

7. Video 🎥

8. Screenshots

Projektübersicht

MIDI-Verarbeitung

Farben & Formen

Feedback & Output