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

Final Project Proposal

This semester, I have been working on a side project about complimenting people. In this project, I provide service to people. One of my most popular service is to compliment clients one time a day in different ways every day. User can reserve a period of time, for example, a week, a month, but less than a year. All my compliments are handmade by me and tailored to each specific client by their interest and personality.

Now, I have about 10 users for this particular service, and I have few other people signed up for other compliment service. It has become more difficult to manage these tasks. Sometime, I forgot who I complimented already. Or, I might got too busy, and I forgot to compliment. Yet, the core of this service is to do it every day. To help myself be more organized, I want to create an interface to help me manage and document this project. Below are few features I hope to make:

A to-do list for who I need to compliment today. I can check off when I compliment the person.

A to-do list for who I need to compliment today. I can check off when I compliment the person.

A page that I can look into a specific user and check what I have complimented him/her before.

A page that I can look into a specific user and check what I have complimented him/her before.

Look up a specific day and see what I complimented to users on that day.

Look up a specific day and see what I complimented to users on that day.

This is a new feature I recently added. The user needs to compliment me every week too. They can do it however they like and how many times they want. From this page, I can check if they have complimented me in a week.

This is a new feature I recently added. The user needs to compliment me every week too. They can do it however they like and how many times they want. From this page, I can check if they have complimented me in a week.

Class and Array

code: https://editor.p5js.org/ml6458@nyu.edu/sketches/rJyzex257

collaborated with Anna Oh

concept

Anna and I wanted to make an upgraded version of the animal DJ set we made last time. We came up with this cat and dog star wars idea. This is my initial sketch of a rough idea.

process

First, I created a class called animal that contains two arrays, cats and dogs. This is the first prototype we made. Each has five cats and dogs travel diagonally across the screen.

download (1).png

I learned about nested loops when I was doing dog and cat intersecting. Because each cat in the array needs to check each dog in the other array, they need two for loops to check this.

Function

Code: https://editor.p5js.org/ml6458@nyu.edu/sketches/rynpUGkc7

This week, I built functions outside of setup() and draw() to make repeated codes more organized and efficient. At first, I copied the entire section of animation part into a new function, but animals were not moving. I realized that since the function is called in draw(), the x coordinate is going back to zero every time. Then, I kept all x coordinates the same.

While making new functions, I had few questions:

  • why the buttonstate always return false not true?

  • why did the animation accelerated when I add more kinds of animals?


Condition and Loop

code: https://editor.p5js.org/Annaoh/sketches/HJdtzcFY7

ollaborated with Anna Oh, so much fun coding.

Concept

This is a music DJ set that makes an animal chorus. Players can decide how they want to compose the animals. The four buttons on the bottom left each has an animal sound. By clicking the button, a row of animals will appear to sing.

It was a lot of fun to code with someone. In our first meeting, Anna had an idea to create something like a DJ turntable, and my idea was to create some game like thing. We combined the two ideas, and this DJ controller in animal version is what we came up with.

Coding

Few challenges we met:

  • how to have infinite images loop around a row?

    • Solution: Through for loops, we can create a bunch of dog images. Through if statement, when the dog reaches to the right edge, come back to the left.

  • how to press the button and keep the sound looping until press again?

    • Solution: Use mouse pressed function outside of draw(). The function would only be triggered when the event happens. We also used buttonstate = !buttonstate to toggle whether the mouse is pressed or not pressed.

We learned the most from them these two most difficult challenges in this project.

download.png

Animation

code: https://editor.p5js.org/ml6458@nyu.edu/sketches/H1bxKfeY7

For the animation, I wanted to create something like raining. The challenge for me is to create multiple triangles without hardcoding all of them. While I was thinking about this, Yen walked by and told me about using class, so I looked up Shiffman’s tutorial in class and array. That helped me a lot to figure out the code.

Drawing

code: https://editor.p5js.org/ml6458@nyu.edu/sketches/ryJVCpIdm

This is my first time using P5 and also first time using code to draw. It was fun and slightly frustrated at the same time. I thought of drawing flowers with geometric shapes, so the drawing developed as I explored various combinations.

Yes, it felt slightly tedious to locate every coordinates and value, but it was interesting to draw so precisely in a way. An ITP friend, Chengchao Zhu, saw me struggle with the coordinates, and offered a suggestion to track mouse location and print coordinates in the console. That saved me a lot of time of adjusting little details.

When I drew the stem of flowers, which were curves, I struggled with quadraticVertex() and bezier curve. After I saw more examples and did more practice, the curves started to follow how I wanted them to go.

I’m still exploring what computation can do and how to apply it to my work, but it seems like there are many interesting possibilities. I like how computation gives me a new way to approach visuals, and I am interested in using computation to create projection for installation and performance arts.

I want to keep explore how I can play with computation to make art and design. Right now, I still feel pretty vague about what computation means to me. I just want to keep being curious and make some playful works with computation.