Final Project Documentation– Angel Yang

Link: http://imanas.shanghai.nyu.edu/~zy1193/project4/project4.html

Description:

In this project, me and ploy decide to make a food map of China, cuz we both love traveling and exploring the food. So we use a small man icon to represent the visitor and the audience can use the arrow key to control it and lead him to the city they want. After you enter the city, you can see the most famous food there and its culture as well as history.

Process: 

I was responsible for the code part and ploy was responsible for the drawing part. Then, we record the sound together. The recording part is really interesting. Because the sound we try to record is not that recognizable and distinguish. So to gain more effect, we even try to add the water to the hot oil. The effect was really good but somehow a little dangerous. After ploy cut and edit the audios, I put the images and audios into the webpage. Doing the code is really complicated. I created the main page as a big framework. And create the first page’s coding framework. The code framework for the five food page is all the same. So then, ploy changed the picture and audio in the page based on my code and do the other four page.

Challenges:

The first problem I met is how to make the icon arrive at the city and then the star can be lightened. I went to the fellows for help, and use the console log to get the position of the icon and use JS to set a function.

The second problem is how to make the curtain effect. It is really complicated. And need to cut the picture manually. Some code from the internet is really beyond our class, so I went to ask fellows, and they told me that I don’t have to stick to their code, there are so many ways to achieve the same effect. 

The third problem is that it’s really hard to explain the culture and history background of food to the audience in a very easy way. The text, the image, the audio how to place them all together in an art website is really a tough job.

Conclusion:

I felt very rewarding and engaged in the coding part. Although I spent a lot of time on it, I actually learned a lot of knowledge that I didn’t understand in the previous class and even some the class didn’t teach. I think learning shouldn’t be restricted to the class, when we want to achieve our own goal and explore it, it is more interesting to learn. 

Also, I think the user test part is really useful, we can see something we didn’t notice before and make our project better.

Week 14: Final Project – Lily Deng

http://imanas.shanghai.nyu.edu/~hd1073/FinalProject/index.html

Production

During the project production I encountered the following problems:

1. Last minute change

My initial idea for the project could not be implemented at all because certain conditions could not be fulfilled. I will try my best to consider the feasibility of my idea first.

2. Organize 

As we all know, an interactive project usually consists of four parts: html, css, javascript, image. Sometimes sounds are also necessary. I concluded that making a project efficiently requires a thoughtful procedure of organizing the following: constructing plan, collecting assets, finding tutorials, et cetera. We should also pause from time to time to check whether the project works.

3. Detail

During coding, I ran into a large number of hiccups, usually due to some minor mistakes, such as typing a colon instead of a semicolon, missing a parenthesis, et cetera. As a saying goes, a miss is as good as a mile. In the future I’ll pay more attention to the details.

Presentation

After putting a lot of hard effort into production, my presentation was overall a great success. As an amateur, I mainly regarded the project as an assignment to accomplish only. However, after the meaningful feedback from classmates and learning assistants and instructors, I came to realize the importance of user experience. When constructing an interactive project, we have to keep in mind that it is for the user to experience. So it is essential to put ourselves in others’ shoes. For example, does the title mislead readers?Does the background music correlate with the theme? Will the user feel what you want them to feel? Is the message fully conveyed? These questions are something we need to contemplate upon.

Final Project Reflection – Kat Valachova

Link:

http://imanas.shanghai.nyu.edu/~kv795/week13/index.html

Partner: Manal

  • Design

Due to our project not ending as expected, I will describe both the planned and the real final form. Our project’s planned final form was a an internet based window, which should symbolize a real space (a room) with people and the way they interact. There should be in total three rooms in between which the viewer can switch and the background of these rooms should be sketched in a very minimalistic way to hint on what kind of space they are – e.g. library, café, metro.Each room should have around 5 people and each of them should be in at least two of the mentioned spaces. These people are represented by “floating” simple geometric shapes, which are in constant movement and bounce of the walls the same way the old Windows screensavers do and they represent the strangers the viewer can encounter once he enters to him a foreign space.

Our project is meant to lead the viewer through a narrative. This narrative starts by the viewer opening our website. He will be added into the “field” of floating people and will be told what is his icon. Immediately after entering, he will start receiving strange messages in a message box at the top of the screen. These messages are form a stalker and will grow on intensity, defining the time of the narration. The goal of this project is to make the viewer feel he has to find the stalker before the stalker finds him. The viewer can get more information by colliding with the other people icons, that sometimes give away hints about the space they are in, about the stalker and about the viewer himself. The viewer cannot control his own movement, but can change the movement of the people around him by clicking on their icons and changing their direction towards him.

When the messages from the stalker escalate, in the last second the view is supposed to change to a blurry image of a psychiatrist leaning over the viewer, telling him he forgot to take his meds again.


Due to various reasons we only managed to create a website that has one window, no background and has interacting floating icons which, whenever they collide with the viewer will produce a bubble with a different message.

  • Process

At the beginning we struggled to come up with a solid and at the same time executable project idea. After consultation with academic fellows, we decided on an idea, which was in the time frame we had rather challenging. We still decided to go with it because both of us seemed to be very interested in this idea and we believed if we worked hard and well divided the workload, we could make this idea work. Due to various reasons the workload did not end up being divided equally and in the end basically only the coding part was worked on. This makes me think if I were to consider this project again, I would have done it alone from the beginning, with an easier concept that would be doable by just one person. Also due to sudden data loss, I was then not able to wrap up the coding section as I had to recode everything  I lost before. This is one of my greatest regrets, because although I saved my files on an external disk (or so I thought so), I ended up losing all of my .js files. After the erasure, I started frequently updating my file on the cyberduck in order to ensure no such thing would happen again. It also allowed me to in real time test the website and notice right away if there was an issue with the code. This proved very useful, as combination of P5 canvas and normal .js is very fragile and prone to dysfunctioning, which is often very hard to uncover. This is a part I didn’t anticipate during my project planning and it in the end greatly influenced the stage into which I got my code, because in the end I spent hours on debugging my code. Due to some reason there is a problem with combination of iteration, pulling out timing from an array with times and pushing text into a div. This is so far the biggest challenge in the code. I also learned that all of the javascript files are read by the computer as one.

  • Future

Given more time I am planning to finish this project, as I believe I could still learn a lot from it as well as I believe if properly finished, it could be an interesting experience for the user. There is more work to be done not only on the visual part of the website, but on the script as well. The script together with the right timing is the main factor influencing the successfulness of this project, as it is mostly based on psychological effects this website has on the viewer.

After the finals end I am still planning to at least completely finalize the code frame so the only thing left to do would be entering the scripts and editing the visual parts.

Final Project “My Protest” (Vivian Zhu)

Title: My Protest (initial name: Social Media’s Rebellion)
Link: http://imanas.shanghai.nyu.edu/~zc1151/commLab/finalProject/index.html
Partner: Cecilia Cai
Design:
Our project is built upon the idea that everyone wants to meet up with ‘a perfect life’ standard on social media. We want to criticize the fake posts with shallow contents online, along with the sarcasm towards people’s indulgence into the virtual world.  Inspired by Victoria Siemer Human Error, 2014, the whole project stands from the perspective of social media (treat it as if it is alive). The social media comments on and criticizes the posts and ultimately itself breaks down because it protests the fake and superficial part of itself. 
Process:

Because Cecilia and I initially wanted to design a project that could take advantage of our assets in coding (Cecilia’s) and photoshop and video&audio editing (mine), we went through a little bit tough process of coming up with feasible ideas. We both wanted to critique the social media (in terms of the spread of untrue information, the brand-followers, etc.), but it’s a multi-layer topic and the way of presenting them was always vague. During which we even thought about doing spatial arts instead. Almost right before the final proposal due, we eventually got inspired by our anxieties and feelings of nothing is right: what if nothing on the social media platform is right? What if the social media itself breaks down? Further inspired by error arts, we designed a social media platform that is broken down and filled with three untrue, exaggerated posts.

The first post reflects a Chinese cosmetics beauty opinion leader (KOL) showing off her new facial style (unreal make-up completed from App Meitu) and luxury goods. To make it more sarcastic, I intendedly designed an Asian-baby-girl name Crystal. The post is her overly photoshopped selfie meeting up towards Chinese customers’ standard of beauty. To reveal the essence of her luxurious life, I substituted her clothes with the pure collage of luxury brands. 

I was told the brand-collaged clothes Crystal is wearing looks good. But I think it could be better if I make the brand names move on the clothes, in order to make it more interactive and sarcastic.

The second post is from a western food KOL showing off her self-made pizza, with a sophisticated description of the recipe. The post intends to criticize that though KOLs are using their wits end to express how complicated the food is made—and thus how dedicate their lives are, the main ingredients of making these foods are actually monotone. I like the innovative way of showing the core idea: the oil is the sea, tomato the rocks, flour the sand under the sea, cheese cubes float on the sea, ketchup is the beach. But it still looks unnatural. If I had the chance to do it all over again, I would make the picture look as if an artwork rather than a rough draft on photoshop.


The third post is from a drama queen Mia, whose make-up and facial features are also fictitious and overly photoshopped. She is celebrating her birthday and the cake is on fire. But her first intention is not putting out a fire, but posting her selfie with the blasting cake online, with the intention to earn sympathy and attention from others. This post criticizes the phenomenon that people are addicted to crazy ideas and fascinated by sharing them online, even if the ideas are dangerous and inappropriate.

I successfully figured out how to make the cake as if it is blazing using “stamp” and “burnout” function in the Ps. But it’s really a pity failing to address the issue of the source of light. Because this post is made from four different pictures, the perspectives to shoot them are different and as a result, the whole photo doesn’t look that real. If I had more time, I would shoot the picture in the real situation to add a sense of realness.

Actually, we initially wanted to make the third post about a fanatic fan for Ariana Grande, who is asking his friends to buy the new album for his idol (Ariana). The song is made into the melody of Beethoven Virus, and it is a combination of system error sounds. But because we thought it’s better to use the creepy song as the background music of the end page, we changed the third post then. Though as a song it works well, it is not that intentional and we received confusion like “Why you are using this song?”

For the ending part, I researched data for the average time that people spend on social media every day, and the most searched topics, etc. I wrote four sentences from the perspective of social media (because it’s social media’s rebellion), mocking and making people reflect when they are on the social media platforms, what they are actually looking at and sharing. The last page looks more of being hacked rather than the website’s broken down. It would be better if we could make it more real.

I initially used After Effect to create the beginning of our project, making the title “Social Media’s Rebellion” look as if an unknown signal interferes. It works well in terms of effect, but its style is not harmonious with the second and third pages, and the name could be confusing, we decided to delete it eventually.

Reflection

After the presentation, I realized there are still some defects underlying our project, especially the idea transmission. According to the feedbacks, many audiences found it difficult to understand the meaning of combining the shallow posts and the glitchiness. And many of them found the title “social media’s rebellion” confusing. It is surprising as we thought to have made everything clear. But their feedbacks actually inspired me that art project is not just an instrument utilized to convey the message, but also a cultural thing. For example, the title which is criticized was actually cautiously named and has been approved by many of our Chinese friends. However, the word “rebellion” seems to be used in a different way than we thought it to be, therefore causing lots of confusion. Besides, the whole project stands in the shoes of social media. Social media aggregates posts with cheap styling and shallow contents, and comments on them, with the intention to criticize that people who indulge in social media,  are actually get impacted by social media itself. The effect of glitches and break-down are not only unique ways of expression but also expressing social media’s criticism and satire towards people’s absorption into a virtual world. 

After we realized the difficulty of sending the message successfully, we made further adaptations towards our project based on reflections. Firstly, we changed the title into “my protest” to avoid confusion to a heavy word “rebellion”. Secondly, we made the background picture less broken-down, in order to have a better contrast between the first scene (three posts) and the second (social media breaks down). 

Future:
Criticizing social media intentionally is not an easy thing as it has multi-layer messages, and most messages can be regarded as neutral. The project could be better if the project could focus on merely one or two aspects of social media. I personally really love the possibilities of combining error art style with the topic of social media—-and only on the web can I realize this combination. Just like Lauren points out: the web is what we make it.