Category: Communications Lab

Posted on

Final Project Reflection – Data Points – Hannah Kasak

http://imanas.shanghai.nyu.edu/~hkg245/week01/Final%20Project/

Design: As someone passionate about public health, I felt that internet art would lend itself in exciting ways to make global health issues better understood. Our attention to a disease is often not proportional to the danger it actually poses.  In response to this I represented the loss of life by specific illnesses by the appearance of differently colored polka dots. Each ailment will be represented as a different color, and the dots appear at the rate the disease claims lives. For example, every 3.35 seconds (or 201 frames) someone dies of ischemic heart disease, so every 3.34 seconds a new dot appears. The dots accumulate to illustrate the scale of each illness’s impact.

My project is partially inspired by Yayoi Kusama’s use of polka dots in many of her works, as each dot is both aesthetically and symbolically significant. In the context of my project, each dot will represent a data point, which is also a human life. I hope that by visualizing the quantity of dots (lives) over time, the users will be influenced to think more deeply about the global health issues we face.

To provide the user with more information, my project includes a key at the bottom of the window that classifies which colored dots correspond to which disease. When the user hovers over the key elements, they can read more about the specific condition. A clock in the top right of the page also allows the user to related the number of dots they see on the screen to the amount of time elapsed. 

Process: My biggest concern in making my project was making the timing accurate to represent the data. While I was initially unsure where to start, this aspect turned out to be quite simple once I procured the data and calculated the correct frame rate at which to make each point appear. 

I ended up spending the most time adjusting the visual aspect of my project. I found there to be tensions between aesthetics and readability. I wanted the meaning and information of my project to be clear so that the educational aspect would be effective, however I also didn’t want to the interface to look so casual that the subject matter would be take lightly. I spent a surprising amount of time changing the colors of the data points so that the interface would not look too cheerful, however this in retrospect made the colors difficult to identify. I also realized that the fastest appearing dot is the white “other” dot. Even though I included data from the top 12 causes of death, the sum of deaths by all other causes is still larger than any of the individual top 12. To the user however, the project is less meaningful when the largest quantity of dots have only general information available. Though it would be beyond the scope of this project and the data that was readily available to me, it would exciting to map the top 100 causes of death to provide more detail for the user. 

In creating the pop-ups to provide information for the diseases in the key, I also found it hard to decide which information to include. Depending on the disease I would describe risk factors, reasons it is particularly dangerous, and comments about who it effects most, if relevant. I think in the future I would do deeper research into each particular disease and add a link to an entire page about the disease rather than just the pop-up.

Future:  Admittedly, my project was somewhat limited by my amateur-ness at coding. Right now the project provides insight and comparisons between diseases, but not between world regions or income levels. While I feel I accomplished my initial goal, I think the project requires itself to be expanded upon in the future so as to encompass more data and better represent the inequality that lies behind the distribution of burden of disease. I would like to add a sequence of pages in which the data of low income, lower middle income, higher middle income, and high income countries are represented. This way the user would also see a large disparity in the types of disease and the death rates across income level.  I would also take into account the stylistic and conceptual recommendations I was given. To improve the view-ability, my classmates suggested that I make the key appear as a side panel and ensure that data points are contained to particular coordinates. The colors I chose, because I intended to preserve a more solemn appearance with muted tones, were difficult to distinguish from one another, making the data more difficult to interpret. As Professor Moon also pointed out, the polka dots are a missed opportunity for a more creative expression of life and death. Designs that fall and then rise as stars, for example, would create a deeper narrative while still illustrating the data. 

Posted on

Final Project Reflection–Steve Sun

Communications lab final reflection

       Our project’s idea was generated from the Seven Deadly Sins. However, we weren’t trying to depict the seven sins as they originall  y were, instead, we tried to find them in the daily life of human, and depict them as a sinful joy that people may be addicted to, or the small problems that everyone would encounter. The whole project consists of one home page, seven pages for seven sins, and an about page which describes the idea of the project.

On each page of a sin, there is a small “incident” that the user needs to trigger using simple interactive moves like clicking or hovering or pressing keys. And through these incidents, we depict the seven sins in a comic, entertaining way but without losing the facticity of them happening in our life. For example, in the page of wrath, we have a picture of a mosquito that changes position to a random place whenever you hover on it, while playing the annoying buzzing sound that it makes; basically it’s a mosquito that keeps buzzing around your ears and that you could never kill. This can really be very annoying in real life so I interpret is as the sin of wrath in modern people’s lives. The rest of the pages are similar.

              To be honest many things that we initially brainstormed was too ambitious for us. Like too many elements or ‘interactive’s on one page or like making each sin a individual game or so. And there is quite a few things that I want to change if I were to do it again. For example, in the page of envy, I don’t think I interpreted the concept of “a person envies the fun of the others because he was excluded from them” so well and I might think this over and make other interpretations or simply make the page easier to understand; by probably using cartoon figures of people rather than the red, ghosty figure and the mouths and eyes on the other side. And same for the page of lust. I feel like the interactive, which is simply scrolling, is a little bit too simple on this page, however, simply by photoshopping a really long picture to active the interactive on the page and thus reduced out workload, worked pretty well. Another thing that I think worked well is the p5 animations of the home page. I think making the seven shaky little circles clickable and have a name each was really cool and funny. I really liked my homepage.

       If I had more time, I would definitely at least add a description of each sin which you can access on each page; and give more instruction of how to navigate through the websites somewhere on the pages. And also I would consider making the style (like the coloring, the backgrounds and the drawing styles) of each page more coherent, as what was mentioned in the critics. But furthermore, I would think of making the seven sins actually games that motives the player to commit those sins—which is to convey our point that the sins are in everyone’s lives more clearly.

For example, we can make the Pac-Man game of gluttony harder and add some conditions under which you could either eat all junk food and become happy, or stress out because you don’t do stress eating. And also, of course, add more navigation buttons in those pages. So that the project feels like a whole rather than several different pages. And that may help on the coherency of the styles as well.

Posted on

Final Project: The Perfect Student – Sebastian Lau (Chen)

Design:

Our project is meant to dispel the notion that there is a perfect human. We made this project not only as an imitation of Jørgen Leth’s “The Perfect Human” and “The Five Obstructions”, but as a response to it. 

We have a video of “The Perfect Human” to give our users an idea of what we were trying to emulate. In addition, we referred to the user as the perfect human so that they would be more interested in seeing what the videos (and what we) considered to be perfect. 

We also added “The Five Obstructions” since we thought that it was vital to our thought process when we were considering how we should edit our own videos. I wanted the website design to be quite minimal both in terms of what was on the page and even the color scheme as I felt like it would fit “The Perfect Human” better.

These are our three actors for our videos. We had an athlete, a professional and an environmentalist. We picked these attributes as felt like they represented traits that would be considered admirable in students. Users could click on these pictures to show individual videos shot in the same way as “The Five Obstructions”. 

At the end of our website, we had “The Real Human” to show that people do make mistakes and that’s what makes us human. We used blooper footage to represent this as we felt like they were lighthearted mistakes that show that we aren’t perfect and in fact, these imperfections are something to be celebrated or enjoyed rather than disliked. One might also see that the background color has changed since the first part of the website. I added that to a) signal to the user when we were switching from Jørgen Leth’s films to our own and b) claim that our interpretation of what a person should be is more “pure” or “innocent”.

We used Chinese instruments in our audio to reflect the setting of our videos (NYU Shanghai) rather than pulling directly from the soundtrack of the films. 

Process:

Based on the feedback I think our message was received well and clearly enough for us to get our point across. While we didn’t originally intend for it to be funny, I don’t see our audience’s unexpected reception of the videos as a sign of failure. I think the look of the website was somewhat successful. Some people mentioned they liked the color scheme, but at the same time, the website was too minimalistic or unclear. I would probably just add more indicators next time, similar to the downward arrow I had in the beginning. In addition, I wanted to add some text over the individual photos when users hovered over them (like “The Athlete”, “The Professional”, “The Environmentalist”, etc.) but I didn’t have time. Some things I discovered was how difficult it could be to coordinate artistic styles even in a pair. When Winny and I were filming, I feel like the way I recorded was different than how Winny did, and she had to edit my footage to make it fit the established theme better. I also discovered how important it was to stick to either using “px” or “%” for my arrangements as I think it led to buttons being in the wrong place compared to the pictures. 

Future:

I think in the future I would obviously fix all of the stuff I know we did wrong already. In terms of new additions, I would have liked to try out different music tracks because we had the same music track for every video and it became a bit repetitive. Furthermore, I would have liked to try out different editing styles, like rapid cuts featured in “The Five Obstructions” Cuba video. Originally, before teaming up with Winny, I wanted to recreate the Leth’s films using films like some of the Avengers movies or Alien. While I am not too sure whether this would have as much of an impact on the user, it is something that I thought would be fun just as a little project that showed how movies often display their protagonists as perfect, or at the very least, extremely admirable people. More specifically for the Alien one, I think it might have been interesting to use footage that showed the Xenomorph as they are meant to be quite literally the perfect organism.

Posted on

Final Project Reflection by Jialu

A. Design

The inspiration of our project comes from the seven deadly sins. In our project, we try to depict how the seven deadly sins are shown in our every-day life.

The home page is made up of seven circles moving randomly on the page. Each circle represents one sin and can link to the corresponding page.

For gluttony, we use the concept of “stress eating”, which is a common phenomenon that the more stress we have the more we eat and the more we eat the happier we get. In this section, player can control the mouth on the screen using “left” and “right” button on the keyboard. The mouth will then eat the food on the screen.

For lust, we use the concept of “single dog (单身狗)” which is used to say someone who is single and longing for love. On the page, there are many couples and among them, there is a single man who looks quite unhappy. The player can drag the long picture either using their mouse or the “left” and “right” button on the keyboard.

For greed, we made a shopping page where if the user check one box all the boxes will be checked. And when they click “Buy”, there will be alert popping out saying “Out of Balance”. This shows the phenomenon that people who are into online shopping couldn’t resist the desire to buy more even if they may not have that much money.

For envy, we use the saying “green with envy”. There is a crowd at the left of the page and a lonely man at the right of the page. Each time the user hover their mouse on the crowd, there will be sounds of people chatting and laughing and the man on the right will shrink a little. We want to show the phenomenon that someone who is shy and afraid of socializing may sometimes envy those who can fit in.

For pride, we use the phenomenon that people like to photoshop their selfies before putting them on the social media in order to leave a good impression on others. When the user moves their mouse from the left side of the page to the right, the picture on the page will change from “before ps” to “after ps”.

For sloth, we use the idea that people having trouble waking up in the morning. This page is kind of like a comic where people can go to the next page by clicking on the webpage.

For wrath, we made a mosquito which flies to a random place on the page as soon as the user hover their mouse on it. There is also the annoying sound of the mosquito which only stops when the user manages to “kill” the mosquito by clicking on it.

B. Process

I think “the seven deadly sins” is a very interesting theme and we can explore a lot based on this idea. We did great in working as a team—we came up with the idea of our project together. And after we set out to doing our project, Steve was in charge of coding using P5 and I drew all the assets and helped Steve with some simple coding as well. However, we were a little over ambitious. We underestimated the time needed to finish a project that is composed of seven mini projects. Therefore, we had to simplify our ideas when we realized that we were running out of time. I think it will be better if we had made a plan before start doing the project. We should plan at what time which part of our project should be down ahead of time.

C. Future

If we were given more time, we can make each part of our project more like a little game. For example, for gluttony, we can add more food and also many add a “stress bar” which decreases as the mouth eats more food on the screen; and for sloth, we can make the format of the page less liner and make it more interactive. Also, we need to think more deeply about the meaning of our project. Whether or not we are using the most proper way to depict the seven deadly sins in modern society? Is there any better way to show the seven deadly sins? These questions are the foundation of our whole project.

Posted on

Week 15: Final Project Reflection – Chloe Chan

Project: Where do we go in our dreams? 

Design: 

My project definitely came a long way from my initial idea, but I definitely feel like the decisions that I made throughout the process was essential to its success.

The final project allowed users to explore two different dreams by scrolling up and down. I was hoping to express to the user how I felt that a certain dream would manifest. Each scrolled direction included three subsections where the user would scroll through. Each subsection included it’s own little ‘storyline’ as well as floating elements that moved with the scroll. The video below demonstrates the way that my Net Art Project functioned. 

Net Art Project Demo

Process: 

I began my project by trying to expand the canvas size and to allow the user to start scrolling from the centre of the screen instead of the top left corner. I think that I spent a lot of good time that could’ve been used elsewhere on trying to set up my canvas in the first place.  After unsuccessfully trying to use p5 to expand my canvas, and to use javascript to try to land the user in the middle of the page, I turned to my professor for help, and he quickly solved the issue. With this code: 

After successfully leading the user into the middle of the page, I had gotten to work trying to split up the canvas in four directions and then splitting up these sections into three sub-sections. I did that in JS: 

Initially, I had wanted the user to be able to scroll in all four directions in order to explore four different dreams instead of two. However, due to the time crunch, I was unable to execute four different ways of scrolling and try to figure out a way to stop the user from scrolling horizontally when the user was scrolling vertically (and vice versa), and therefore made a decision to cut my project workload in half by only allowing the user to scroll in two directions. 

After I implemented these different subsections, I colour-coded them using CSS in order to see the different sub-sections clearly. Then I began to implement the background image for each of the sections which I did in HTML. 

After implementing the background image, based on the trajectory of the dream that I wanted to convey, I got a better idea of how my website was going to unfold, and I began to collect images that would be later on be implemented as floating elements in my NetArt project. After finding all the images, I had to put all of them through photoshop to isolate the image from its background so that I could implement them into my website. 

Initially, I had imagined that my elements would load randomly based on how the user refreshed the button, however after achieving that, I just felt that my website looked extremely unfinished and unpolished. I then looked back at my inspiration to think of another way to execute my project. I had originally hoped to achieve the scrolling effect that Joe Hamilton (http://indirect.flights/) was able to achieve in his NetArt Project, however, I thought that this concept would be too complex. After consulting my professor a second time, I learnt that this could be achieved with the mapping function in p5. Afterwards, I was able to map the direction that each element moved depending on the section that the user scrolled past. This eliminated a very messy looking project, and allowed me to hide any flaws that I had with my photoshop! 

This is how I loaded each image onto the website (JS): 

And this is how I achieved the parallax effect (p5): 

I think the biggest discovery that I made from my proposal to my execution was that some of my ideas were pretty ambitious for the time frame that we were given, and there were a lot of things that I had hoped to do that I didn’t. 

Future:

I think that in the future I would build on some of the feedback that I was given during my presentation first. I would probably rethink my cursor, and try to maximize its representation within my project instead of just using a stick man. I would also try to expand the project in more directions so that the user could explore more dreams. Lastly, I really wanted to add interpretations of dreams by psychological professionals, which I feel like would really add to the project. I would definitely also try to clean up my project even more so that it was much more refined, I would also make the page more responsive and add more elements within each sub-section so that there was a lot more that the user could interact with. I really appreciated Dave’s suggestion to allow the user to return to the home screen by quickly passing through all of the elements instead of transporting, I think that if I were to expand on this project in the future, that would definitely be something that I’d like to implement.