Title:

Mindfulness Breathing Visualizer: A Calm Breathing Experience Powered by Facial Expression Tracking

Sketch link:

https://mindfullness-visualiser.glitch.me/

One sentence description:

A visualizer that tracks facial expressions to create a calming, interactive breathing experience, using ml5.js and p5.js.


Summary:

This project is a breathing tool that helps people relax. It uses a computer camera to watch your face and understand how you're feeling. The tool changes colors based on your facial expressions, like when you raise an eyebrow or frown.

The main goal is to guide you through breathing exercises that match your mood. It uses special software to detect important points on your face. The screen shows different colors and patterns based on what it sees. For example, it might show red when you look stressed and green when you look calm.

The tool has a timer that tells you when to breathe in and out. As you breathe, the image on the screen gets bigger and smaller. This helps you connect your breathing with your emotions. The idea is to make you more aware of how you're breathing and feeling.


Visual documentation:

Screenshot 2024-10-16 at 10.52.54 PM.png


Screen Recording 2024-10-16 at 10.54.56 PM.mov

Inspiration:

I came up with this project because I wanted a mindfulness tool that could understand how I was feeling. With more people talking about mental health and using breathing apps, I thought it would be cool to make something that could see your face and respond to it while you breathe. I struggle with meditating myself, so I think having visual feedback would be a good tool for people who want to start meditating.


Process: