Cici Liu – IMA Documentation

May 20, 2019

Week 14: Final Net Art Reflection -Jikai Zheng

Design:
My project, Cities, begins as a replica of a macbook desktop. You are able to find out what made me and my partner fall in love with different cities: Richmond, New York, and Shanghai. The icons of each cities represent folders that open up a slide show of the illustrations we drew that correlate to each city. There are also three audio elements to each individual city- a music track that begins when you click on the icon and a quote or a voiceover we wrote specifically for that city. Also, there are addition functions such as naming your city, and dragging each city icon like folders just as you would on a regular desktop.

Process:
I will use this segment of the reflection to acknowledge the feedback that was given to me by classmates, fellows, and professors. Because the process was carefully described in my documentation, I want to utilize this part to talk about areas that I might have missed that my peers and superiors have brought up.

There were a few suggestions to include a map of a globe for the desktop background instead of the clouds, because I guess that would help people visualize their cities realistic placements better.
1. I purposefully chose to leave the background a little bit abstract, so not to confine the viewer to only one way of thinking.
We also were asked if there were any other functions with the untitled cities icons that we wanted to show.
1. Given more time, we should have definitely included more functions where you upload your own photos into the slideshow for your renamed cities. That would have made my project, Cities, much stronger and even more interactive.
We were told that the webpage looks super personal and intimate, and the art and audio and “sentimental” and “handmade”.
Exploratory mindset, interactivity was minimal but thought out.
1. For 3 & 4. Thanks!
It might’ve been water, wasn’t sure how it looked.
1. We’re open to more abstract ideas of thinking, this is exactly why I didn’t want to choose a globe for the background.
The webpage makes me want to work on it too.
1. I’m so glad that’s the way you felt about this project, which brings me to the…

Future:
As mentioned before, given more time, I would have definitely liked to implement a p5 javascript piece of code so that people will be able to upload their own image files, and possibly even audio files to really make the Cities webpage their own. This way, the interactivity component would be so much deeper and can resonate with anyone that comes to our webpage.

May 19, 2019

Final Project Documentation – Xavier Juhala

Inspiration

For our final project, I and Grace decided that we wanted to do something fun that would also serve us as a place where we could store some of our memories of this city that has become our home. So we decided that we wanted to document our favourite places in Shanghai. This was really fun as we got to go and film around our favourite places around the city and make videos for our project.

Concept

To make this project more fun, we decided that rather just having a website incorporating our favourite places, which was our original plan. We thought that in order to make it more interactive and user-friendly we would the site be bit more of a game. To make it a game we ended up using the p5 js we learned to recreate the images from the videos we recorded in order for the user to have to guess where that site could be as the image got built up. For that reason, we also decided that it would be to record audio of the places we went to, in order to create a kind of soundscape of the area so which would serve as an extra clue to the person guessing what site this could be.

Process

For the process, we first started out by creating the basic design of the website using the HTML, CSS and Javascript techniques we’ve learned over the semester. Then I and Grace both went to collect the video for the website and the audio, this was a really fun day! After we collected the video and auditory aspects we worked on editing them using Premier, to crop, brighten, stabilize and increase the saturation on the videos. We also then used Audacity to edit the audio. The audio of all the sites sounded a bit similar so in order to increase the users understanding of the sites we decided to edit the audios by adding subtle sounds that would maybe be more associated with one site over another. For example for our Xintiandi audio, we added the sound of clinking glasses and plates to simulate the many outdoor restaurants that there are in that area, or we added the sound of the wind on the Bund audio to make it sound more like you were walking next to the river. All of these sounds were sounds from freesounds.org which has an amazing extensive library of sounds to use. Once all of these were edited we started to put them into the website, and this is when things started to get a bit complicated. The audio was not playing in the background like we wanted it to, instead a music bar would appear which then messed up the whole layout. We also were having problems with how slow the pointillism was being generated. In order to not bore our users, we needed the dots to appear faster as they were appearing very slowly at first. After trying for several hours to fix these problems we decided to go seek help from the IMA Lab, where Dave helped me to realize that in order to make it go faster I had to add more code that would take another point and generate it at the same time it was generate the first point (x,x1,x2,x3, etc…). writing this was time-consuming but eventually made the experience much better. He didn’t really help with the audio but after much more trial and error we finally got the audio to play in the background which was a huge relief. Another aspect we had problems on was the background, originally we were going to have a video background from a video we took, when we tried this out on its own it worked perfectly but after trying to incorporate the flexbox on top of it wasn’t working anymore. We tried several different things to try and get it to work but in the end, we decided that having a gif as the background would work just as well.

Reflection

Overall I am very proud of this project, I and Grace put in a lot of hard work into it and we ended up doing things and using code that we never thought we would be able to. Having never in my life used code or anything related to, this final project was very scary as previously for our other projects we had other people who would take the lead as they were more experienced. This time, however, it was just me and Grace and we are both very new and inexperienced, considering this however I was amazed at our final project and that we were, in the end, able to create such a stunning website. Although there are some aspects I would like to improve, such as the comments sections and the layout of the front page such as the font size, colour scheme, and maybe adding some instructions. I am very pleased how this turned out and I think that me and Grace made a great team together. I am excited to apply these skills I learned to all of my future endeavours!

May 19, 2019May 19, 2019

Final Project Reflection – Kimmy and Helen (Kimmy Tanchay)

http://imanas.shanghai.nyu.edu/~kd2130/final_project/index.html

Inspiration

Whilst I was scrolling through my Pinterest board feed as per usual, I stumbled on a post on reimagined modern websites such as google and facebook in the style of the very old of Windows computer in the 2000s. I was really inspired by this that I started wonder what Instagram would look like in the 90s.

I’ve always had this fascination with the 90s because it was this great period of time in which the Internet has only started to become popular and widespread. At the time, simply starting up the internet took up so much time, graphics were really pixelated and computers were the size of TVs. Despite how much progress the internet has made since, people still look back on the “good old days” of the 90s with happy nostalgia, hence integrating Instagram into the 90s was an attempt to bring back that feeling.

Furthermore, as my favourite social media, I felt Instagram was the most fitting choice of social media to integrate as most people of generation use Instagram to share their personal experiences and their lives. Living in Shanghai now is a totally out-of-my-comfort-zone experience that’s it’s both extremely new but amazingly exciting. Hence, I thought of combining these two ideas in which we use a 90s Instagram look as a medium to show our experiences in living in Shanghai.

Visual Design

A lot of my focus on this project were the visuals. For the actual Instagram page and desktop, I tried to replicate the original Windows 85 to the best of my ability and the Instagram page the same layout and format as the current Instagram desktop format, I’m happy with how it came out. My immediate vision for the individual posts were the colours. I wanted bright, bold colours that also mirrored how the 90s used colours at the time and to also give each post a distinct look of their own. Hence, each post/picture had a different colour in which I tried to cohesively matched together as an instagram feed.

I then decided that the best way to present our visuals would be through photoshopped images in order to blend photographs we took ourselves into assets that we could use. For example, for our brunch post, all of the food that is shown in the photo was taken (and eaten) ourselves. Moreover, to incorporate some aspects of the 90s, photoshopping was the more obvious choice instead of hand-drawing EG we were able to incorporate Mario as an ele.me driver and make the iconic castle representing NYU Shanghai.

For the videos, all of the footage were also all taken and edited by us. I had an especially fun time making the “Friends” video, incorporating the popular 90s TV show. We were lucky that one of our friends often makes videos for Youtube and so we had readily available footage of us from the first and second semester. For both videos, filters were used to also replicate a VHS camera.

The visual assets alone took around 2 weeks to fully complete but out of the whole project, this was the most tedious yet most fun part to create.

Coding Process

Whilst I did some, Helen handled a large part of the coding process and putting all the visuals elements together which is quite a feat since we had over 30-40 images, videos and buttons that had to be put together. Much of the coding we used for this was straightforward as we incorporated a lot of the skills we learned from previous projects such as hover, counters, block/display/none.

The most difficult aspect we encountered with this project was the coding for the ele.me driver to move around the page. It was originally meant to be a draggable element in which the user can drag the driver to its destination, but for some reason it wasn’t working when placed onto the div window. Instead, with the help of Dave and our friend Robin, we opted for a ‘click’ then leading the driver which served a similar purpose.

Overall

I had a lot of fun making this project. Most of it turned out exactly as I had imagined. There were some things that could have been improved such as interactivity in the videos or perhaps a better foundation for the conceptualisation. If we had more time, we would have definitely created more posts of what we loved about Shanghai and included some p5 elements which would have enhanced our project even further. Moreover, we could have even added more button function to make it even more like an actual desktop besides just the close button and follow button. Despite some limitations of our project, I’m extremely proud of our project as it is a homage to everything we learned in comm lab.

Thanks to all of the IMA fellows who has ever helped me with any of my projects. I couldn’t have done any of it without them, especially Dave !!

Lastly, shoutout to Helen for being an amazing amazing partner <3

May 18, 2019May 18, 2019

Final Communications Lab Project – Reflection Post – Adam Chou

Title and Link of Exposition: <“A day in the life of Miki“>

Design:

The design of the website was incredibly simple, as the central focus was on the audio and storytelling of the narrative provided.

The user was able to experience the website by switching perspectives, hiding text, resetting and pausing and playing the audio.

These controls were meant to enhance the user experience and explore the concept of different perceptions. Below are some screenshots of the pages.

Black and White are used as the main colors to convey the simplicity and illustrate that the work described is a work of fiction.

In terms of functionality, white borders and black backgrounds were also used in order to help convey this idea.

Title Page:

Narrator View:

Miki’s View:

Narrator View (with text hidden):

Miki’s View (with text hidden):

Process:

Please check out my documentation for a thorough explanation of my process.

Future:

Critiques mentioned during my final presentation were mostly stylistic commentary. Here is a list of them:

It was recommended that the art were to represent different perspectives of the characters being described. The narrator would have a third person view, whereas Miki would have a first-person view.
It was also recommended that audio and art were to exist in separate perspectives, so the background audio that played would only be audible when Miki’s perspective was presented.

In response, however, I would argue that my concept would discourage such ideas. In terms of representation, as the actions being carried out in the script all occur in the same world, you (as a person within the world) would be experiencing the same things as both the narrator and Miki. The difference here is whether or not you hear the thoughts of the narrator or Miki, as they are subvocalized, and therefore not pertinent when the other person is not being paid attention to. This is mainly seen with the inclusion of Miki’s audible yelling in where she speaks in the world that I created. Because of this, it would make less sense if you could only hear Miki or the narrator, as they participate in a very real world and still have very real effects. If they were in separate realities, however, the criticisms would then most likely be quite valid.

The idea, however, is that you are there, physically. You can see what both of them see, but you cannot hear everything at once. If you did, it would just confuse you. The point is not to confuse you, but rather, have you observe.

However, there are some bugs in the program that I would like to resolve in the future.

There is one issue that I described in the documentation in where the code would restart the audio file that I had played for each line.

For example, I would have a function that asked the source of the audio file to change when a value that measured what line of the script was being printed. Whenever I had a range of numbers, it would not work. And so I either have to manually redo it and have the range equal a series of numbers, or I would have to employ some serious help since the fellows could not help me with the issue. 🙁

Truly, it was a bug to stump many of them.

In other news, I would have liked to add some gradient backgrounds that would have changed the color as the audio and drawings progressed. Additionally, I had to cut off half of the initial story that I had written, which means that the project is incomplete.

Therefore, adding even more assets to the many that I already have is something that I would have to do.

Other than that, I am pretty glad about how it turned out. This is the most complete comm lab project that I have to date, and I worked on it as a solo project – which impressed even me to be completely honest.

Source Credit (FOR BACKGROUND AUDIO ONLY):

The rest of the background audio files were recorded by me, a day before the project was due. Whew, how stressful that was.

May 17, 2019

Internet Art Project- Kyra Bachman

link

Concept:

Our internet art project is meant to simulate a children’s web game. I drew inspiration for this from an interactive collage, that represented its meanings through various popup windows. Our conceptual goal is to represent the differences between conventional beauty standards from different parts of the world. It seemed fitting to approach this topic through the lens of the popular children’s movie, Snow White and The Seven Dwarves. The website begins using the famous quote ‘who is the fairest one of all?’ that subsequently proceeds to a world map that requires the user to view images from several places to continue. The images are each a collage of the various characteristics that that that location believes (or have believed at one point in time) as conventionally beautiful. After the user views each pinpointed location, they are then directed to sort out a college that includes a beauty standard from each country. Our central message is meant to bring attention to the

The Process

We originally planned to create this project in the form of an interactive timeline outlining the change in beauty standards over periods of time as well as between different regions. However, as we gathered more research and began to structure our website, we felt it was also important to convey the message of how conventional beauty standards are entirely dependent on preconceived notions of desired physical traits (mainly with women) within a given culture. People’s subscription to these beauty standards appears to be a product of their socialization, as in, where you were raised and the commonly held opinions in that region will affect how you compare yourself to others. This is why we saw it fit to create this project as a children’s web game, as an effort to expose them to the subjectivity of these norms at an early age.

Designing the website and photoshopping the images was a long and meticulous process. As this is a sensitive topic, we wanted to be sure it was executed in a suitable way. Selena and I first created a shared google doc to outline information on trends of beauty within each country, with which we chose the pictures for the collages. Moving forward, Selena started the coding while I worked on the visuals and joined her to work on the coding when I was finished. The main issue we had was coding the collage drag at the end. For this part, we used CSS and Javascript to position the images, but finding a solution that would hold the image in place properly was extremely difficult. Initially, each time we tried dragging the image, it would go to a weird place on the page. With help from Dave, we were able to find a solution by putting a div where we wanted to place the images.

(here’s what the collage looked like in the beginning)

Reflection

After presenting in class, I realized how we could have improved our message. I think it would have been helpful to provide a textbox or description beside the images. Even though we had done the research and were aware of how the images we selected impacted the beauty standards of that country, from the feedback we received, I can see how this may be perceived as otherwise. I also think it would have been better if we chose a specific area or city, not just a country, to focus on. With such a broad yet sensitive issue, there is always the risk of trivializing certain features that many would consider important, which was obviously not the intention. However, I do think these problems are a simple fix and something that could be easily changed if I were to tackle an issue like this again in a project.

Overall, I am pleased with how the final project turned out. This was a subject that both Selena and I felt passionate about and we spent numerous hours working on. In this class, I feel like I have gained extensive knowledge on the importance of communication and I think this was a nice way to apply all the content we’ve learned into a single project.