Q M Naushad

Happy Panda Project

Inspiration

I wanted to do something very meaningful for this project, something that might be a small endeavor, but something that adds meaning to the industrial products in the maret, because often times we have too many fun/cool gadgets in the market and we happen to forget an important part of our health that needs nurturing and maintenance as well as our physical health, which is our mental health.

Design Explanation

After thinking over the UI design, I decided to stick with two primary colors (warm pastel yellow (252, 238, 184) and white (255,255,255) for the clean minimalistic look. One of the important reasons for choosing from the pastel palette is because e wanted our UI to be safe for people with anxiety, because multi colored palattes trigger anxiety. I had to spend substantial time to research about this color choosing issue
I designed the Panda logo on iPad's Procreate app. First I made a rough sketch of the panda, and followed up with more layers to polish.

///font choice///

I chose Helvetica Oblique and Million Dreams as our main two fonts. Since Million Dreams was the fancier one, I used that for the Logo and Menu options. Helvetica, on the other hand, is neat and easy on the eyes, so I thought it was a good choice for directions and instructions.

///design assets and shapes///

We designed all of our assets on Adobe XD and laid it out accordingly on the P5JS. In this process, Adobe XD's coordinate function helped us greatly in finding the right placements for the assets. For the shapes of our assets, we mainly sticked to rounded corners instead of sharper ones, which resulted in softer-looking aesthetic.

For our background, we used a plain white background layered with stretch of tiles. This is a prominent design choice reminiscent of 2014 Tumblr era.

///additional design details///

We added triple heart detail on every page to complete the design. To make the hearts float and blink, we usec Framecount function.

Finally, we duplicated the panda on Procreate and drew a different version to make an animated one. We also created an animated gradient background on Photoshop, which loops during the meditation.

Project Roadmap and Game Description:

Get the 4 sensor data from Arduino
The p5.js 1st screen changes to 2nd screen after 3s of starting the program (cuz it takes sometime for the pulse sensor to start taking correct values as input) .
Click on Anxiety Tracker, it starts processing the data from pulse. But the data collection had started already when the program starts. This means that we give ample time for the pulse meter to stablize and start giving the p5.js correct data [decided from user testing].
The pulse can be seen on the screen, in the yellow circular part
It will store all the pulse values for 1 minute, and dislay you the average pulse rate.
Based on the difference of the 1st and last pulse of every 10 sec interval, and if the average of these differences is greater than 30, you are very anxious; if less than 30, you are not anxious.
If you are anxious, takes you to Non-normal category Screen:

a. Breathing Meditation[Download Audio Files From Online]

b. Guided Meditation [Download Audio Files From Online]

c. Affirmation [Download Audio Files From Online]
Normal Category Screen: Always end the cycle with a hug from panda. When you hug panda, hug sensor activates and the still panda image on the screen is replaced by a panda gif which is hugging you.
- Screen 1:
- Screen 2:

Screen 3:

Screen 4:

Screen 5:

Project Growth Phases:

///stitching process///

to learn how to sitch, we followed GitHub Pages from Youtube. This video demonstrates an invisible stitiching method known as "ladder sititch." This was particularly helpful for beginners like us. After putting all the sensors inside, we made small cuts on the tips of the Panda's legs and hands. This way, we could get more accurate inputs from our sensors.

Bag Pack Casing

We also made a bag pack for the panda, which e believe is the smartest part of our project, w ehave the bag pack designed in a way to allow all the wires that need to be connected to our laptop can be taken in or out through the small whole at the bottom, and the bag hides the arduino casing and the pulse meter connection which we had borrowed from the librrary, s could not solder into anything since we had to return it.