Week 14: Final Net Art Project Documentation (Leon & Nimrah) – Jo

Project Partner: Ellen Yang
Description: The demands of a busy and fast-paced student life can stress out even the best of us and no one is immune to stress. So, Ellen and I decided that it would be fun and helpful to create a free and accessible website to help de-stress users. We figured users don’t need to take huge chunks of their days to relax/de-stress as only a couple of minutes would be more than enough to remove temporary stress or anxiety users may feel without disconnecting from the Internet. Our website is here to help people meditate and temporarily forget about the responsibilities without stressing out which is the case for many students who stress themselves out more by avoiding responsibilities/wasting time doing nothing or scrolling up and down mindlessly on social media.
Our website is simple and user-friendly as with the home page, the user can scroll down and click on one of the three displayed locations in order to experience each location. We focused on sounds typically to help the user meditate and let the user create a paradise of their own in addition to the image we provided. I personally believe that I become satisfied and calm as I listen to the sounds of nature so that’s why we provided different audios for each location and volumes as well. The user can choose to lower or higher the volume of each different audio on their preference. Additionally, we have created one animation feature for each location: rain for the rainforest, moving bubbles as the user moves around the mouse, and seagulls that follow the mouse. Lastly, we have added a mini thoughts chat box in which the user will be able to type in their current thoughts and vent without worrying about anyone seeing it in the future. In order to provide assurance, we made sure the typed text would disappear within a few seconds.
Process/Development:  Initially, Ellen and I decided to do our project on the topic of technology and its impacts on society, specifically regarding how technology could have saved lives in Syria or North Korea. I wanted to show the perspective of a North Korean refugee but from the feedback we received, we decided to resort to creating a totally new website. Following the feedback during recitation, we struggled for a few days deciding on our new idea. However, we FINALLY were able to agree on creating a de-stressing website in honor of Finals Week ahead of us at the time. At first, we were going to have three different locations around the world, mainly big cities but Leon gave us an idea to do landscapes for a better, soothing experience, so we agreed on doing the beach, rainforest, and underwater.
We first sketched the layout of all of our potential pages and started our code for the main page and choices. For the title of the homepage, I added the most calm photo I could find and added a mini css animation in the background of the title. Then, I added a mini scroll icon at the bottom of the home page to create a easier auto scrolling feature. For the choices page, we utilized gifs so that when the user hovers over the choices, there would be live paradises to help the user imagine. For the rain location, I tried to find a way to add a raining effect on the image and ended up using a png image of rainfall and created the animation with only CSS. As for the beach page, Ellen and I really struggled to create a wave effect using P5 so we resorted to just adding seagulls to follow the mouse. For the underwater page, we initally wanted to make the fish moves but we also failed to do that as well after countless tries so we again resorted to creating moving bubbles following the mouse. For adding the volumes, we used the three color sliders we learned in class as reference to implementing audio/volume. After MAJOR struggles, with the help of Jiwon, we were finally able to set volume and sound so that all the audios would play at once but the user would be able to adjust the volume sounds to lower or higher using the sliders. Additionally, from the feedback we got from our fellow classmates from user testing, we decided to add one more interaction to create a better/effective stress relief experience. We added a thoughts text box in which the user would be able to type and enter/send in any worries or thoughts they have and watch it disappear to reassure the user that no one would ever have access to it. We thought that this would effectively create an even more soothing experience for the user.
 Summarize: Challenges/Lessons/Improvements
In conclusion, I enjoyed working on this website out of all the websites we have created throughout the semester, mainly because Ellen and I worked on almost each of the parts together rather than splitting it up. Although our website seemed so simple when we were finished, it was unfortunate to think that we actually struggled countlessly using new functions as well as managing time throughout Finals week. I would have to say that I struggled most with the volume sliders as my chrome and firefox refused to display or even play the audio. So, even if the numerous code trials were correct, it was impossible to know whether it was my fault or the computer’s. Additionally, the autoplay was not working either and I learned from Jiwon that this was in connection to the web’s new “law” that they are trying implement to not allow autoplay due to it somehow ruining the user experience. We also struggled for a few days trying to create a moving waves effect for the beach landscape using P5 but it was so difficult making it look natural as well as for the fish for the underwater landscape. In terms of what could have been changed or added, was the title for the audios as well as the background along with the mouse that we worked on but could not utilize. The code had already been completed but we unfortunately could not add it. Implementing all these initially planned ideas did not go as planned but I am still satisfied with our end result. Although, we were not fully capable of creating the desired website due to our limited coding skills, I learned so much throughout the process. I am more than happy and satisfied to leave this class and Shanghai as well knowing that I was able to fully incorporate Photoshop, Audacity, CSS, Javascript, P5, and html in one project. I am so grateful for the enormous help Jiwon, Leon, Nimrah, Dave, and JAck have provided.

Leave a Reply