Project ZEN : a Lotus-Inspired Meditation Installation

Project Zen is a lotus-inspired meditation installation that combines Arduino, p5.js, MediaPipe Face Mesh, and NeoPixel lighting to create a short moment of stillness within everyday life.

Inspired by Buddhist meditation practices, the project invites users to pause, close their eyes, and step away from the constant flow of screens, notifications, and information. A 3D-printed lotus object works together with a browser-based interface to create an experience guided by light, sound, breathing, and touch.

In this tutorial, I will walk through the entire process of building Project Zen, including designing and printing the lotus structure, wiring the electronics, programming the Arduino, creating the p5.js meditation experience, implementing webcam-based eye detection, and establishing communication between Arduino and the browser using the Web Serial API.

By the end, you will have a fully functional meditation installation that combines physical and digital interaction into a single calming experience.

Project ZEN Demo Video Link

Project ZEN Digital Experience Demo Video Link

Project ZEN p5.js sketch

* Although it is provided as a p5.js web editor, please note that it only works properly when saved as a local file and run using VS Code Live Server in Google Chrome.

Main Components Used

1. Arduino UNO
2. NeoPixel 16 LED Ring
3. TTP223B Touch Sensor
4. Jumper Wires
5. 3D Printed Lotus Object

Software & Tools

1. p5.js
2. Arduino IDE
3. MediaPipe Face Mesh
4. Google Chrome
5. VS Code (Live Server)

Project Zen is a lotus-inspired meditation installation that combines Arduino, p5.js, and MediaPipe to create a brief moment of stillness within the modern life.

The project began with a simple observation: we spend much of our time moving between screens, notifications, and endless streams of information. While we are constantly connected, we rarely create space to pause and sit with our own thoughts. I wanted to design an experience that would encourage users to slow down, step away from digital overload, and reset before returning to their daily activities.

The project draws inspiration from Buddhist meditation practices. The lotus symbolizes mindfulness, growth, and inner awareness, while the circle represents breathing, focus, and simplicity. Together, these elements became the foundation for the project's visual language and interaction design.

My original concept was a touch-based installation in which lotus petals would gradually bloom as users kept their hand on the object. The blooming flower was intended to visualize a meditative state, and the touch sensor served as the primary trigger.

As development progressed, however, I became more interested in the relationship between physical and digital interaction. Through experimenting with Arduino and p5.js, I started exploring how multiple forms of input and feedback could work together within a single experience. At the same time, I realized that beginning the meditation through touch alone weakened the purpose of eye closure detection.

This led to a redesign of the interaction flow. Instead of touch initiating the session, users now begin meditation by closing their eyes for two seconds. The act of closing one's eyes felt more meaningful because it naturally mirrors the beginning of a meditation practice. The lotus object remained part of the experience, but its role shifted from triggering the session to deepening it through tactile interaction and physical light.

Hardware

1. Arduino UNO R3
2. NeoPixel 16 LED Ring
3. TTP223B Touch Sensor
4. Jumper Wires
5. USB Cable
6. 3D Printed Lotus Object
7. Hot Glue

Software

1. Arduino IDE
2. p5.js
3. MediaPipe Face Mesh
4. Google Chrome
5. VS Code Live Server

I purchased an Arduino UNO R3 Starter Kit, and used the included Arduino UNO R3 board, jumper wires, and USB cable. The NeoPixel 16 LED Ring and TTP223B touch sensor were purchased separately. All components were easily available online, and the total cost was approximately ₩33,500 (about $25 USD).

The 3D-printed lotus object was printed at school at no cost. I also used a glue gun I already had to secure the NeoPixel ring and touch sensor inside the object.

All software tools used in this project were free. Additionally, I used ChatGPT and Claude AI during the Arduino and p5.js sketching process for assistance.

Structural Design

The physical component of the project is a 3D-printed lotus object that houses both the NeoPixel ring and touch sensor.

One of the main challenges during this stage was balancing functionality and appearance. The object needed enough internal space for wiring and electronic components while still maintaining a clean lotus form.

To organize the internal structure, I designed the object using two cylindrical forms. The outer cylinder functions as the main container, while a smaller cylinder sits inside like a pedestal. This inner pedestal was sized to fit the inner diameter of the NeoPixel ring, allowing the LED ring to be securely mounted around it. The pedestal also includes a square recess designed specifically for the touch sensor, positioning it directly on the top surface where users naturally place their hand.

This arrangement helped separate the touch sensor and lighting components while keeping the internal layout compact and organized. It also allowed the NeoPixel light to diffuse softly throughout the object rather than appearing as a direct light source. Positioning the touch sensor directly on the top surface ensured that users could naturally interact with it simply by resting their hand on the lotus during meditation.

Design Iteration & Technical Challenges

The first print revealed several issues. Support material was difficult to remove cleanly, the wiring hole was too small, and the internal layout required adjustment.

I was also unable to use the cover piece from the initial print because the wiring configuration had not been fully considered in the design. This is something I would like to revisit in a future iteration.

After revising the model, I reprinted the object and assembled the final version.

The hardware system consists of an Arduino UNO, a NeoPixel LED ring, and a touch sensor.

The touch sensor detects physical interaction with the lotus and sends the input to Arduino.

The NeoPixel ring provides ambient lighting throughout the meditation session and responds to both the breathing animation and touch interaction.

Connections

Touch Sensor

1. VCC → 5V
2. GND → GND
3. OUT → Digital Pin (2)

NeoPixel Ring

1. VCC → 5V
2. GND → GND
3. DIN → Digital Pin (6)

You can check the circuit diagram from the image above.

Arduino communicates with the browser through the Web Serial API, allowing sensor data and LED controls to be exchanged in real time.

The Arduino serves as the bridge between the physical lotus object and the digital meditation experience.

It performs three main functions:

1. Reading touch input from the TTP223B touch sensor
2. Controlling the NeoPixel LED ring
3. Communicating with p5.js through the Web Serial API

Receiving Brightness Data

Rather than generating lighting effects independently, the Arduino receives brightness values from the p5.js application.

The p5.js sketch continuously calculates the intensity of the breathing animation and sends brightness values through serial communication. These values are received by Arduino and used to control the NeoPixel ring.

This allows the physical lighting inside the lotus object to stay synchronized with the breathing circle displayed on screen.

Creating a Soft Breathing Glow

To make the lighting feel calm and natural, the LEDs do not instantly jump between brightness values. Instead, Arduino gradually interpolates between the current brightness and the target brightness received from p5.js.

This creates a smooth breathing effect that closely follows the animation on screen.

I also experimented with different LED colors during development. Pure white light felt too harsh and clinical for the atmosphere I wanted to create. Instead, I used a warmer off-white glow by reducing the green and blue channels relative to red.

This produced a softer light that felt more suitable for meditation and blended more naturally with the lotus object.

Reading Touch Input

The TTP223B touch sensor continuously detects whether the user is touching the lotus object.

Whenever the touch state changes, Arduino sends a message back to p5.js:

1. T1 = Touch detected
2. T0 = Touch released

This allows the digital interface to react immediately when users interact with the lotus.

Physical and Digital Feedback

Because Arduino both receives information from p5.js and sends information back to it, the relationship between the physical and digital components becomes two-way.

The breathing animation influences the LED brightness, while touching the lotus influences both the LEDs and the visual experience on screen. This creates a more connected interaction between the physical object and the digital meditation environment.

The digital experience was built using p5.js, MediaPipe Face Mesh, and p5.sound. Rather than functioning as a simple visual display, the p5.js sketch manages the entire meditation session, including eye detection, visual transitions, sound generation, state management, and communication with Arduino.

Although the overall visual graphics were minimal, I had a very clear idea of the kind of “meditation session” experience I wanted to create. Because of this, the experience-building stage in p5.js became especially important.

I focused on details such as the glowing color of the circle on the screen, the sound of pink noise, and the synchronization between audio and visuals that represent breathing—expansion and contraction. I also paid attention to elements like a soft transition of each state and a smooth fade-out.

Overall, my main priority was refining these subtle details to create a cohesive and immersive experience.

Designing the Interaction Flow

The application is structured around four main states:

1. Idle
2. Transition
3. Meditation Session
4. Fade Out

This state-based structure made it easier to control how users move through the experience.

The project begins in an idle state with a white background and a black circle. This visual was intentionally minimal, providing a calm starting point without drawing attention away from the meditation experience.

When the user closes their eyes, a subtle progress indicator appears around the circle. Holding the eyes closed for two seconds triggers the transition into the meditation session.

Eye Detection with MediaPipe

MediaPipe Face Mesh continuously tracks facial landmarks through a webcam.

For eye detection, the project measures the distance between landmarks on the upper and lower eyelids. When this distance falls below a predefined threshold, the system interprets the eyes as closed.

Instead of using touch as the primary trigger, I chose eye closure because it naturally mirrors the act of beginning meditation. Closing one's eyes creates a deliberate break from the surrounding environment and acts as a meaningful threshold between everyday activity and the meditation session.

Transition Sequence

Once eye closure has been maintained for two seconds, the interface transitions into the meditation state.

The screen gradually fades from white to black while displaying the message:

SESSION BEGINS

This short transition was added to create a sense of entering a different mental space rather than abruptly changing screens.

Breathing Animation

The central visual element is a breathing circle that slowly expands and contracts.

The animation is driven by a sine wave, producing a smooth inhale-and-exhale rhythm.

I chose a circle because it is one of the simplest visual forms. Rather than becoming the focus itself, it acts as a guide that encourages users to follow the breathing rhythm.

The monochromatic black-and-white palette was also intentional. In contrast to the visual overload of contemporary screens and social media, the project reduces visual information to only what is necessary.

Sound Design

Sound became an important part of creating the meditation atmosphere.

The project uses p5.sound to generate real-time pink noise rather than playing a prerecorded audio file.

Initially, I experimented with white noise, but it felt too harsh and distracting. Pink noise provided a softer and more balanced texture that better matched the intended experience.

The sound also responds to the breathing cycle. As the circle expands and contracts, both the volume and filter frequency subtly change, creating a synchronized audiovisual rhythm.

Touch Interaction

Although eye closure initiates the meditation session, touch remains an important part of the experience.

When the user touches the lotus object, the touch sensor sends information to p5.js through Arduino. The visual glow surrounding the breathing circle increases, creating a stronger sense of presence and connection between the physical object and the digital environment.

This physical interaction helps the lotus object draw users deeper into their meditation session.

Preparing for Physical Integration

Throughout the session, p5.js continuously calculates brightness values based on the breathing animation and touch interaction. These values are sent to Arduino through serial communication, allowing the NeoPixel LEDs inside the lotus object to mirror the visual experience occurring on screen.

As a result, the digital and physical components remain synchronized throughout the meditation session.

p5.js link for the Digital Experience (Eye detection)

Project ZEN p5.js sketch

* Although it is provided as a p5.js link, please note that it only works properly when saved as a local file and run using VS Code Live Server in Google Chrome.

Project ZEN Digital Experience Demo Video Link

One of the most challenging parts of the project was establishing reliable communication between Arduino and the browser-based p5.js application.

My original plan was to use p5.serialcontrol, which I had successfully used in previous projects. However, after updating my MacBook, the software no longer worked consistently. Although the Arduino was functioning correctly, touch sensor data was not being transmitted reliably to p5.js, preventing the physical and digital components from interacting as intended.

After spending time troubleshooting the issue, I decided to switch to a different workflow using VS Code Live Server and the Web Serial API. This approach allows browsers such as Chrome to communicate directly with Arduino without requiring p5.serialcontrol.

The communication system became two-way:

1. Arduino sends touch sensor data to p5.js.
2. p5.js sends LED brightness values back to Arduino.
3. Both systems continuously exchange information throughout the meditation session.

While this solved the connection problem, a second challenge emerged. The NeoPixel ring needed to respond to two different inputs simultaneously:

1. The breathing animation running in p5.js
2. The touch sensor embedded in the lotus object

Initially, the LEDs either failed to respond to touch input or ignored the breathing animation entirely. The problem came from trying to control the same output through multiple interaction paths.

To solve this, I restructured the logic so that the breathing animation became the default lighting behavior, while touch input acted as an additional modifier. During normal operation, the LEDs follow the rhythm of the breathing circle. When the user touches the lotus, both the on-screen glow and LED brightness increase together, creating a stronger sense of connection between the physical and digital elements.

This stage taught me the importance of clearly defining interaction flow when multiple systems communicate with one another. Unlike my midterm project, where Arduino acted only as an input device and p5.js acted only as an output, Project Zen involved multiple inputs and outputs operating simultaneously across Arduino, MediaPipe, p5.js, sound, and lighting. Ensuring that these systems worked together consistently became one of the most important parts of the development process.

Final Interaction Flow

The completed installation combines eye detection, sound, lighting, and physical interaction into a single meditation experience.

1. The project begins in an idle state with a white screen and a black circle.
2. The user places a hand on the lotus object.
3. The user closes their eyes.
4. Holding the eyes closed for two seconds triggers the meditation session.
5. The screen transitions to a black background displaying "SESSION BEGINS."
6. A glowing white circle expands and contracts in a breathing rhythm while soft pink noise plays in the background.
7. The NeoPixel ring mirrors the breathing animation.
8. Touching the lotus increases the intensity of both the on-screen glow and the physical lighting.
9. The meditation continues for a randomly generated duration between 2-6 minutes.
10. Visuals, audio, and LEDs gradually fade out before returning to the idle state.

Final Result

The final prototype successfully integrates physical and digital interaction into a meditation experience inspired by Buddhist symbolism and mindfulness practices.

All core features are functional, including:

1. Eye detection using MediaPipe Face Mesh
2. Session triggering through eye closure
3. Breathing animation in p5.js
4. Pink noise generation
5. Touch sensor interaction
6. NeoPixel LED feedback
7. Real-time communication between Arduino and p5.js
8. Automatic fade-out and return to the idle state

The project demonstrates how physical interaction, light, sound, and minimal visuals can work together to create a small moment of reflection within everyday life.

Project ZEN Demo Video Link

Throughout the project, I encountered many technical and design challenges, from establishing reliable communication between Arduino and p5.js to designing a physical lotus structure that could accommodate all of the necessary components. While these problems were often frustrating, they became some of the most valuable parts of the process.

One of the biggest lessons I learned was the importance of designing a clear interaction flow. Unlike my midterm project, where inputs and outputs were relatively straightforward, Project Zen involved multiple systems working together simultaneously, including Arduino, MediaPipe, p5.js, sound, lighting, and physical interaction. I realized that successful interaction design depends not only on individual features, but also on how those features communicate and work together as a cohesive experience.

I also became more interested in physical prototyping and 3D modeling. Before this semester, both hardware and 3D design felt unfamiliar to me. Through multiple iterations, I learned that the physical form is not simply a container for electronics—it plays an active role in shaping how users experience the project.

If I had more time, I would further refine the lotus structure to make it more comfortable and intuitive to interact with. For example, the lotus petals are slightly sharp, and the placement of the touch sensor could be improved to make interaction feel more natural. I would also like to explore visual elements that connect more directly to the lotus motif while maintaining the simplicity and calmness of the current experience.

Overall, Project Zen taught me how to bring together physical computing, digital interaction, and spatial experience into a single installation. More importantly, it showed me how much iteration, testing, and refinement are involved in transforming an initial idea into a complete interactive experience.