Customize Here Untitled

My final project is a narrative on the four stages of grief. It was inspired by the series Karol Keeteman painted when she was grieving over the loss of her sibling. The paintings depicted her in various stages of recovery. http://www.counselingstlouis.net/karol.html My project is composed of visuals that represent the stage and the audio will accompany the visuals to form a mood within the viewer. Flickr generates images that represent the mood in boxes. The page will read out tweets with tags of that mood.

I intended my visual to help people sympathize with others who are grieving in a gentle way. However, although Flickr has a safe content setting, Twitter does not. The tweets I got were violent, angry, and relentlessly being read. Rape and murder were commonly read topics, along with tweets bullying others. It painted a sad picture of human nature; people were petty bullies. 

I had to improvise on the visuals because the Flickr API did not allow for circle images to appear and I could not devise a way for the image to appear circular with p5.js. I left the images as boxes, but made them smaller to show the insignificance of one thought in terms of an entire mood. Also, I added user interaction by having the next phase be triggered by a mouse click. However, I should have added an indiction of WHAT my project was doing, because although I knew, it was not obvious to a new user.

I used the p5 speech library, which was pretty cool and allowed me to have the tweets read out in a certain voice. I chose the friendliest voice for my project so it could gently guide the user through emotions, but even so my project was still grating. I also learned how to use more complicated APIs, like the Twitter search API which required a Node.js server.

I tried to figure out a way to slow down the images and have multiple voices read at once, but I could not. If I could spend more time on the project, I would like to debug that.

Check out the code here:

Completed my bubble game!

Implementing the drag and drop was very difficult. I had to be clever and use mousePressed, mouseDragged, and mouseReleased and loop through the array to be “checkpoints” of when to manipulate my Bubble objects. The precision for bubble dragging is off and I would like to spend more time debugging the math, but it is such a minute detail I’m not sure if it matters. 

It is also impossible to avoid losing, but I designed it to be that way because eventually you lose control of your bubble. :)

Check out the code here:

I wrote a program to loop through fast food restaurants and display articles with the name in the headlines per 100 pages. The articles are of random font size and in random areas within the window. I wanted it to fade in and out like the New York Times aesthetic so I kept the font and greyscale coloring. As the background gets lighter, the font gets darker. I added a sound effect because I feel like these articles are forwarded through mail a lot and are equally annoying as the mail sound.

I kept hitting the rate limit for the API key again so I just closed the window as soon as I was done testing it. Another difficult part of developing this program was just figuring out how to make plaintext article headlines fun, which I decided to do by showing how spammy they are, despite how good looking and official they are. Also, the headlines tended to be negative, so I felt like adding the lighthearted sound effect helped lighten the mood.

I was experimenting with color gradients but I couldn’t figure out a color gradient that didn’t hurt the eyes. Also, at some point, both the text and background become very similar colors and get hard to read. I accepted that as the fading effect but would correct that if I knew how.

Check out my code on Github!