Final Project

HOTPOT.JS

collaborated with Zhe Wang

code: https://editor.p5js.org/zw2043/sketches/By9U7OmyE

This project is an interface that visualizes emotion for a community of people. We are interested in visualizing human emotion.

Rather than generating abstract graphics from data, we wanted to create visualization that is funny and human-comprehensible. We thought about something most people love, food. We explored the relationship between emotion and food. Through food, we hope to introduce another dimension of sense, taste, into this interactive experience. 

The interface asks users to choose how they feel today. Each feeling is relevant to a food, such as dancing chicken, hippy green onion, and sexy apple. When user clicks an emotion button, the corresponding food will drop down and sink into the hotpot. At the bottom of the interface, it shows current flavor of the hotpot. 

We imagined this project to be installed at a location that many people passes by. As the day passes by, we can see the emotion of the community through hotpot flavor of the day. 

playtest

This is a paper prototype we built for our interface. There are two main feedback we received.

  • Users are interested in seeing food being cooked in the hot pot

  • Users felt difficult to correspond the emotion with food items

Adjustment:

  • We limited our emotion choices to 13

  • We corresponded two to three emotions with a food item

  • We added funny sound to make the cooking experience more fun

coding

challenge 1:

We tried to trigger a counter after button click, but we were not able to do it. Instead, we tried to detect mouse position and mouse press in order to know whether the button is clicked.

create button and track button press

create button and track button press

challenge 2:

At first, we had a food item corresponding to each emotion. Later, we found that we created multiple food items, but we only need 6 food items. Each of them matches with two or three emotions. Allison showed us how to solve this. We created two classes, and we wrote a function in one class that calls a function from the other class.

function increment() from Counter class is being called in function meow() in Tag class

function increment() from Counter class is being called in function meow() in Tag class

final version

installation