Project Title: EMOCEAN

Sketch link: https://emocean.glitch.me/aStart.html

One sentence description: an envisioned technology that listens to your unpleasant feelings/thoughts/concerns to help you unload the mental baggage, relieving you from the need to burden your friends and family with these heavy thoughts

Project summary: Have you ever experienced a situation where you shared a problem or a difficult day with a friend, only to find that they couldn't fully grasp why it was so important to you? Such conversations might revolve around a challenging day, an unlucky accident, or simply feeling overwhelmed. While family and friends are invaluable sources of support, there are moments when we hold back from confiding in them, fearing that we might overload them with our trouble. "'Communication' often feels like a dead end" (Speaking into the Air by John Durham Peters) “Emocean” is a combined project for Communications and Technology (conceptually) + Intro to Machine Learning for Arts (technically). I hope this project can serve as a solution for reducing poor-quality communications.

Audience/Context: Who is this for? How will people experience it? Is it interactive? Is it practical? Is it for fun? Is it emotional? Is it to provoke something?

Initially, I do this project for myself because I have negative thoughts and emotions all the time and I want to find a way to deal with them, at least getting rid of them in some way. But, it can also benefit others who need to unload their mental baggages and taking the website as a shared space that dispose emotional trash or handle mental breakdown

Inspiration: How did you become interested in this idea? Quotes, photographs, products, projects, people, music, political events, social ills, etc.

minimalistic style

https://screamintothevoid.com/

doodles by @constantbageltherapy

Process: How did you make this? What did you struggle with? What were you able to implement easily and what was difficult?

• I write a HTML and a JS file for each page and import p5.js and ml5.js library onto the glitch platform.
• I create a ocean-like interface for the home page
  • I refer to this tutorial : https://www.youtube.com/watch?app=desktop&v=yUuZd3y21z8
  • I replace the bobbing object to a paper ball and set it as the entrance

step 1: unload

• I set up a Node.js database, lowDB, to count how many times people have tried to play with the website.
  • server.js < - > client.js
  • the count is stored in a JSON file that will be loaded on the local filesystem using async file storage

step 2: crumple - handpose

step 3: dispose - handpose and facemesh

• I tried to train my own models for the burning hand gesture but the result is not very satisfying (the model sometimes gets stuck and the overall display is not smooth). Therefore, I instead check for different hand gestures by computing distances between certain keypoints.

  • I refer to the Hand pose tracking + Neural Network sketches by Yining
  • my model: https://editor.p5js.org/sirui/sketches/JH7s-m74o

• Challenge: it is my first time using glitch to develop a full-stack website

  • back-end development: server and client, database
  • file management: 2 CSS,7 HTML, 10 JavaScript, and 15+ assets files
  • p5.js and ml5.js compatibility

Next steps: If you had more time to work on this, what would you do next?

• Work properly with both right and left hand
• Add more interaction options: relate more to the “ocean” aspect of EMOCEAN
• Build a better sense of community: ways to interact with other’s paper ball?