Oh boy, breathe was definitely one hell of a project. The project idea behind it is rather simple: make a website that produces a unique output based on user input. However, there were several ways where I made this feel like a Herculean trial.

My idea was to create a site where users could simply vent away their frustrations on a text-area and then have it dissipate away. The unique output bases itself on how many characters the users types in the text-area, which then results in a meditative breathing cycle. More characters = more breathing cycles.

I wanted a really organic and smooth feeling interaction so I opted to make the website a single page that gradually shows and hides the various elements. I also went for a neumorphic aesthetic because I was curious about exploring it and it fit well with what I had in mind. Due to how neumorphism looks, my teacher gave the suggestion of thinking about how I could consider the screen as a flat plane with elements rising and falling back into it. This was tricky to pull off but I was able to pull through. The real challenge was in the breathing timer.

For the breathing timer, I made the fatal mistake of using setTimeout() and setInterval(). However, the error in my ways was not known to me at the time. As I have only discovered recently (as in within the past 2 weeks of writing this reflection), setTimeout() and setInterval() BOTH SUCK TREMENDOUSLY. Both operate using your processor as opposed to some timer meaning that their accuracy in timing, the one thing I needed them to do best, is absolutely ATROCIOUS. Thus, all the timing in the website is truly horrendous and there’s nothing I can do about it without completely reworking the code from the ground up. Awesome 👍

C:/test