Clear My Headspace

Note

Unfortunately I'm having some trouble recording+uploading a demo of my project :c

Inspiration

This is a project built for uOttaHack4 to help people manage their mental health.

What it does

This is a space to talk about your mood and let go of some negative feelings you may have, anonymously.

How I built it

I used html/css/javascript. The 3D models were made with the Three.js library.

Challenges I ran into

While acquiring and hosting a domain.com was easy, sometimes I'd find the page trying to load over my page with content from another DNS; the solution was to delete the @ record associated with that DNS. I had found some excellent tutorial code for the rain I wanted to include in my scene, but it turns out the tutorial used a slightly different, older package (three.min.js). Some function calls threw more and more errors as I tried some of the recommended fixes. I also haven't really considered myself a frontend kind of person, I always feel like I'd spend too much time nitpicking how things look; I may have spent more time than I should have on the initial scene :c

Accomplishments that I'm proud of

I had never bought a domain, and I've never used Three.js before!

What I learned

I learned how to host a website and how to configure DNS settings. I learned how to create and animate a scene with Three.js.

What's next for Clear My Headspace

Research and add more constructive questions for different states of mind. Animate decreasing rain, clouds, and finally sunrise as the user progresses through the questions. Add more objects, textures and interactions in the scene. Add answers from previous users, animate them to pass through the background to prompt answers to questions.

Built With

• css
• html5
• javascript
• three.js