Following on from the Medi-Mate project undertaken while studying at the School of Code, we never had time to get our animated character to breathe. I wanted to continue to try and get this working on my own after the main project ended.
This app is to help people with asthma and anxiety to manage their breathing. It is common to breathe in too much or over breathe while having an asthma or anxiety attack. Breathing along with the monkey should help to regulate your breath.
I particularly enjoyed working on the logic of getting the monkey to breathe at the correct times depending on the user's selection of the drop-down menus. This project also gave me the opportunity to try out sprite sheets and creating my own.
- Select your own breathe in, hold breath and breathe out times from the drop-down menus (0-9 seconds available for each).
- Top tip modal pop-up describes alternative breathing techniques.
- Monkey will breathe to the times selected with an additional banner above prompting when to breathe in, hold and breathe out.
git clone https://github.com/Elkennard/Breathing-Monkey.git
open with live serverAlthough the animation is designed to be pixelated for a retro feel, with the addition of extra sprite frames, the breathing would be smoother.
The breathing times are set using a setTimeout function. This can be unreliable, depending on the browser being used times can vary slightly.
- Possibly convert the programme to a react app
- Further investigation into how to set more accurate times is required with an alternative to the setTimeout function
- Create additional sprite frames to make the breathing process smoother.
