I’ve been playing with TouchDesigner recently, exploring ways to connect music and visuals: using the mid and high frequencies of a background track to drive dynamic changes in visuals.

I started by using the Audio Spectrum CHOP to split the audio into different frequency bands. Then I extracted the midand high values as control parameters to manipulate certain layers in the scene—like scaling, position shifting, and even shader-based distortion. The result is a visual that “dances” with the music in real time.

One of my favorite additions is a little boom glow effect—when the high frequencies suddenly spike, it triggers a burst of glowing light in the visuals, like a tiny explosion. It adds a sense of rhythm and punch to the whole piece, emphasizing certain beats and creating a more immersive, concert-like feel.

Next step, I’m thinking about incorporating the low frequencies to control more grounded movements—like global structure wobble or a soft, breathing motion in the background.

Apr 11, 2025

After the last class, I focused on improving the background visuals for our 5-5 breathing guide, addressing feedback from earlier critiques. The previous version had two main issues:
1. After its recent adjustments, the visuals didn’t fully align with the dynamic sphere animation.
2. The repetitive patterns felt monotonous over time.

To solve this, I revisited the original particle effect style but expanded its variety. I created eight distinct 5-second animations, each with unique motion paths—some resembling slow upward drifts, others mimicking gentle pulses or radial expansions. By stitching these clips into a seamless loop, the background now feels dynamic and non-repetitive, subtly shifting to keep viewers engaged without distracting from the central breathing guide. I also fine-tuned the color palette and blending modes to better harmonize with the main dynamic sphere.

The updated background not only complements the breathing rhythm but also adds depth to the installation’s atmosphere. Next, I’ll test the visuals with real-time breathing data to ensure the transitions feel intuitive and calming.

Mar 31, 2025

In this test, I explored using microphone input to drive real-time visual changes. While the initial interaction worked, I believe the main visuals could be more expressive and exaggerated. For example, the mic input could control a wider range of parameters — such as diffusion, distortion, brightness, and more dramatic rotations — to create a more immersive, reactive effect. I’m open to experimenting with any visual responses that feel dynamic and playful.

Additionally, when I’m not blowing into the mic, the visual decay happens a bit too fast. Slowing down the rate of change when idle could help maintain a smoother and more organic visual flow.

Test Video in TouchDesigner

Updated video

TouchDesigner Visual Update – Version 2

In this iteration, I moved away from the original circular visual form and transitioned to a more organic, irregular shape. This change allowed the visual to feel more fluid and less constrained, resembling something between flowing matter and an energetic field.

Additional enhancements include:

• Increased Mic Interactivity: The microphone input now drives multiple parameters simultaneously, including diffusion intensity, mesh distortion, brightness shifts, and rotation amplitude. These changes respond more dramatically to volume spikes, making the interaction more expressive.

• Particle Responsiveness: The internal texture now breaks apart and swirls with more visible turbulence, suggesting a kind of sonic turbulence.

• Visual Decay Tweaks: The decay time when there’s no input has been lengthened, allowing the form to fade out more gracefully rather than collapsing too fast.

• Color Feedback: There is subtle hue shifting based on sound amplitude, helping the piece feel alive and emotionally responsive.

Mar 31, 2025

Following my previous exploration of visual designs for the 5-5 breathing guide, I’ve continued experimenting with new ideas to create an animation that complements the central dynamic sphere without causing visual conflict.

This time, I tried creating an animation in After Effects using blue particle lines that grow upward, then fall and dissipate. The idea was to simulate a natural, flowing motion that aligns with the rhythm of breathing:

Inhale (5 seconds): The particles grow upward, symbolizing the intake of breath.
Exhale (5 seconds): The particles fall and dissipate, representing the release of breath.

After sharing the animation with the team, we identified a issue:

Problem: The falling motion of the particles wasn’t prominent enough, making it difficult to distinguish between the inhale and exhale phases.

Solution: I’m currently working on enhancing the falling effect by: Increasing the speed and visibility of the particles as they fall. Adjusting the timing to ensure the transition between growth and fall is smooth yet noticeable.

Mar 19, 2025

In our previous research, we discovered that the 5-5 breathing technique—inhaling for 5 seconds and exhaling for 5 seconds—can help people achieve a state of calm and relaxation. To enhance this experience, we decided to incorporate a visual guide into our interactive installation. The visual design is divided into two parts:

1. A fixed animation that guides the 5-5 breathing rhythm.

2. A dynamic graphic that responds to the user’s actual breathing patterns.

My role is to design the fixed animation, which serves as a clear and intuitive guide for users to follow the 5-5 breathing rhythm. However, this task has proven to be more challenging than expected.

Initial Attempts and Challenges

1. Rotating and Expanding Dots:

I started by experimenting with rotating and expanding dots, hoping to create a sense of rhythm and flow. However, this design conflicted with the dynamic sphere in the second part of the visual, creating visual clutter and confusion.

2. Expanding and Contracting Circles with Halos

Next, I tried using a circular design that expanded outward during inhalation and contracted inward during exhalation, accompanied by a glowing halo effect. While this was visually appealing, it still overlapped and competed with the central dynamic sphere, making it difficult for users to focus on either element.

Key Insight: These attempts revealed that centralized and circular designs are not suitable, as they conflict with the dynamic sphere that occupies the center of the screen.

3. Background Color Transitions

To avoid overlapping with the dynamic sphere, I shifted my focus to the background, using color transitions to indicate the breathing phases. For example:

Inhale: Transition from a cool color (e.g., blue) to a warm color (e.g., orange).

Exhale: Transition back to the cool color.

However, this approach introduced two new challenges:

1. 1. 1. Color Interpretation: Users might not intuitively associate specific colors with inhaling or exhaling, leading to confusion.

      2. Transition Smoothness: A sharp transition between colors felt abrupt and unnatural, while a slow, gradual transition made it difficult for users to distinguish the exact moments to inhale or exhale.

Current Direction and Next Steps

Based on these challenges, I’ve realized that the fixed animation needs to:

Avoid Centralized and Circular Designs: To prevent visual conflict with the dynamic sphere.

Provide Clear Timing Cues: Ensure users can easily identify when to inhale and exhale.

Maintain Visual Harmony: Complement the dynamic sphere without overwhelming it.

Moving forward, I plan to explore the following solutions:

Edge-Based Animations: Create animations that occur at the edges of the screen, such as a progress bar or waveform, to guide breathing without interfering with the central sphere.

Text or Symbol Indicators: Use simple text (e.g., “Inhale” and “Exhale”) or symbols (e.g., arrows) to provide clear instructions.

Subtle Motion Cues: Incorporate gentle, non-intrusive motion (e.g., flowing lines or particles) that aligns with the breathing rhythm.

Conclusion

Designing a visual guide for the 5-5 breathing technique has been a process of trial and error. While my initial attempts faced challenges, they provided valuable insights into what works and what doesn’t. By focusing on edge-based designs and clear timing cues, I’m confident that the final fixed animation will effectively guide users toward a calm and balanced breathing experience.

Mar 19, 2025