Compute. Detox

Abstract

Being an OCAD U student in a time of unprecedented political upheaval, international grief, and climate crisis is hard enough as it is to not have to deal with the cell phone’s incessant and distracting presence.  At our Meditative Digital Detox Zone, attendees set aside time away from their phones, and practice the physiological sigh breathing technique, which is visualized in an art installation that involves participants’ phones. The resulting installation is a pixelated seascape in three rows of colour, orange, blue, and green; each of these colours is paired with a distinct beach sound, water lapping at the beach’s edge, crashing waves, and seagulls. As attendees sit back and meditate, the soft light from the installation reminds them of the peace that can come from disconnecting from the digital world. Our design supports neuropsychological and physiological health by disrupting the cell phone’s incessant and distracting presence in our lives. We are also intervening in the sociology of education on the premise that ongoing digital disengagement interventions can benefit academic outcomes.

Project Collaborators: Orus Mateo Castaño-Suárez, Lanlan Chen, Jiayun Qiu, Samarth Reddy

Description

In a time of unprecedented grief and turmoil, the “Meditative Digital Detox Zone” offers respite for the OCAD U community by transforming participants’ smartphones into a communal therapeutic experience. Inspired by Jenny Hozer’s Blue Purple Tilt, the installation guides participants through physiological sigh breathing with light and natural sounds.

The installation features an impressionistic seascape of colored light cast onto a wall by white acrylic light pieces, emitting ocean waves and gull sounds. Seating is arranged in columns of three, allowing each light piece to hold three phones vertically. Participants enter, remove their shoes, and hand over their phones to the artist, who secures them onto acrylic rectangles.

Three P5.JS programs power the audio seascape, with sounds and colors representing sand (orange), the ocean (blue), and a tree-lined coastline (green).

Design Process

Conceptualization & Research

Inspired by Kate Hartman and Nick Puckett's lecture, our team explored impactful projects, ultimately choosing Jenny Hozer's “Blue Purple Tilt” for its visual impact and technical feasibility. We adapted it to create a light-based, impressionistic seascape with corresponding colors and sounds. Kate's suggestion to incorporate a ceremonial phone relinquishing resonated with our team, leading us to frame the installation as a meditative relaxation area focusing on detachment from cell phones. We modified the code to guide participants in the physiological sigh breathing technique popularized by Stanford neuroscientist Andrew Huberman.

Interaction Process: The User Journey

Post-pandemic, meditation has become mainstream, so we aimed to create a standout meditation space that provides a “wow” moment. We focused on engaging the senses to enhance information reception, foster creativity, and encourage participation.

Our user experience is divided into three phases. Recognizing that users typically disengage from their phones during meditation, we made the onboarding process simple and user-friendly. Users enjoy at least one minute of audio-visual meditation, with an exit button for those who wish to end early. An end page offers additional meditation resources to extend the experience.

As monitors, we strive to provide better guidance and assistance, helping users fully immerse in meditation, ensuring a balanced and effective onboarding process.

Physical Design & Making

We brainstormed various methods for positioning mobile phones, considering ease of production, load-bearing capacity, size, material, and cost. We chose a simple design using acrylic sheets and polyurethane anti-slip gel from Viaky to prevent slipping.

Testing revealed the projector worked best when placed farther from the wall, so we secured the shelf to the table with transparent nanotape for stability. We abandoned the idea of a frame for a "pixel painting" effect to maintain a seamless and distraction-free meditation experience.

Size Test & Making

We tested various cell phone sizes, quantities, and wall placements, finding that distance from the wall was key for optimal projection. We opted for three phones, leaving the top shelf space empty due to proximity to the wall.

When phone screens were set to their brightest, light passed through the acrylic plate, making phones visible and compromising the visual experience. We resolved this by using two layers of acrylic plates, preventing light leakage and improving the visual quality.

Code Prototype & Test

We tested vivid, saturated colors in both dimly lit and well-lit settings, finding the best results in dark environments. Using multiple phones initially created a chaotic visual, leading us to refine our design.

We decided on a beach theme with elements like wind, gulls, crashing waves, and lapping water. After various color experiments, we chose a green-blue-orange combination, avoiding white, pastels, and yellow to ensure visible color oscillation. This triadic color distribution enhances differentiation, with orange representing sand, blue for the ocean, and green for a tree canopy, creating a cohesive coastal scene.

We tested the best projection distance and adjusted colors and contrasts. While using P5.js, we resolved an issue with borders impacting visuals by configuring full-screen color display through GitHub.

Music Design

Initially, we aimed to use distinct melodies for a concert-like experience but faced challenges synchronizing multiple phones. Instead, we incorporated natural sounds like waves and wind, which act as timeless white noise, better suited for a meditative space.

To complement the elements, we curated sounds from Pixabay and edited them with Apple’s Logic Pro to meet a three-minute duration. This ensured copyright compliance and allowed for both individual and simultaneous playback across 12 or more phones.

Minimum Viable Product

Using the MVP concept from startup entrepreneurship, we developed a prototype with help from ChatGPT that achieved:

- A universal timer for synchronized oscillating colors across multiple devices.

- A "runway" period where users see a grey screen before the chosen hue begins at 0, 20, or 40 seconds.

- Smooth texture and timing for oscillating colors, matching the physiological sigh breathing pattern.

- A permissions button for iPhone use.

- Seamlessly looping audio and color oscillation.

Visual Output Prototype

Before finalizing the universal time solution, we explored visual effects synced with music, aiming to represent white noise visually. We tested two methods:

1. Analyzing the audio spectrum and mapping frequency bands (bass, mid, treble) to background colors.

2. Calculating audio spectrum variance to infer white noise presence.

We customized visual output to the audio spectrum, ensuring harmonious and appealing visuals. Extensive testing showed RGB colors on a white background provided the best effect. Smooth color transitions, similar to pulsing lights in smart products, offered a calm and comfortable visual experience.

Final Code Prototype

To enhance the audio-visual experience, we streamlined the final code. We achieved the simultaneous oscillation of colours in the installation using universal time, adding a black-coloured runway period before the 20-second colour-change cycle begins.

GitHub Repository Links:
Water: https://github.com/calluxpore/water
Wave: https://github.com/calluxpore/wave
Gulls: https://github.com/calluxpore/gulls

Direct link to the p5.js GitHub Pages:
https://calluxpore.github.io/water/index.html
https://calluxpore.github.io/wave/index.html
https://calluxpore.github.io/gulls/index.html

Direct Links to Interactive Html and p5.js GitHub pages:
https://calluxpore.github.io/water/first.html
https://calluxpore.github.io/wave/first.html
https://calluxpore.github.io/gulls/first.html

Additionally, we made user experience improvements after scanning the QR code. We incorporated a 3-page introductory section to provide users with guidance on their meditation experience. To ensure users can retain the benefits of meditation and access further information after the session, we designed an additional ending page.

QR Code to Direct Links to Interactive Html and p5.js GitHub pages:

Space Design

Inspired by yoga studios and temples, the space features a central focal point. We added an aroma diffuser for a soothing atmosphere and designed the area to be silent for uninterrupted meditation. Opposite the meditative light installation, there is a table for optional smudging by participants.

Room for Growth

Technical Expansion Opportunities:

- Radial format seating for more comfort during meditation, inspired by Jónsi: Hrafntinna (Obsidian) exhibition.

- Real-time natural sounds using live, WiFi-connected microphones at outdoor locations, harmonized with an on-site sound mixer.

- Automatic and manual translations using Google Translate for accessibility.

- Seasonal and location-based color updates, such as green leaves turning yellow, orange, and red.

- Solo version of the program with corresponding instructions.

- Accessibility research for diverse sensory experiences.

- Transparent sleeves for securing phones, allowing quieter addition and removal.

User Experience Improvements:

- Redesign phone collection flow to mimic low traffic, enhancing engagement and security.

- Clearer instructions for placing phones on shelves to improve participation.

- Physical mementos like postcards or tokens to help users cherish their meditation experience and retain lasting memories.