Box Breathing Breath Visualization
Box Breathing Breath Visualizer
Meditation Companion Website with p5.js Guiding User Through Box Breathing Technique
Nov - Dec 2021
Coding, Web Dev, P5.js, Generated, Breath, Meditation, Game, Creative Coding
New York, NY

Allon successfully implemented and ran a Navier-Stokes fluid simulation in P5.js with the help of a Dan Shiffman youtube p5 tutorial. Instead of evaluating the equation in square elements, Allon made the code evaluate it in circles and aligned the fluid timing to "blow" every 4 out of every 16 seconds according to the box breathing meditation technique. Allon then added a square sprite "breathing" in sync with the simulation to accompany/guide a user through the breathing technique along with text and visual prompts on what to do at every second of meditation to successfully implement box breathing.

The visualization starts with a muddy background, resembling a user's pre-meditation headspace. As the simulation develops and the square background "fills" with fluid, the color changes into a periodic spectrum of colorful hues according to the simulated pressure of the fluid; as the user meditates, the background becomes increasingly colorful mirroring the user's increasingly tranquil headspace and entrancing the user for a more positive, longer, and more intimate experience.

This project was then expanded to a simple html/css website for hosting and deployment, including a pre-meditation welcome screen, and a post-meditation reflection screen that cycles through quotes about the box breathing technique as well as meditation in general. See P5.js code for resource/reading citations. Below is video and pictures of the site with a button linking to it as well.

Video of Coded Guided Meditation
Box Breathing Site Homepage
Box Breathing Guide Page
Box Breathing Quote, Reflection Page





Box Breathing Breath Visualizer
Nov - Dec 2021
New York, NY