Author: Qianyi Chen

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.

-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.

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

Project Concept

Through this net art project, we want to share our critical reflection about the internet environment with our audience, including metaphors of issues like cyberbullying and the role of netizen in this digital era. When thinking of the project idea, we went through the readings of this semester and we found that many of them are related to the internet as a medium and our interaction with this medium. For example, Tim Berners Lee’s “Long Live the Web” provoked me to consider the internet as another form of society, and McLuhan’s “The Medium is the Message” inspired me to look at the uniqueness of the internet as a new form of medium, for example, in terms of how information is spread on this internet. And the biggest takeaway from this semester is many new dimensions to perceive the internet. Therefore, the general idea of our final project is to create an epitome of the internet and the role of us as the netizen. Specifically, we want to guide our audience through some big issues happened on the Internet (e.g. examples of serious cyberbullying happened in recent years) and provoke their thoughts when interacting with the webpage. The main task of the player is to “save” the character from being hurt by the barriers which stand for the dark side of the internet. To achieve this goal the user need to keep talking to the microphone when the barrier which indicates the cybercrime appear. This is a metaphor of the situation that we should speak out instead of keeping silence when seeing something bad happens on the internet. By making the main character floating we also want to imply the status of people on the internet – anonymous and more free. We’ll articulate more details of the interaction in the production part.

Inspiration

In terms of the method to express the content of our project which is cyberbullying, we got inspiration from two projects. In a serial project called The Bullying Project Mural, we found several artists including Giulia Gandini, Joseph Blank, Bailey Graham, Taniesha Parker, Cris Shamrock using different medium including photography and video to express how people react to different bullying phenomenon.

In another project called Antisocial, digital artist Mike Campau uses his artistic talents to cleverly comment on the dark side of social media. Set in eerily isolated locations, each photograph features a single illuminated sign. Though similar to those found outside of gas stations or Googie motels, these marquees ironically advertise a different kind of service: social media websites. Describing Facebook as “the place to go and make everyone think your life is great” and summing up Instagram as a series of attention-seeking exclamations, the revealing signs showcase the underlying antisocial nature of everyone’s favorite social media. This project inspired us in the way it captures a certain feature of the popular social media platform and summarizes it in short sentence. The neon style of the sign design also inspired us to consider to use a cyberpunk style for the website design as a way to depict the internet environment which gives us a sense of technical and mysterious.

As for the interaction, we are inspired by a game called Don’t stop! eighth note (休むな！８分音符ちゃん♪ )  by YASUHATI (also called Freedom-crow). This game takes players’ voice volume and pitch as the input values to control the eight note, who is the character in this game to make movements and get through the barriers. This just inspired us about the input of our project, which is discussing the message on the new media. Thus, we would also like to take the player’s voice as an input to interact with the process of receiving and contributing the messages.

Production

For this project, we would like to create a virtual trip rather than merely a game that invites the viewers quickly travel through the past few years internet culture flows. Therefore, pre-research is absolutely necessary; besides, we also plan to utilize both audio and video assets to enhance the interactivity and user experience. In this trip, some messages would be presented in an absurd, messed-up and twisting style on the way you passed while others may appear in the huge background screen as broken pieces as modern information is mostly in pieces and incomplete. This is probably similar to what things look like in the rabbit hole in Alice in Wonderland. Besides we try to form up the sense of space and time. On the one hand, we play with the volume of audio assets to achieve the space feeling. For example, as the cyberbullying word approaching, the sound record of it would become louder and louder. And so do the other elements in this flow. On the other hand, the background, as well as the front elements, would change its content as long as the time changes to show the difference between years. In addition, as the players would use voice to control the balloon to “eat” messages around and fly higher to avoid being hurt by the bullying words/actions, the volume and time of voice would affect the number and speed the balloon takes in. And for the flow’s movements (such as waving), we will try to solve this technical issue mainly in javascript.

Greene guides us through the history of internet art in his article. By introducing several organizations and artists, I can get a rough image of how the art is flourished in the medium of internet and how different artistic ideas are expressed at the very beginning of the internet era.

One interesting perspective is to put the development of the internet in the context of the development of different mediums. As Greene said, it is when “the exhausted, commercially exploited art culture had soared in the 80s” that the internet began to take off (163). And later, in the world of internet art, there was a growing concern that “the internet would soon be colonized by mainstream media and the corporate juggernaut” (165). Looking at the 1980s, the appearance of the internet seems to offer a way to escape from the previous art culture and refresh the art world. But when taking into account what happened in the following decades, it seems that internet art may also fall in the inevitable fate of “traditional art” being commercialized and controlled.

Going back to the content carried by the medium of the internet, the net artwork does provide a chance to experiment with internet tools and space. I’m impressed to read the example of cyberfeminism and I’m also curious about the reason why it has happened on the website. Is it related to the uniqueness of the medium (internet)? Or is it because of their assumptions of the internet as the place where gender equality is highly facilitated or the opposite?

With the development of technology, net art is also experiencing rapid evolution. In two decades we can see tremendous changes happening on the net artworks, at least from my perspective. Though so far I only know limited net artwork, I can feel that now the technique enables more interactions between the web and the audience and between different art forms, for example, introducing video, audio, and game to the interaction on the web.

Link: http://indirect.flights/

Indirect Flights, 2015, By Joe Hamilton

The net art I found is called Indirect Flights made by Joe Hamilton. The website, in Hamilton’s own word, is “a sprawling landscape of layered images”. The images he used for the website are taken during his travel to different places including Europe, the Middle East, and Asia and also some online images. He rendered the images in a google map style and displayed different layers of images in an interactive way. Raw materials, satellite images, organic textures, brush strokes and architectural fragments are all blended together into a dense panorama extending in all directions. 

As the user scrolls to different directions, he/she will see different landscapes collage on the webpage. The artist blurs the boundary of different landscape and mixes together deserts, seas and the forests. The perspective he chooses is also interesting. Using an aerial view, he creates the feeling of watching these landscapes from the sky or the satellite view, which echoes the name of this project-indirect flight. It gives you a sense of sightseeing during the flight and drives you through the flight experience though you are not directly experiencing it. Meanwhile, he chooses photos of fence, windows, walls to enhance the feeling of “distance”. While he is trying to navigate the user to get closer to the landscape, he is also pushing them away by using the fences and windows as an interruption.

 

I like this net art project not only because it creates an interesting way of photo collage but also because it creates a space for photos to communicate and generate new meaning. The usage of brushes and photos also forms a contrast between the realistic object and abstract creation (like painting), a contrast of reality and imaginary. The artist also takes advantage of the feature of the website (or the internet) as a medium to convey the message. Instead of simply showcasing the artwork, the website allows the user to interact with different photos and creates more possibilities for the collage of photos.