Inspiration
The environment is made up of many different components that appeal to the five senses, and the one I found to be interesting is sound. Studies have found that listening to the sound of nature can help with relaxing and reducing stress, but limitations such as cities and time conflicts mean that we cannot get the full benefits that nature provides to us. To solve this problem, I created a virtual experience for users that will hopefully bring most of the same benefits as listening to the sounds of nature.
What it does
EcoTheater is an interactive web application where the user can play around with different sounds from nature. Using the music editor, users will be able to create a short musical phrase using nature sounds only. After they are done, users will be able to watch the environment and listen to the music to mimic the real world outdoors.
How we built it
This app is mainly built on the front end with HTML, CSS, and JavaScript. The music functionality was built using the p5.sound library from p5.js, which provided tools for putting the audio files together. I also used the Weather API to determine the weather conditions in the user's location and apply that into the virtual experience.
Challenges we ran into
The main challenge through the first day was simply overcoming the frustrations and doubts about my idea that mounted as I couldn't quite implement my ideas into code and make it work like I envisioned it to. There were also some challenges with styling, as I am not an expert at CSS, and while I was able to get it working on my computer screen, I wasn't quite able to make it responsive across all devices of different screen sizes.
Accomplishments that we're proud of
I am proud that I was able to finish the project, although it turned out slightly differently from what I originally thought. Also, this is a minor feature, but the animation for hovering over buttons was something that I thought was pretty cool.
What we learned
I learned about how to use the p5.js library, and although I only used a very small part of it for this project, I feel like I will be able to make use of more of the features provided by the library in the future.
What's next for EcoTheater
I think there are a lot of improvements and new features that can be added to this project, such as the responsive styling that I have mentioned before. Also, the app currently only features one type of environment (a forest), and adding more ecosystems like the ocean, jungle, safari, etc. will help diversify the experience for the user.
Log in or sign up for Devpost to join the conversation.