Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

Seeing the Sound

1. Kurzbeschreibung

„Seeing the Sound“ ist ein interaktives VR-Erlebnis, das Klang sichtbar macht. Das Projekt entstand aus dem Wunsch, Musik und Geräusche nicht nur hörbar, sondern auch sichtbar und erlebbar zu machen. Mithilfe eines Audioanalyzers werden Hoch-/Mittel- und Tieftöne in Echtzeit ausgewertet und in Farben und Licht im Raum umgesetzt. Der Fokus liegt nicht nur auf Musik, sondern auf Klang im Allgemeinen. Das Ergebnis ist eine immersive Umgebung, in der jeder beliebige Ton Teil der Erfahrung werden kann.

2. Filmische Dokumentation

3. Bilder der Umsetzung / Anwendung / Ausstellung

Umsetzung_page-0001.jpgUmsetzung_page-0001.jpg
Anwendung_page-0001.jpgAnwendung_page-0001.jpg
Ausstellung_page-0001.jpgAusstellung_page-0001.jpg

4. Finales Pitch Deck

Seeing the Sound Pitchdeck.pdf PDF Seeing the Sound Pitchdeck.pdf

5. Userflow

Nicis und Julies Interaction-Reise KD6 - User Flow.jpgNicis und Julies Interaction-Reise KD6 - User Flow.jpg

6. Designprozess

Designprozess 1_page-0001.jpgDesignprozess 1_page-0001.jpg
Designprozess 2_page-0001.jpgDesignprozess 2_page-0001.jpg
Designprozess 3_page-0001.jpgDesignprozess 3_page-0001.jpg
Designprozess 4_page-0001.jpgDesignprozess 4_page-0001.jpg
Designprozess 5_page-0001.jpgDesignprozess 5_page-0001.jpg
Interaction Design Werkschau_Variante 1.pngInteraction Design Werkschau_Variante 1.png
Finales Ergebnis.jpgFinales Ergebnis.jpg

7. Links zu Quellcode & Prototypen

Screenshot 2025-07-21 001356.pngScreenshot 2025-07-21 001356.png
Screenshot 2025-07-21 001535.pngScreenshot 2025-07-21 001535.png
IMG_3428.JPGIMG_3428.JPG
IMG_4903.JPGIMG_4903.JPG
IMG_4906.JPGIMG_4906.JPG

_________________________________________

Themensammlung

Nici und Julies Interaction-Reise KD6 - Themensammlung Cluster.jpgNici und Julies Interaction-Reise KD6 - Themensammlung Cluster.jpg
Nici und Julies Interaction-Reise KD6 - Themensammlung Cluster 2.jpgNici und Julies Interaction-Reise KD6 - Themensammlung Cluster 2.jpg

Gemeinsames Brainstorming mit Julia.

Korg NTS-3 kaos pad kit

IMG_8725.jpegIMG_8725.jpeg
IMG_8728.jpegIMG_8728.jpeg

Medien- & Projektsammlung

Nici und Julies Interaction-Reise KD6 - Projekt-Recherche zur Inspo.jpgNici und Julies Interaction-Reise KD6 - Projekt-Recherche zur Inspo.jpg
Nici und Julies Interaction-Reise KD6 - Mögliche interessante Medien.jpgNici und Julies Interaction-Reise KD6 - Mögliche interessante Medien.jpg

Erweiterte Projektsammlung

Erweiterte Projektsammlung.jpgErweiterte Projektsammlung.jpg

What How Why

Nicis und Julies Interaction-Reise KD6 - Projektskizze & Why, How, What Ideen.jpgNicis und Julies Interaction-Reise KD6 - Projektskizze & Why, How, What Ideen.jpg

Pitch Deck

Pitch Decks IxD KD6 Sommer 2025 (1).pdf PDF Pitch Decks IxD KD6 Sommer 2025 (1).pdf

Ausbreitung der Möglichkeiten

Nicis und Julies Interaction-Reise KD6 - Konkretisierung (2).jpgNicis und Julies Interaction-Reise KD6 - Konkretisierung (2).jpg
Nicis und Julies Interaction-Reise KD6 - Projektvarianten (1).jpgNicis und Julies Interaction-Reise KD6 - Projektvarianten (1).jpg
Nicis und Julies Interaction-Reise KD6 - Überblick über Möglichkeiten (2).jpgNicis und Julies Interaction-Reise KD6 - Überblick über Möglichkeiten (2).jpg

Übersicht Konzepte

Nicis und Julies Interaction-Reise KD6 - Cluster.jpgNicis und Julies Interaction-Reise KD6 - Cluster.jpg

Raum X001 in Blender

Stand: 5.05.25

Screenshot 2025-05-04 144041.pngScreenshot 2025-05-04 144041.png

Stand 18.05.25

Screenshot 2025-05-25 174654.pngScreenshot 2025-05-25 174654.png

Stand: 25.05.25

Screenshot 2025-05-25 173648.pngScreenshot 2025-05-25 173648.png
Screenshot 2025-05-25 173618.pngScreenshot 2025-05-25 173618.png

Exakte Raummaße

IMG_0880.jpegIMG_0880.jpeg

Nicis und Julies Interaction-Reise KD6 - Blender_ ausgerechnete Maße.jpgNicis und Julies Interaction-Reise KD6 - Blender_ ausgerechnete Maße.jpg

Blender – Sound to samples

Verschiebung auf Z-Achse

Puls

Farbe im X001

Screenshot 2025-05-18 221012.pngScreenshot 2025-05-18 221012.png

Luma AI – Interactive Scenes

Screenshot 2025-05-15 220431.pngScreenshot 2025-05-15 220431.png
X001_preview_360.jpgX001_preview_360.jpg

Cables.gl – Interaktivität

Stand 25.05. 

image.pngimage.png
Screenshot 2025-05-25 181232.pngScreenshot 2025-05-25 181232.png

Stand 01.06.

MicrophoneIn & X001-Modell

Screenshot 2025-06-01 230203.pngScreenshot 2025-06-01 230203.png
Screenshot 2025-06-01 231008.pngScreenshot 2025-06-01 231008.png

Reinladen einzelner 3D-Modelle (fail)

Screenshot 2025-06-01 230618.pngScreenshot 2025-06-01 230618.png
Screenshot 2025-06-01 231114.pngScreenshot 2025-06-01 231114.png

Versuch des Debuggings & Durchblick

Gemeinsames Prüfen & Cables-Bsp.jpgGemeinsames Prüfen & Cables-Bsp.jpg
Gemeinsames Prüfen & Cables-Bsp2.jpgGemeinsames Prüfen & Cables-Bsp2.jpg

Stand 12.06.

Soundanalyse – Testing

Unterteilung in Hoch-, Mittel- & Tieftöne

Screenshot 2025-06-15 183041.pngScreenshot 2025-06-15 183041.png
Screenshot 2025-06-15 182943.pngScreenshot 2025-06-15 182943.png

Austausch der Büsten (Optimierungsbedarf)

Screenshot 2025-06-15 183542.pngScreenshot 2025-06-15 183542.png

VR-Testing mit vorhandenem Beispiel

IMG_2958.jpegIMG_2958.jpeg
IMG_2960.jpegIMG_2960.jpeg

Testing mit Büsten

Stand 22.06.

Screenshot 2025-06-22 230626.pngScreenshot 2025-06-22 230626.png
Nicis und Julies Interaction-Reise KD6 - Prozess_mainpoints.jpgNicis und Julies Interaction-Reise KD6 - Prozess_mainpoints.jpg

Stand 29.06.

Testing der Tief- & Hochtöne

Die verschiedenen Objekte reagieren erfolgreich auf Hoch-, Mittel- und Tieftöne.

5 Audiofiles einbetten (Fail)

Screenshot 2025-06-30 091409.pngScreenshot 2025-06-30 091409.png

Plakat Icons

Nicis und Julies Interaction-Reise KD6 - Plakat & Icons.jpgNicis und Julies Interaction-Reise KD6 - Plakat & Icons.jpg

Hilfe im Forum

Screenshot 2025-07-03 223359.pngScreenshot 2025-07-03 223359.png
Screenshot 2025-07-03 223420.pngScreenshot 2025-07-03 223420.png

Update: Nach einer Woche kam keine Antwort.

Stand 06.07.

Modell in VR sichtbar machen

Nicis und Julies Interaction-Reise KD6 - Prio Aufgaben (1).jpgNicis und Julies Interaction-Reise KD6 - Prio Aufgaben (1).jpg

Im folgenden Patch probierte ich die unterschiedlichen Lösungsmöglichkeiten aus, die ich auf Miro zusammengetragen habe:
https://cables.gl/p/k1yJ4Q

Screenshot 2025-07-06 101739.pngScreenshot 2025-07-06 101739.png
Screenshot 2025-07-06 101811.pngScreenshot 2025-07-06 101811.png
Screenshot 2025-07-06 101841.pngScreenshot 2025-07-06 101841.png

Um das Problem zu lösen, dass mein 3D-Modell in der VR-Brille nicht sichtbar ist, bin ich systematisch vorgegangen:

Ich habe mir Tutorials angesehen ( Importing GLTF Scenes & Mesh not showing in Edit mode) und gezielt Unterstützung durch ChatGPT eingeholt. Anschließend habe ich das offizielle VR-Beispiel aus Cables.gl vereinfacht, da dieser Patch in der VR-Brille funktioniert. Dabei habe ich nach und nach einzelne Nodes entfernt, um herauszufinden, welche für die Anzeige des Modells entscheidend sind (reduzierter VR-patch ). Dieses reduzierte Setup habe ich dann schrittweise in mein Sound-Patch integriert.

Zusätzlich habe ich die VRController-Nodes eingebaut. In der Cables-Preview im Headset werden sie korrekt angezeigt, in der VR-Ansicht sind sie jedoch nicht sichtbar – ebenso wie mein gesamtes Modell. Trotz aller Anpassungen und Tests wird mein Modell in der VR-Brille weiterhin nicht dargestellt.

Screenshot 2025-07-06 104529.pngScreenshot 2025-07-06 104529.png

VRController.jpgVRController.jpg

Back-Up Plan

Nicis und Julies Interaction-Reise KD6 - BackUp (2).jpgNicis und Julies Interaction-Reise KD6 - BackUp (2).jpg
Screenshot 2025-07-06 122403.pngScreenshot 2025-07-06 122403.png

In meinem Projekt wird Klang visuell erfahrbar gemacht. Ziel ist es, Musik erlebbar zu machen – nicht nur durch das Hören, sondern auch durch das Sehen. Gleichzeitig dürfen auch Klänge und andere Sounds Teil der Erfahrung sein.

Ich habe mich bewusst für den AudioAnalyzer entschieden, da er flexibel auf alle Umgebungsgeräusche reagiert – ob Musik, Sprache oder Geräusche – und die unterschiedlichen Frequenzbereiche live analysiert. Daraus entstehen visuelle Reaktionen im Raum: Farben, die je nach Tonhöhe und Intensität variieren.

Der Fokus liegt somit nicht nur auf Musik, sondern auf Klang im Allgemeinen. Der Titel „Seeing the Sound“ unterstreicht diese Offenheit und zeigt, dass jeder beliebige Ton Teil der Erfahrung werden kann.

Um Hintergrundgeräusche zu minimieren, habe ich die Lautstärke des MicrophoneInput auf 0.3 reduziert. Zusätzlich wurde eine mögliche Rückkopplung verhindert, indem der Audio-Output stummgeschaltet wurde.

Gezeigt wird das Projekt im VR-Viewmode, mit einfachen OrbitControls und leuchtenden Farben. Die vollständige Integration in die VR-Brille war zwar geplant, scheiterte jedoch an technischen Einschränkungen im Zusammenspiel von Cables.gl und dem Modell. Stattdessen wird der Patch im Viewmode gezeigt, da er dort stabil läuft und über den Browser dennoch mit der VR-Brille betrachtet werden kann.

UPDATE:

Das Modell konnte in VR gebracht werden, nachdem der Patch von Grund auf neu aufgebaut wurde. Es war ein Fehler, der durch das Kopieren aus anderen Patches entstand. Danach wurde das Modell aber nur auf einem Auge angezeigt. Auf 2 Augen wurde es sichtbar, nachdem der „Clear-color“-Node entfernt wurde, da dieser den Shader der VR-Brille störte.

Finaler Prototyp

Screenshot 2025-07-21 001356 (1).pngScreenshot 2025-07-21 001356 (1).png

Userflow

Nicis und Julies Interaction-Reise KD6 - User Flow (1).jpgNicis und Julies Interaction-Reise KD6 - User Flow (1).jpg

Plakat

Moodboard

Nicis und Julies Interaction-Reise KD6 - Moodboard Plakat.jpgNicis und Julies Interaction-Reise KD6 - Moodboard Plakat.jpg

Plakatskizze

Screenshot 2025-06-16 100451.pngScreenshot 2025-06-16 100451.png

Finale Plakatvarianten

Interaction Design Werkschau_Variante 1.pngInteraction Design Werkschau_Variante 1.png
Interaction Design Werkschau_Variante 2.pngInteraction Design Werkschau_Variante 2.png

Epson_fertig gedruckt.jpgEpson_fertig gedruckt.jpg

Ausstellungssituation

Skizze

Nicis und Julies Interaction-Reise KD6 - Ausstellungssituation.jpgNicis und Julies Interaction-Reise KD6 - Ausstellungssituation.jpg

Plot

Finales Ergebnis.jpgFinales Ergebnis.jpg
Prozess Folie 2.jpgProzess Folie 2.jpg
Prozess2.jpgProzess2.jpg
Prozess Folie.jpgProzess Folie.jpg

Anleitung & Beschreibungstext

Screenshot 2025-07-21 195308.pngScreenshot 2025-07-21 195308.png

Finale Austellungssituation

IMG_3547.JPGIMG_3547.JPG
IMG_3548.JPGIMG_3548.JPG
IMG_3522.JPGIMG_3522.JPG

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Designprojekt 3: Interaction / Information Design

Entstehungszeitraum

Sommersemester 2025