Communications Lab – Page 5 – IMA Documentation

May 20, 2019

Final project reflection(Update for Critiques)— Angel Yang

In the final presentation, we got some critiques from our classmates, professor and fellows, they are very valuable and worth to reflect.

Better to use some colors which are easy for the audiences to read the text.
Use a theme line to connect all the sites (e.g. a food trip along the Silk Road), instead of letting the icon move randomly and without intention. Also, use some region to represent the food instead of picking only one city.
The initial position of the little guy is not obvious enough, and people might not notice it. Maybe put it in another corner (e.g. in the sea).
set a button, if you click the button the icon will change, not only the man, woman the other animals can also be included.
The instructions for clicking the mouses/pressing spaces are a bit confusing. And both using mouse and the key is quite confusing too.
the border of the map is quite confusing. Drawing a map can raise some sensitive debates on borders. Focus more on the food instead of the map.

I think that although what we are creating is artwork, what we should consider is more than the art. We can’t complicate it to a political issue or social issue. I think I should think more fully next time.

May 19, 2019May 19, 2019

Final Project (Net Art) Reflection – Jiannan (Nan) Shi

Project Reflection

Link: http://imanas.shanghai.nyu.edu/~js9686/net-art/index.html

My net art project, Traffic Symphony, presents the traffic status of 40 cities in China in an audio-visual form with API from Gaode map. On the interface of this website. there are two squares in parallel with each other. The one on the left is a map where the user can zoom or drag to locate the portion that he or she wants to see and listen. The one on the right can visualize the traffic status using colors and phrases (green-expedite; red-slightly congested; dark red-congested). When the traffic is expedited, the background sound would be full of cars passing by. When the traffic shows congestion, there would be horns and whistles from the police. The frequency of horns would reflect how congested it is on the road. Meanwhile, there is a layer that is behind the two squares visualizing the traffic sound. The main background is video clips from the traffic.

slightly-congested — slightly congested status

Also, if one moves the map into a place or scale that I couldn’t get information from the API, the square on the right would say “unknown.”

Since I want to use API, I get information from Gaode to see if there are any tutorials that I can follow. However, I only get instructions on how to call the functions using the phrases that they provide. Then I tried by myself to see how to retrieve data from Gaode. This was my first attempt:

After I put the map on the website, I found that I could not get any data. After a reference to these projects (https://blog.csdn.net/theArcticOcean/article/details/68950692; getBounds: https://lbs.amap.com/api/javascript-api/example/map/map-bounds), I knew that I need to use JSON here, and I revised my code accordingly:

Since my intention is to change the beats according to the traffic status, I tried to use setInterval(“playSomething(), frequency”) to achieve it, and I put the frequency in a format like this in every traffic status:

But then I found that if I do this, the functions wouldn’t stop no matter how the traffic status change. In other words, the functions wouldn’t stop after changing the frequency. Then, I tried “return” function, and if I use “return,” the webpage would make no sound. Finally, for the sake of convenience, I only declare frequencies inside each traffic status and created a new function out of the if statements using the frequency generated, and tried to use clearInterval(). However, the functions would still not stop when a new frequency is declared. This confused me for a long time until I met Leon. I realized that I need to declare the variables at the top of the page out of every other functions to let them refresh according to the frequency. I realized that a variable would only work within one function, and it would not be applicable to other functions. I need some global variables to let my functions run.

Then it comes the p5.js part that I want to use to visualize the sound (reference: https://p5js.org/examples/sound-frequency-spectrum.html). By referring to the sounds examples on p5.js reference, I found that the audio files could only be loaded within p5 otherwise nothing would be recognized. Therefore, I came up with an I idea that I could read all the sounds coming from the computer to be the source of sounds. However, I found that it is impossible. I later used the mic sounds instead. But, if the user plays with my project with an earphone, the sound visualization would be nothing. After consulting Leon, I know that I can declare all the things in the script.js (map, squares, audios) using one function and then run this function within p5. By doing so, I am able to load sound files within p5 without needing to use the microphone. In order to fill the p5 canvas to the full screen instead of creating one with certain pixels, I also referred to this example: https://p5js.org/reference/#/p5/windowResized.

Due to my limited sense of aesthetics, I didn’t realize how the colored square is distracting because my main point is to show the traffic symphony. If there’s anything to change if I could redo it, I would definitely redesign the layout of the page. In the future, I would play with the API more to see what it could offer, and extend the project without the limit of traffic. If I could read the land use arrangement (which I think I could), I would find other ways to make sounds.

May 19, 2019

Final Project: Random Net Art | Jonathon Haley with Vincent Wu

If you haven’t seen it already, here’s the link: http://imanas.shanghai.nyu.edu/~jh5231/NetArt/index.html. I recommend opening the project in Firefox as it sometimes acts strange in Chrome (haven’t tested it in Safari)

Our project was intended to be awesome. You can be the judge of whether it lived up to the hype, but either way it was super fun to envision and create.

What we did was largely inspired by theuselessweb.com – our website, like its inspiration, is a diverse collection of short activities, each fulfilling a distinct (although sometimes unclear) purpose. Even the index.html page, commonly used to introduce and explain the project, is nothing but a redirect – it sends you straight away to one of the other pages, chosen at random every time.

But while the Useless Button redirects you to one of a number of unrelated external websites, our project’s various pages are held together by a few underlying themes, the most obvious being that you can go back and forth between pages with ease thanks to the integrated menu, as well as some shared visual themes. Of course, all the pages are also quite different from each other – the payoffs for the bubble wrap and basketball pages (that is, the thing that happens after you’ve done the thing that you’re supposed to do) apparently were quite jarring for some viewers, who thought the payoffs to be out of line with the main interactive focuses of the pages, and the overall “vibe” of the project. Still, as most audience members on the day we presented it concurred, there’s a kind of beauty in the chaos – somehow, the weirdness works.

If there’s one regret Vincent and I have regarding this project (Vincent, by the way, was an excellent partner to work with – truly an unstoppable creative force), it’s that we couldn’t add more pages to our burgeoning collection – quality over quantity for sure, but sometimes you need that quality in bulk. Though we had great ideas, not all our ideas were great ones – some of them we decided not to use. Given more time, we could have bolstered our project with even more weird random pages, but for now you’ll have to be satisfied with four. Funny enough, our original idea was stress relief, but now I think the page that provides the most actual stress relief is our Credits page.

May 19, 2019May 20, 2019

Comm Lab Final Project Reflections – Justin C

Link: https://github.com/320834/Poemsite

Design:

Phase the name of our project is a website that facilitates the creation of interactive poems and short stories. The user can create these poem templates which allows the user to create stories. These templates must have spaces or blanks in which create the interaction for other people. Other users can fill in those blanks to create different stories. Below is the process of creating a template.

Once a template is created, the users can go to the template page to view the created templates. The user can select a template in order to fill out. Below is the design of the template page.

The user selects one of the templates by clicking on one of the moons. This will prompt them to another window in which they can fill out the blanks of the template. Below is an example if a user clicks on the puppy’s template.

The user can choose from randomly generated words to create their stories. At the end, the poem is displayed, and the user can choose to publish it for everyone to see or delete it forever. Below is the result of filling the poem and the poem results appear.

Process:

The creation of this website required for us to go beyond the standard html, css, and javascript format. Instead, in order to keep track of the templates made and the number of uploads, we needed a server to house the entries and templates. Therefore, the framework to we decided on is express and mongodb. Express will serve as a backend server that will handle the http request, while the mongodb will serve as our database for the entries. The plan went according to plan as we were able to successfully implement the server and the database to develop the website. The user can upload their templates to the database and each of the templates can be fetched by other users.

The issue we ran into was the problem of scalability. If thousands of poem templates or entries were created, how would the server handle the requests of fetching thousands of entries and templates. The time and the strain of the requests can be limited by the server. To resolve the issue, we made each poem template under 10 lines in order to limit the data transferred. The second is to use a database to store the templates and entries. Originally, we were going to store the entries and templates on a local file. However, the use of database will lower the cost of writing and finding documents.

The other issue is how to deliver our message of wanting the users to create their stories online without any excessive instructions. We wanted our design to be as intuitive as possible and allow the users to understand on how to use the website. Thus, the design of our website is trying to reflect those goals. The introduction page is the first page the user sees in order to let them know the goal of the website. Then, the user is sent to options page were they can chose to either create a template, fill a template, or look at user generated poems. We hope the design was intuitive enough let the user know of our goal.

Future:

The project is considered a success. We were able to accomplish our goals. If we had more time, we would like to tweak the design more. The design could be better. Some of the elements based in pixels rather than percentages. Furthermore, we would like to add more options regarding the selection of the words. For example, we could implement a theme in which the user can choose a set of words.

May 19, 2019May 19, 2019

Final Project Reflection [Ta-Ruedee Pholpipattanaphong (Ploy)]

link to the project: http://imanas.shanghai.nyu.edu/~zy1193/project4/project4.html

A. Process

Our project is based upon the idea of the different foods in various places within China. Since both me and my partner, Angel, love to travel, we find that one of the big considerations is the food. We feel like food is a big decision factor in where we would like to travel. Furthermore, since I am a foreigner, I am very fascinated by the food China has. For instance, Shanghai food is pretty sweet whilst Sichuan food is very spicy. I am very excited to explore the various flavors and the unique types of food around China. Therefore we decide to explore the foods within China and the interesting facts behind that food. We chose 5 destination which corresponds to their well-known food.

This is our main page: The users are intended to navigate the map to the different places labeled by using the arrow keys on the computer keyboard.

After entering the page, a well-known dish would show up. All the images are hand-drawn by us using Ipad. I drew 4 pictures each for the food so that the images can move around just like an animation. So for instance, the images below changes from 4 sticks to 2 sticks and from a text that slanted to the right to being slanted to the left. Within this page, there would also be the sound of the cooking method. We recorded all the sounds in the dorm. For instance, for this lamb skewer, we used oil and garlic to make that kind of barbeque sound.

Later on, the audience is to press the mouse to enter to the information page. In this page, we first give the basic information about the food and then we went into detail and explores more specifics such as the raw material, cooking method, environment, culture, myths, and etc., with relevance to the food and place.

B. Process

What worked especially well is that our initial plans were clear. We are on the same page and therefore we work well with the images of the outcome and the goals in our minds. We also divided the work out pretty well. Since the coding requires a lot of work, Angel quickly took charge of the codings. Then I did all the drawings. After that, we came together and did all the audios together. Then we divide the research parts up. After Angel created the first main page and one of the model sample page, then based on her codings, I create the last 4 pages. We communicate throughout the process and try to solve all the obstacles together. We also decide everything together. I believe that our teamwork is the strongest benefits of this project.

There is nothing that didn’t work. However, something that we would like to change might be using more of the codes. For instance, we wanted to change them into the next page with a transition of cutting the image into half and then it enters a new page, however, we couldn’t find the code that the computer could manually do. Therefore, we decided to create this process by ourselves, by cutting the image into half and then applying the animations with the code. Since we have 4 images for each of the 5 foods, we ended up spending a lot of time editing the images itself. Throughout the process, we used a lot of trials and errors. Even by cutting the images was hard itself as it needs to be perfect between the two split images so that they fit perfectly together. Therefore, we spent a lot of time creating something that the computer should be able to do easily. This is how we did it:

C. Future

Given more time, I would like to spend more time on the code. Try to incorporate more codes and functions in our pages. I would also like to think deeper behind the ideas that are portrayed (critiques from project presentation). For instance, from the feedback we received in the project presentation, the map is a controversial issue. Therefore, I would want to step away from the political standpoints and change the map into something else. In addition, we received critiques such that maybe we should explore more on the purpose of the color, place, and food. From the background colors that are randomly used, I can think into the purpose behind those colors and use a meaningful color that conveys something. Next, I would want to make the project more appealing and visible by attracting the audience to the text as well. What we could definitely change is that increase the size of the font and the color of the font that are not easy to read. Lastly, I should think about where to put the man because, from the first page, it is not clear that the audience is controlling the man.

I am very proud of this project because we achieved our expectations. However, there are a lot of different aspects where we can implement in the future.