Recursive branching · microphone input · frequency mapping · calm interaction · exploratory critique

Audio-visual experience design

Neon Fractal Tree: A Generative, Audio-Reactive Visual Experience

A studio exploration of a generative fractal tree driven by microphone input, examining calm interaction, passive engagement, and a small round of exploratory testing.

The Neon Fractal Tree is a real-time sketch developed through recursive branching and frequency mapping so that the visual form responds to ambient or intentional sound. The project provided an opportunity to work in p5/WebAudio while testing, in critique, whether a screen-based artifact can produce a meditative quality without relying on explicit controls or task-oriented goals. It should be understood as a studio prototype rather than a production product.

My roleCreative Technologist & UX Researcher
Duration2025 project
Project typeAudio-Visual Experience Design
Open live sketch Back to folder
Glowing neon fractal tree visualization
Final visual direction: recursive branching, neon light, and ambient audio response.

My Role + Duration

Creative technology and interaction design completed as a 2025 project

Creative Technologist

Built the generative sketch logic, recursive branching behavior, and real-time visual response.

Interaction Designer

Defined how sound, motion, visual rhythm, and passive observation shape the user's experience.

UX Researcher

Used critique and lightweight exploratory testing to understand calmness, comprehension, and engagement.

Duration

Completed as a 2025 project focused on audio-reactive interaction and calm visual experience design.

Project Overview

A screen-based artifact designed for quiet attention

The prototype asks whether a generative screen experience can feel calm without asking users to complete a task. Instead of designing for productivity or speed, I designed for soft attention: users can speak, play sound, or simply let ambient noise influence the tree.

The tree grows through recursive branching. Audio input changes the behavior of the visual system, creating a connection between the surrounding environment and the form on screen. The result is a small interactive environment that can be watched, influenced, and interpreted.

Creative process image for the Neon Fractal Tree project
Creative Process for Neon Fractal Tree.

Problem + Goals

Designing interaction without a task list

Most interfaces are evaluated through task completion. This project focused on a quieter question: can an interface invite calm attention through motion, responsiveness, and atmosphere?

Problem

Audio-reactive sketches can feel visually exciting but confusing if users cannot understand what is reacting, why it changes, or how much control they have.

Goal 01

Create a generative form that responds clearly to ambient or intentional sound without overwhelming the viewer.

Goal 02

Explore passive engagement, where watching and listening are valid forms of interaction.

Goal 03

Use critique feedback to understand whether the experience reads as meditative, reactive, and visually coherent.

Research Plan

Exploratory testing through critique and observation

Methodologies

  • Studio critique and peer observation
  • Think-aloud feedback during short viewing sessions
  • Informal emotional-response mapping
  • Visual review of motion, glow, density, and responsiveness

Questions Asked

  • Does the tree feel calm, distracting, or too intense?
  • Can viewers tell that sound is influencing the visual behavior?
  • Does the experience need explicit controls, or is passive interaction enough?
  • What emotional words do viewers use after watching it?

Quantitative & Qualitative Summary

Directional critique notes suggested that viewers understood the project most quickly when the audio response was visible but not overly chaotic. The testing was exploratory and not statistically significant.

Qualitative Notes

Participants described the strongest moments as quiet, glowing, organic, and responsive. Confusion appeared when the visual response became too dense or when the microphone relationship was not immediately visible.

Findings

Calmness depended on visible but restrained responsiveness

User Quotes

"It feels like the tree is breathing with the room."
"I like that I do not have to do anything, but I still feel involved."
"When it moves too much, I stop feeling calm and start trying to figure out what happened."

Pain Points

  • The audio connection can be unclear without an initial cue.
  • High visual density can make the tree feel less meditative.
  • Some viewers expected controls because many screen-based projects are task-oriented.

Emotional Themes

  • Calm attention
  • Curiosity without pressure
  • Organic motion
  • Light sensitivity and visual intensity

UX Takeaway

The most successful version balanced responsiveness with restraint. The system needed to prove that it was listening while still giving viewers space to relax.

Personas + Empathy Map

Designing for observers, not only active users

Persona 01

The Quiet Observer

Wants a screen-based experience that does not demand constant input. They value mood, rhythm, and a sense of visual calm.

Persona 02

The Curious Tester

Wants to understand how the system works. They experiment with sound and watch for evidence that the tree is responding.

Says

"I want to know if my sound is changing it."

Thinks

"This feels calm, but I need a small clue about how it listens."

Does

Watches first, then makes sound or speaks to test the response.

Feels

Curious, relaxed, slightly uncertain when the cause and effect is hidden.

Insights & Opportunities

What the testing suggested

  1. Insight 01

    Passive can still be interactive

    Users felt involved even when they were mostly watching, as long as the system appeared responsive to the room.

  2. Insight 02

    Calm needs restraint

    The visual system became less meditative when motion, glow, or branching density became too intense.

  3. Insight 03

    Audio needs a cue

    People understood the project faster when there was a visible or written clue that microphone input was part of the experience.

  4. Opportunity

    Introduce gentle onboarding

    A short first-time cue could explain that sound influences the tree without turning the experience into a task.

  5. Opportunity

    Offer calm presets

    Preset states could support different moods, such as still, listening, active, and meditative.

  6. Opportunity

    Support reflection

    Exporting a still image could help users keep a trace of the interaction without interrupting the calm experience.

Proposed Solutions

A calmer audio-reactive flow

1. Arrival

User lands on the sketch and sees a short cue: speak, hum, play music, or sit quietly.

2. Listening

The tree begins in a calm default state and subtly responds to ambient sound.

3. Exploration

User tests intentional sound and observes changes in movement, density, and color energy.

4. Reflection

User can stay in passive observation or capture/export a visual moment in a future iteration.

Interface recommendations

  • Add a subtle microphone status indicator.
  • Use a short onboarding cue instead of a long instruction panel.
  • Keep the default state slow and low intensity.
  • Make intense audio responses temporary so the visual returns to calm.

Wireframe direction

The interface should remain minimal: title and cue at the top, the tree as the main visual field, and optional controls collapsed or visually secondary.

Current prototype

The current sketch demonstrates the core interaction: recursive branching responds to audio and parameter changes in real time.

Open live sketch

Visual evidence

The final presentation uses screenshots and process imagery to show the relationship between technical structure, visual style, and user experience.

Neon Fractal Tree interface with controls and a live canvas
Current prototype interface with visual canvas and parameter controls.

Reflection + Lessons Learned

Designing for calm interaction changed how I evaluated the interface

This project taught me that interaction does not always need to be active, goal-oriented, or instruction-heavy. A user can be engaged through observation, atmosphere, and subtle responsiveness. In this case, the success of the experience depended less on task completion and more on whether viewers felt invited to stay with the visual system.

The critique process also showed that calm experiences still need clarity. If the system listens but does not signal that it is listening, users may miss the connection. If the system responds too dramatically, the meditative quality is reduced. The strongest direction sits between those two states: visible enough to understand, restrained enough to remain calm.

As a designer, I would continue this project by simplifying onboarding, creating calm presets, and testing with a larger group to compare how different levels of motion and sound response affect attention, emotion, and perceived control.