Trance | Lucy Liu

Role Design + Code (solo)

Timeline Spring 2025

Tools p5.js · Arduino · WebSerial API

Methods User Testing · Physical Computing · Iteration

Interactive Audio-Visual Installation

Touch as performance.

Trance is an immersive installation that collapses the distance between listener and music. A clear acrylic hand sculpture embedded with pressure sensors lets you control everything you see and hear. The harder you press, the more the piece transforms around you.

Three types of trance inspired the piece: music trance (the beat pulls you in), focus trance (you get locked into the interaction), and visual trance (hypnotic light and patterns). The name is about the feeling of getting lost in music and losing track of time.

Trance: acrylic hand sculpture with layered blue-green panels, Arduino breadboard and pressure sensor visible underneath, on a wooden desk

Fig. 01: The sculpture — layered acrylic, FSR pressure sensor, Arduino, LED strip

01 Interaction

You walk up to a short video on the wall, "Diamonds Dancing" by Future & Drake setting the mood. A clear acrylic hand sculpture sits in front of you, its lights glowing softly. The video and the shape of the object together tell you exactly what to do: place your hand here.

Press lightly and you hear calm ambient sound, soft visuals drifting. Press harder and the Brazilian funk sections of "São Paulo" by The Weeknd start cutting through. The visuals get brighter, more complex. The longer and harder you press, the more intense everything becomes. Let go, and the piece slowly settles and breathes back down.

No instructions on a wall. No labels. The video, the hand form, and the LED feedback are the entire interface. During user testing, every participant understood instantly where to place their hand.

02 Technical Implementation

A force-sensitive resistor (FSR) sits inside the sculpture. An Arduino reads the pressure and sends one clean value at a time over USB. WebSerial connects that live data stream directly to a p5.js sketch in the browser, where it drives the visuals and the audio mix simultaneously.

The biggest technical challenge was the serial connection itself: older WebSerial libraries froze, ports refused to open, and fragmented readings were arriving as merged strings ("324335412" instead of separate values). The fix was simplifying the Arduino output to a single reading per line and rebuilding the serial layer with P5SerialLite, which made the data clean and the interaction responsive.

Visual states: ambient (soft gradients, slow movement, low saturation) and intense (tunnel effects, kaleidoscopes, glitchy motion). The LEDs in the sculpture mirror the same pressure mapping, so the physical object itself feels alive.

Phase 01 Introduction

"Diamonds Dancing" plays on the projected wall. The sculpture glows at rest, inviting touch. No prompts needed.

Phase 02 Transformation

Your pressure drives everything in real time. The FSR value maps to visual chaos, color energy, and the São Paulo audio mix simultaneously.

Phase 03 Return

Release and the system breathes back down. Gradual decay restores the ambient state for the next visitor.

Development setup: laptop running p5.js alongside the physical sculpture

03 Design Impact

The concept moves from surface to transformation. The intro video shows what's on the surface; the interaction reveals what's felt inside. Trance follows the same arc as "São Paulo" by The Weeknd: from a polished surface to a feeling of rebirth.

User testing confirmed that instruction-free design works when every element pulls its own weight. Testers immediately knew to place their hand; most wanted more feedback from the sculpture itself. That led to stronger LED patterns tied directly to pressure, with haptics planned for future iterations.

The main thing the piece asks: music is something you perform through your body, not just something you hear. Every person who touches the sculpture changes it a little. The audience is part of the artwork.

"You are not just a viewer — you are a participant."

Fabrication diagram: layered hand sculpture showing wood base, LED strip, FSR sensor, rubber/foam layer, tinted acrylic top

Fig. 02: Fabrication layers — wood base → LED → FSR → foam → acrylic

p5.js generative visual: psychedelic purple-blue concentric rings with white particle explosions responding to pressure

Fig. 03: High-pressure visual state — full Brazilian funk intensity

Reflection

What I took away.

Instruction-free interaction is a design constraint, not a bonus.

Building a piece that required zero explanation meant every element had to carry both meaning: signal the affordance and reward the action at the same time. The acrylic hand form carried all of that. Without it, the interaction would need a label. User testing confirmed it; every participant placed their hand correctly on first contact.

Live serial systems are fragile by design — that's the real lesson.

WebSerial libraries changed, ports failed, and readings merged into nonsense strings. Working through it taught me to think about robustness from the start: what happens when the connection drops, how to recover, and how to design around the happy path so the invisible failures don't break the experience for someone standing in front of the piece.

The return to baseline matters as much as the peak.

Phase 3, the gradual decay when you release, was designed last and had the biggest impact on how the whole piece felt. A hard reset would have broken the cinematic quality. The slow breath back down is what makes the experience feel like a real arc rather than a toggle switch.

Where I want to take it next.

Add subtle vibration to the hand for deeper haptic feedback. Refine the idle "breathing" glow to pull people in from across the room. Explore multi-user versions for longer exhibition runs. Potentially rebuild the visual layer in TouchDesigner for more control over projection mapping and real-time compositing.