Category: Communications Lab

Posted on

Week 14: Final Project – Grey Net – Daisy & Milly

Link: https://imanas.shanghai.nyu.edu/~yc2966/Grey/index.html

Title: The Grey Net – Invisible Chaos

Partner: Milly Cai

Instructor: Moon

Date: May 15, 2019

Concept

As we said in the title, our project called “The Grey Net” aims to explore the topic of the “dark side” of the internet, covering topics like data breach, cyberbullying and also computer virus. The word “Grey” indicates the grey zone on the internet which the laws and regulation in the real world may not be able to cover. This project serves as an awareness-raising project which encourages people to think more about the internet environment. As the internet becomes a significant part in our daily life, we as the netizen should also be aware of the crimes and other negative things happening on the internet instead of just recognizing the good impact brought by the internet.

Process

Final Version:

 

  Basically, the interaction is as shown above: click the title on the first page, then the user will see texts indicating different years. Using arrow up and down and space key they can control the movement of the spheres. By hovering on certain spheres with a special texture and see more information about the event in the middle of the page.

For the intro page, we actually intentional design the layout. The hex indicates the newtork; light to explore the internet that indicates the way we explore the internet (and imply that there are many invisible, hidden things); the random little squares make up the title, which is a metaphor of the way that data carries the information on the internet.

Developing Process

-Research

Before we start, we first did plenty of researches about internet safety issues on the internet, and we mainly sorted them into three topics: data breach (personal information issue), cyberbullying and also computer virus. We leveled the cases by its number of people get influenced or the financial problems it resulted and selected the ten top cases to write a summarized paragraph for each year from 2013 to 2018.  However, in the end, due to our time and labor limitation, we only choose two from ten of each year to show in our project.

 research screenshot

-Coding

In terms of coding, we write it collaboratively and also debug for each other. And also for the intro page, I wrote the part with floating cubes and Milly made the hex part and then we put them together in one js file. We decided to build the visual in 3D after discussing with Moon, which is the point where our struggle started. In this project, we learned basics of 3d in p5 using webGL.

 

At first, we learned to create an array of objects using “class” and also learned the concept of OOP.  We first made the boxes generate automatically and used the mouse position to change the camera view.

 

Later we modified the arrangement of cubes and also add different cube arrays as well as the “screen” where we will present the information.

When it comes to loading images, a problem we met is that we can’t load the file when testing the website and we learned to create the local server to solve the problem.

For the rest of time we spent a lot of effort adjusting the layout design and interaction. We explored with the texture, loading object and also string array, etc. We also adjust the keyboard and mouse control for several times in order to make user-friendly and more intuitive interaction. Instead of just writing the text in p5, I edit the glowing effect in ps and save it as png so that we can have better visual experience for the users.

some of the assets we have

The labels appear according to the different location
code screenshot

Reflection

Many things can be improved if we have more time. 

Firstly the content we show on the page can be categorized so that the user can be clearer about the idea we want to convey which is the topic of negative things happening on the internet. The information can also be more organized. Our initial intention is to build an archive which includes information and links for people to look at (like Wikipedia), but ended up picking two events of each year due to the time limit. If we have time we can try to find out how to show enough information in a more effective way.

In terms of design, we can also improve that by adding more features highlighting the current position. For example, adding different colors to the sphere the user is hovering on so that they can clearly see where they are. 

Taking into account the feedback we get from the class presentation, we also added some adjustment to our project including adding the source of information, adjust the instruction position and also removing the 3d model.

Before:

After:

Source Credit

Songs:

Fading Sun & After you

Cases:

https://www.businessinsider.com/data-hacks-breaches-biggest-of-2018-2018-12#2-marriott-starwood-hotels-500-million-20

https://www.identityforce.com/blog/2018-data-breaches

https://en.wikipedia.org/wiki/Computer_virus

https://zh.wikipedia.org/wiki/%E7%94%B5%E8%84%91%E7%8A%AF%E7%BD%AA

Posted on

FInal Project – Grey Net – Milly Cai & Daisy Chen

Project title: Grey Net – Invisible Chaos

Partner: Daisy Chen

Instructor: Moon

Here is the link to our final project:

https://imanas.shanghai.nyu.edu/~yc2966/Grey/index.html

Description:

For this project, I and Daisy try to focus on the topic of the internet itself. Due to the fast rise of the internet before the regulations are ready in the past few years, the issue of “internet safety” and “internet morality” become increasingly heating to be discussed. Therefore, like what our project is called as the “Grey Net”, we try to use the concept of “grey zone” to indicate the “invisible chaos” and potential threats on the internet. This project is mainly aimed to raise people’s awareness to think of internet safety and morality. As a result, we may develop the environment of the internet and related fields in a healthier way. 

Process: 

Researches

Before we start, we first did plenty of researches about internet safety issues on the internet, and we mainly sorted them into three topics: data breach (personal information issue), cyberbullying and also computer virus. We leveled the cases by its number of people get influenced or the financial problems it resulted and selected the ten top cases to write a summarized paragraph for each year from 2013 to 2018.  However, in the end, due to our time and labor limitation, we only choose two from ten of each year to show in our project.

Researches we did

Concept and Form Changes

At the beginning of our final project proposal, we intended to make a game that let the user play with the harmful issues on the internet. However, along with the progress of our researches and setting up of project, we finally settled down the format of our project as an interactive digital museum. The cases would be “stored” in the floating bubbles and drift by the users, which is imitating the data flow on the internet as well as the process of linking to the internet (surfing the net).  And each time when the user is attempting to approach a bubble, the information is stored (the case) would show up on a “big screen”, which represents for the computer screen. 

Besides, with the suggestion from professor Moon, we decided to use the 3D environment to display this project.

Development

As we are facing a brand new coding field, which is related to the 3D environment and not an easy task for both of us, we collaborate on the coding almost like half and a half for each of us. We tried to learn several 3D-environment libraries, like A-frame, three.js…But eventually, we went back to WebGL on p5.

The biggest problem for us at first is to generate a series of 3D containers, for example, boxes to move from distant location towards the computer screen. To reach this purpose, we need to know the usage of “class”. Thanks for Moon’s help, we sit down and learn from the beginning of WebGL and class to generate the array for hours. This is probably one of the most helpful and interesting things I have learned from this project.

learn how to generate box and the 3D environment in p5 (1)

learn how to generate box and the 3D environment in p5 (2)

Then we keep working on adjusting the angle of view, also I added the gentle rotation of it to make the floating object more elegant. During this stage, we use the x position of the mouse to control the angle of view and mouse click to move forward, but soon we discard it for it’s in comfortable and not able to come back. 

Change the rotation angle and number of boxes

Change the  angle of the camera view

Later on, we settled down the location of the screen plane and years,  also did experiments with the lights and textures.

Experimented with light  & added the year planes

Experimented with texture

The version presented in class

As for the version we presented in class, it’s almost the final one that could interact with the viewers by key up to go forward and key down for backward; space for pause and mouse hover for content explore. We did most of the textures in PS by ourselves that have a shining effect. As it is difficult to get the exact location of an object in the 3D environment, I tried to get the current year’s Z position and then detect the x, y position of the mouse to create the hover effect that shows the labels of the bubble as well as changing to the corresponding content on the center screen.

From the user test in class presentation and the feedback, we got many helpful suggestions from professor Ann and Leon as well as other students:

1. Discard the spotlight models which are not consistent with the general style. 

2. Adjust the location of the instruction that is overlapped with the content screen. 

3. Add the source credits.

4. Probably need to change the texture of bubbles to make it more clear to see.

…

Final Version

Therefore, from the suggestions mentioned above, we adjusted the design and get the final version as following:

Index page:

Hex background represents the internet connection; light to explore the internet that indicates the way we explore the internet; the random little squares make up the title, which is a metaphor of the way that data carries the information on the internet.

index page

After the adjustment, we deleted the two spotlight models and put the instruction on the left top corner. Also, we add the name and sources credits on the right top corner for this page.

content page
Coding record

Overview of all js files

Overview of all files

Overview of all textures & loading

Learn to use the class to create cubes

 

The screen changes content according to the different location of the current year

The labels appear according to the different location

Problems Met & New THings learned 
  1. local server: as p5 libraries require the API, it needs to create a local server to run the page. Thanks for Cindy’s help, we installed Python and find the way to create it in Windows.

 

2. Basics of WebGL: it’s my first time to encounter with the 3D environment on the web. Though suffered when learning the new thing, it’s really interesting to explore this new area.

3. Usage of class: it’s extremely useful to learn how to use the class to create pre-formatted objects and store them in the array.

Further Improvement

Like the feedbacks and suggestions we got in the in-class presentation, we’d like to add more cases we found to the bubbles to make this project become more strong and persuasive. Besides, the design of light and textures of bubbles also need to be improved to be easier to recognize.  And probably some hints for movement instructions instead of pure text would be better Also, the hover effect, if we could truly detect the position of each bubble, then the hover effect could be more interactive and accurate. 

Anyway, I really appreciate the process of working on this project, thanks to my partner Daisy and professor Moon, we finally come out with this lovely outcome. I really love it!

Sources Credit

Songs:

Fading Sun & After you

Cases:

https://www.businessinsider.com/data-hacks-breaches-biggest-of-2018-2018-12#2-marriott-starwood-hotels-500-million-20

https://www.identityforce.com/blog/2018-data-breaches

https://en.wikipedia.org/wiki/Computer_virus

https://zh.wikipedia.org/wiki/%E7%94%B5%E8%84%91%E7%8A%AF%E7%BD%AA

Posted on

Final Project Reflection: The Wanted by Jamie & Clover – Jamie (Ziying Wang)

Our internet art project: The Wanted is a fictional detective game based on a catastrophe happened in real life. The user is a detective who has been after a criminal for almost ten years, through analyzing past crimes, she suspected that the criminal is going to commit something big soon, despite the police department plans to officially close the case in three days due to the large amount of money and effort wasted on this criminal over the past 10 years, the detective decides to look into the case for one last time and try to take the criminal into custody. The user, as the detective, will submit an information form with the information of the upcoming possible crime he/she deduced from the previous profiles, the results will decide whether the user has performed the right deduction.

Clover and I went through lots of iterations when constructing this project. We started off with Clover drawing four images for background story and I making an image for the timeline page with photoshop. We designed the timeline according to the vague schedule we listed before starting, which includes 10 years (2009-2018) and two of which don’t have crimes, the rest is a crime per year.

Then as we design our cases, a hint we wanted to offer is that the crimes happen in geographic order on the European map, therefore I appended clickable map of Europe on the timeline page.

As the user is required to fill out a form as the final evaluation for the performance, we designed clickable items on the timeline page, one of which leads to the submission page and the other is a screenshot of the sample form.

Originally, the user clicks open different documents and goes back to the timeline to check out others, then we realized that the limitation doesn’t work when the user can click open all windows and has unlimited deduction time. Therefore, I coded the page open time as 20 seconds, when the time is up, the window closes itself. After every eight profiles the user checks, there is audio informing it’s the sleeping hour comes out, indicating that a day has passed. After 24 times checking the profiles, the timeline page will automatically direct the user to the submission form page, where the user has to fill in their deduction result for the upcoming crime.

The evaluation of the results leads to three endings, one of them is the good ending, where the user successfully stopped the crime from happening and took the criminal into custody. The rests are both bad endings, one is the case that the user gets the right time but the wrong location, the ending is that the user arrives at the place in search of the criminal but instead sees the news of the catastrophe happening in another place; if the user gets the time wrong, the ending is only the news on the catastrophe.

Given more time, there would definitely be things I want to improve. One of which is the submission page. Theoretically, according to my current code, the user can open multiple submission pages and try unlimited times, I haven’t come up with a better solution for this because I want to give the user time to think and not set time limit for their submission. Another is that the crimes should be perfected, right now they are too deliberate, and look like something purposely designed so that the user can figure out the hints. The storyline is something I definitely want to put more effort into. After presenting it to the class, we learned that we should have changed our cursor into a pointer when it hovers onto clickable elements so that the user will be clearer about what to click on.

Posted on

Internet Art: The Perfect Human – Sebastian Lau (Chen)

http://imanas.shanghai.nyu.edu/~shl620/perfecthuman/

Description:

What is the perfect human? Who gets to decide what is perfect? Winny and I recreated the short film “The Perfect Human” by Jørgen Leth. We aimed to recreate it in the context of an NYU Shanghai student. By doing so we wanted to first show our own idea of a perfect human and then dispel the notion that there is a perfect human. We also wanted the user to see themselves as the perfect human. I tried to do this by having the website directly refer to the user as the perfect human. I hoped that by having the users think of themselves as the perfect human it would get the user to ponder what makes them perfect, and ultimately come to the conclusion that either they are indeed the perfect human or the perfect doesn’t exist (or is “flawed”). Our recreation highlights how the perfect human (or student in our case) can still be flawed. 

Visuals/Style:

The website is intentionally plain. “The Perfect Human” is quite bare, the room is empty, and only the objects that are needed are present. I wanted to emulate both the visual and narrative style of the film. The original film was black and white (most likely due to technological limitations at the time), but I still wanted to copy the color scheme. The text comes in very short phrases as I felt like it was the same as the narrative style of the film. Furthermore, after Ann gave feedback on what kind of text we should have, I felt like it might be best if our text felt more like an extension of the art piece rather than a continuously scrolling article. I had the background slowly change from black to white as you progress from Jørgen’s films to our work. I used this to signal to the user that they were switching to a different part of the website as well as have the tone shift to something more light. I added a down arrow to the first part of the website (which disappears when you scroll) as testers had mentioned the instructions were a bit obscure (they didn’t realize the text was meant to refer to them. 

In terms of video design, I think our videos were decently well shot. In addition, I feel like our style is very close to the original film. We incorporate the close-ups from both films as well as some quick cuts from “The Five Obstructions”.  While the humans in “The Perfect Human” and “The Five Obstructions” are relatively indistinct, our humans intentionally have more personality to better personify (in our eyes) a perfect human. 

Code:

I feel like the code isn’t very notable. I had a bit of difficulty with the scrolling to change the videos at a certain point because it kept flickering, but I was able to fix it. I also had a bit of trouble where the videos didn’t change when they were supposed to, but I realized it was because they were in the wrong place for if and else if statements. I added some other functionalities like hovering over buttons to change it (making it clearer that it was a button). I also made it so that clicking on the video would play or pause it rather than having to show controls or press something else. I did this to make the website as minimalistic as possible. In addition, I don’t think I needed any more functionalities other than the play/pause button (although for the longer videos a timeline would probably be very helpful, especially for people who have not seen the video yet). Other coding included changing the opacity of buttons when other buttons were pressed so that we could force the user to go through the videos in the order we wanted them to go through them. 

Teamwork:

Winny and I divided the work pretty evenly. She did most of the video stuff, like recording and editing. I worked on parts of the narration and the text for the website as well as the coding. We did come to some disagreements regarding how we wanted the website to be styled, but in the end, we were able to come to an agreement. Overall though I think the project went smoothly since we both wanted to recreate “The Perfect Human”.  

Reflections:

While this project wasn’t the most coding intensive, I feel like I had more control over the art style and direction in comparison to the previous projects. I feel like this project somehow had more “substance” to it compared to my past projects. I think this was because I paired up with Winny who wanted to do something similar to my idea. In comparison to all of the other projects where we would be given groups and then decide what we wanted to do. While I do enjoy working with Winny and think she is a great teammate, I think I’d like to try working on my own website by myself after this semester when there are no deadlines. 

Posted on

Week 14: Final Internet Art Project – Allie Dunnaville

Link: http://imanas.shanghai.nyu.edu/~op531/internet-art/title.html

For our final project, Oona and I decided to create something which reminded both of us of our childhoods. An idea that immediately starting sparking ideas for both of us was collages. I found my love for collage when I was in elementary school. After school, I would often go home and cut up newspapers and magazines then paste them inside a scrapbook. As I got older, my collages became more sophisticated, and I actually used canvases as material instead of scrapbooks.

Our overall idea is combined with our love for collaging as well as the Melissa and Doug Dress up board game. The idea with the board game is that you are given different props, and you use those props to dress up a figure. With these two ideas combined, we further developed our concept by creating our “dream room.” Basically, our goal was to collage/design a room that we both wanted as kids. We included items such as a waterbed, egg chair, television, my dog, Oona’s cat, and many others! Users can interact with the room by clicking on different elements within the room and read hand-written notes from Oona, and I that explain why those specific items appear in our “dream room.” There are also pictures included beside the letters which are either about where the idea originated from (such as the waterbed gif, that is from the Goofy movie), or real pictures (such as my dog and I).

For the project, I spent a lot of my time finding images online for the room, writing the notes and converting them into PNGs, as well as designing several elements on my computer such as the backdrop, and also the poster-board/collage board. I primarily used photoshop and Keynote to develop these two components. The most challenging aspect for me in designing the backdrop was when making the depth of the room. I ended up having to use different shapes and lines in Keynote to create the proper dimensions needed to make the room three-dimensional. Because I’ve haven’t learned how to use programs to create 3D elements, I ended up having to eye everything myself, and it took longer than needed probably.

While making the PNGs of the letters and some of the drawings, Oona informed me of an app called Superimpose. It allowed me to convert images into PNGs much quicker than using photoshop, which is what I’ve done in the past.

Some additional feedback we received was regarding the layout and design. After briefly talking with Professor Moon, he suggested we added paper in the background or some type of collage. We were able to implement both of these concepts in our final presentation of the project!

Overall. I am super proud of how this project turned out, especially with the limited time constraints and the rest of the major projects we had due for Finals week. Our goal was to have this project simulate our childhoods as much as possible and have a general collaged 2000s theme throughout, and I think we definitely accomplished this. After receiving feedback from my classmates and judges today, some future improvements would be adding sound effects, making objects animated when you hover over them, and also considering adding a conversation between Oona and me at the home page, which would emulate the discussion we had when brainstorming the project idea. Thanks!