“Comments”

By Xiaozao Wang

Description:

My networked installation, named “Comments”, is an interative visualization of how everyone’s online comments can contribute to changing the environment of the whole cyber-community. By simply scanning the QR code and pressing the button on the webpage, people can either leave a positive or negative comment on the virtual space.

At the same time, in the physical installation, 2 different kinds of acid or base chemical will be dripped into a container based on whether the comments people leave are positive or negative. The mixture will turn bloody red if too many negative comments are left, and will return to transparent when more positive comments are left and offset the effects of negative comments, with the help of the PH indicator inside the container. In addition, the computer will read out the IP address of the viewers, and the comment they leave.

By representing the process of leaving online comments through this physical installation, I want to show the power of every single comment on changing the Internet environment, and reveal how negative comments can cause huge damage to the environment and individuals. Through this project, I want to alert people of the harm of cyber-bullying, and remind them to show more kindness to others in online social medias nowadays.

Part 1. Motivation and concept

When I was told that project B would be about expanding the web to physical installations, I decided to make some of our actions on the Internet be visible in the physical world, but changing its form. Leaving comments is what we do every day, but people usually only care about expressing their own feelings, but rarely consider others’ feelings when receiving negative comments. Saying something harmful online is way easier than in reality. Therefore, I wanted to make a project that visualizes the “commenting” process on the Internet, show the possible impacts of positive and negative comments, and thus encourage people to be responsible for what they say.

Also, I have learned an experiment in my high school chemistry lab, which uses phenolphthalein as an indicator since it is transparent in an acid environment but turns red in the base environment. Therefore I decided to use HCl and NaOH to control the PH of the solution, and make phenolphthalein change its color and help imply the impact of comments on the social media environment.

This is my draft of the project during brainstorming:

A challenging part is deciding the “proper” comments on my web page for the audience to choose, and the proper image to be stuck to the container representing the receiver of the comments. I tried some woman’s images and feminist words at first, I also tried some celebrities’ photographs. But in the end, I changed the words to a more generalized and abstract form, and put icons of social media on the container. Maybe that’s because I didn’t want to focus on a limited area of cyber-bullying, or maybe because I was not brave enough to stand up for a certain group of people?

Part 2. Physical Installation

This part is challenging but also exciting for me. I once thought that I was a person that likes making handicrafts, however, you definitely need to go beyond just doing handicrafts if you want to finish a project on your own. You will need to ask professors and LAs for help, because it’s impossible to do everything on your own. You will need to find materials and digital components on your own, which are not provided there at the school, therefore you have to carefully arrange the time to buy them and wait for their arrival. You will need to learn new things such as mixing chemical solutions and wood-cutting, sometimes self-learning is enough, but at most times, asking for help is necessary and more efficient. Asking for help is an important aspect that I learned from this project, though I still didn’t do pretty well in it lol.

This is my sketch for the physical installation. It mainly consists of my laptop, a frame that supports the laptop, two peristaltic pumps with pipes that transmit the chemical solution, a container that holds the mixture of chemicals, and the Arduino board and wires. I took Gohai’s suggestion and decided to have my laptop be a part of the installation because by doing that, people can get a better sense of being the provider of the comments while they look through the camera of the laptop and see how the chemical solutions have flown from their side to the container.

Here is the photo of my physical installation, I make it lab-like, which is inspired by the jellyfish-like exhibit in UCCA edge. I wanted the installation to look like a kind of organism, which shows the dynamic of web space.

. 

Part 3. Web Development

In this part, I mainly applied what we learned about web development in class to the project, including node.js, HTML/CSS, and Arduino. There are two crucial points, one is the design of the user interface, which is basically what they see after scanning the QR code of my webpage. The viewers can see the whole process of mixing the solutions together and changing color through the live streaming on the webpage, and choose to leave a positive or negative comment. They can also see how many positive and negative comments have been sent out in total. The other one is the communication between the front end (HTML and Arduino) and the back end (javascript). Here, I received much help from Gohai, but also, I think I worked hard on exploring and learning on my own!

Here is the code: https://github.com/Xiaozaoo/expanded-web.git

Part 4. User Tests and Final Project

Here’s the video demonstrating how the whole project works:

 

During the user tests, I received many very insightful and constructive feedbacks:

1. Improve the user interface, make the buttons more attractive and make the live stream full screen, which is more comfortable to look at.
2. Change the picture inside the container to the icons of social media.
3. Generate random comments.
4. Encourage the chaos caused by many people leaving comments at the same time.
5. Change the paper in the container once in a while, and collect papers with different topics on a big billboard. The color of the paper will reflect people’s attitudes towards a certain topic.

I really enjoyed the user testings, especially the last one, the ideas inputted from my colleagues and professors are giving me much imagination on the future improvement of the project!

I think something feasible is point 5 above, and it will be very exciting if I can print more posters containing the QR code and stick them around the campus. I will keep the installation somewhere, and every time a person scans the code and leaves a comment, he/she will contribute to the completion of the project in some way!

Things that can be done better will be doing more preparatory research on cyberbullying and people’s behavior in the digital era, which will help me better clarify the concept and goal of my project. I could also work harder on learning HTML, and the overall time management!

Thank you for reading!

The work’s title: “They in us, We in them”

Author: Yi Yin

Composition: Bare sound amplifier, motor, customized sound player, communication program

Year of creation: ?

The artwork consists of 50 speakers and a mobile interface. The speakers were suspended in the air in different sizes of groups. Viewers can input their voice to the system by speaking a sentence to the mobile interface. The sentence is first played through a high-powered speaker, and when it’s over, 49 low-powered speakers rotate randomly to an angle to play back the messages they stored from the previous audience. After all the speakers are played, the sentence you input will be randomly saved into one of the 49 low-power speakers. Through this process, your voice will join the large group of 50 voices, and become a part of the community. 

Here’s a quote from the author, Yi Yin: “‘Vocalization’is the most intimate act by which a subject reveals its existence to others. When a specific sentence is uttered, it is not waiting for an answer in the sense of linguistic structure, but immediately enters the social structure and waits for the response of others in the social structure. Say a word, there must be a response, but is the response logical? Can we decide whether words or sounds will be spoken?”

I like this project because it shows how every one of us is a part of the shared conversation in a very interactive way. In this project, the audience can listen to the voices others left, thus having an idea of what kind of people they are through this inheritance of voice message, and memory. They are also able to make changes to the voice community through their own actions. The project speaks to me that no one is isolated in this society, and all the things we do in life will make a difference in others’ life somehow. The information in human society is a flow and circulation, and it is being refreshed and redefined every single second of human history.

Project A: Snake-Hat Game

Video:

 

I. Project Description

My interactive Snake-Hat game was inspired by a story in Little Prince: The main character drew an elephant inside a snake’s stomach, but all the adults thought it was just a hat. Starting from this strange but very imaginative concept, I created an interactive game that links the web browser to the physical world, enabling the users to control the snake on the screen to swallow the random-generated animals by putting their hands in a snake-like puppet and making some simple gestures. The snake on the screen will look like different kinds of hats when it swallows different animals, and will digest the current animal to be ready to eat the next. There is also a point calculator in the corner of the screen to help the users keep track of how many animals they have eaten, and how many snake hats have they generated. 

For the fabrication part, I used the sewing machine to turn discarded fabric into the snake puppet, and assembled conductive tapes and threads to connect the snake body to the Arduino board. For the interactive part, I made the project a simple game-like interaction, and aimed to maximize the joy and engagement of playing through easy-to-understand movement instructions and attractive visual effects.

II. Motivation

As mentioned in the description, my project was inspired by a story in Little Prince: The main character drew an elephant inside a snake’s stomach, but all the adults thought it was just a hat. I liked this story very much, as it shows a naive perspective of viewing the world: Not yet formed by convention, but keeps the artless imagination of childhood. If you ask me about the meaning of this story and my game, I would say, to make an unconscious smile appear on people’s faces is what it is all about. 

Here are my five ideas from brainstorming:

Here is a more detailed plan of the project:

III. Reflection on the Process

I used to have a problem which is to make my project too complicated. I was always not willing to give up any of my original ideas, thus ending up mixing all of them and creating a cumbersome project without a clear concept. For example, for this project, I have thought about enabling customized user input, adding even more animals, returning hat mementos in the end, and developing a more complicated point calculating system. However, Professor Gohai emphasized to us many times to keep the interaction simple, and to focus on the “depth” of the project instead of the “width”. Therefore, during the revision of my design, I tried to narrow down my idea to be more concise and integrated. Also, while I was programming, I first focused on the most basic part, which was the swallow-and-digest process, and I used the “prototype” thinking, which was to use simple shapes to replace the animals at first, and improve their appearance after the whole process can run smoothly. Through these strategies, I was able to break down my idea into several executable steps. I think that is the best thing I learned from this project. In many times we don’t have the time to do all the things we want, but it’s good enough if we focus on one of them and really dig deep into it.

Another thing I learned was the importance of self-learning. We were introduced to so much information in class, for example, p5js, Arduino, Html/CSS…… Every single one of them is so broad and requires much time of exploration after class if we want to know more about it. I studied some of the coding samples from the class slides and the official p5js website, but that’s far from enough to master it. I think I should dedicate more time to self-paced learning in the future, and be braver to ask Professor and my classmates for help.

IV. Some pictures