EMO House
Turning emotion into an interactive audiovisual system
OVERVIEW
I designed and built EMO HOUSE, an interactive audiovisual system that translates free-form descriptions of how we feel into generative house music and visuals. Users can adjust the interpretation in real time and save the result as a personal state.
Time July 2026
Role Interaction Design · Prototyping · Creative Coding · Visual Design
Tools Figma, HTML/CSS/JavaScript, p5.js, Tone.js, Claude
QUESTION
Mood-based music experiences often rely on fixed labels or pre-made playlists, while the way we describe how we feel is much more ambiguous.
What if, instead of choosing a playlist for a mood, we could shape the music itself around how we feel?
BUILDING THE INTERACTION MODEL
The interpretation is a starting point, not a conclusion.
Users can reshape the initial interpretation through five emotional dimensions, while Style controls how sparsely or fully the music is arranged.
INPUT
“I wanna be alone today.”
↓
INITIAL INTERPRETATION
↓
EMOTIONAL DIMENSIONS
ENERGY
TENSION
STABILITY
OPENNESS
VALENCE
↓
↓
SOUND
↓
tempo / tone / rthythm / space
+style (controls musical density and arrangement)
↓
VISUAL
↓
color / scale / motion / density
↓
EXPERIENCE
↓
USER ADJUST
Mapping Emotion to Sound & Visual
Each emotional dimension controls a specific set of sound and visual behaviors.
Control
Sound
Visual
Energy
BPM / intensity
pulse / breathing
Tension
hat & rhythmic density
pixel scale
Stability
variation / preset changes
scatter / flicker
Openness
reverb / stereo width / delay
spacing
Valence
brightness / tonal register
color palette
Style
arrangement / layer density
—
01 ENERGY
Tempo / Pulse
Energy controls the pace and physical intensity of the experience.
Higher values increase the tempo and make the visual pulse faster and stronger.
Low
Slower / Softer pulse
High
Faster / Stronger pulse
02 TENSION
Rhythmic Density / Pixel Resolution
Tension changes the density and sharpness of the system.
Higher tension introduces tighter percussion and breaks the visual into finer pixels.
Low tension
0
Mid
50
High tension
100
03 STABILITY
Pattern Variation / Scatter
Stability controls how fixed or variable the system feels.
Lower values shift rhythmic patterns and scatter the outer pixels, while higher values return both toward a more consistent structure.
Unstable
0
Mid
50
Stable
100
04 OPENNESS
Spatial Depth / Spacing
Openness expands the perceived space of the experience.
Higher values introduce more reverb, delay, and stereo width while increasing the spacing between pixels.
Low
Closed
High
Open
05 VALENCE
Tonal Brightness / Color
Valence shifts the tonal and visual brightness of the system.
Higher values open the sound filters while moving the visual through a brighter color palette.
Low
0 - 40
Mid
40 - 60
High
60 - 100
+ STYLE
Shaping the Arrangement
Alongside the five emotional dimensions, Style controls how fully the musical arrangement develops—from a minimal groove to a more layered house composition.
EXPERIENCE
01 — Express your emotion
Describe how you’re feeling in your own words.
EMO HOUSE interprets your input and translates it into an initial sound and visual experience.
02 — Reshape the interpretation
Use the sliders to adjust the initial interpretation and shape it closer to how you actually feel.
Changes are reflected in the sound and visuals in real time.
03 — Save your mix
Save your customized experience to build a personal playlist you can return to and replay anytime.
Try the prototype ↗
REFLECTION
Designing emotion is less about defining how someone feels, and more about creating space for them to shape it.
EMO House began as a system for translating emotional input into sound and visuals, but the process showed me that the initial interpretation should never be the final answer. By allowing users to adjust the dimensions themselves, the experience shifted from simply representing emotion to giving users control over how it is expressed.
그리고 생각보다 음악을 컨트롤하는게 힘들었음 내용 추가
Next →