Author: Yumin Cai

Link to the project

Project Title: Grey Net – invisible chaos

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

Design

For this project, I and Daisy try to focus on the topic of the internet itself. And this is basically where the name “Grey Net” comes from. 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. 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. This project is mainly aimed to explore the topic of the “dark side” of the internet in order to raise people’s awareness to think of the safety and morality of this new living area. As a result, we may develop the environment of the internet and related fields in a healthier way. 

On our website, the index page with the hex background represents the internet connection; light to explore the page that indicates the way we explore the internet, where the large dark background of unknow contrast with the small light of known well; the random little squares make up the title, which is a metaphor of the way that data carries the information on the internet —the small squares assembling together implying the fragmental information we get from the internet.

\

The Beginning Page

Then, on the main page, which is designed as an interactive net gallery of cybercrime, cyberbullying and also computer virus happened in the past 6 years. The whole layout and style of this page that looks like information flow is designed to imitate the internet data environment: you could travel along the years to see the information, however, you would not know the truth behind the information until you truly submerge into it. The information of events will not appear until hovering on the particular sphere among the other normal ones also echoes our title – “invisible chaos” – which can only be seen when taking a deeper look into it. And all the information will be further shown on the center big screen in a terminal-look, which just represents the computer screen.

Content Page

Taking into account the feedback we get from the class presentation, we also added some adjustment to our project including giving credits to the source of information, adjusting the instruction position and also removing the 3d model of the spotlights, which is commented as “not fit to the whole design”.

Process

Generally speaking, I am quite fond of what we have in the end, both the color choice and layout design just meet my expectation. We managed to change the texture of some specific spheres, the arrangement of the spheres and also explored the light and camera in p5. I tried my best to add the hover effect such as label and lights to make the interaction clearer without using the exact location detection skill in the 3D environment which is quite complex. Though we were not able to make the shining texture or effect by coding, thanks to Daisy, we still approach this goal through PS to some degree.

At the proposal stage, we initially tend to make a game for this topic. But when starting to build the website, we found that it’s difficult for us to write a game with any other 3D libraries, not mentioning P5, which have even more constraints and limits. As most of the p5 libraries are aimed for 2D while things in 3D are even more complicated than what in 2D. For example, to load images we need to create geometry and attach that image as a texture instead of just locate it somewhere. Besides, to get this object’s location, what we need is three values (x, y, z) instead of two. And so does the mouse interaction, which only workes with libraries like three. js. Though our outcome is quite simple according to the other projects developed in 3D, we’ve tried our best to learn the new knowledge and make the most of the 3D features in p5 by playing a lot with 3D properties including texture, camera, perspective and different types of light. And the “class” also helped us create and modify different elements.

If I had to do it again, I believe I have several points to improve this time. First of all, I would probably spend more time in the beginning research part. Like the feedback we’ve got in the final presentation, information categorizing is what we are lacking in. This reduces the clearness of our topic and illustration.  Besides, If I were given more time, I would try to learn more powerful libraries like three.js and A-frame instead of simply working with p5 to make our project a more interactive and complete 3D experience gallery.

Future

At the time to give the name of this project, both I and Daisy struggled a lot. But fortunately, we really like the name of“the grey net” for this project. As it just looks like another side of the internet instead of a separated object or a simple net gallery.  Like what we have discussed in the beginning, the way to illustrate the negative side of the internet is far from the pure text. Videos, pictures as well as the way that the viewers to interact with the displayed objects, could be a part of this special exhibition. The ultimate goal for us is to impress the viewers in order to raise their awareness, thus, the way of reading that we are utilizing now is far from enough.

In terms of the content display, so far the number of spheres and events is limited and if we have more time we can not only add more cases to it but also use different methods to convey the message, for example, have different options to sort these events, whether in time, or in categories. This comes from the guests suggested during the class, for, example, I can try to categorize the events so that the users can see the type of certain issues(e.g, cyberbullying, data breach) and also the history of it. In addition, data visualization for a specific category can also be added to it to make more meaningful information. 

In terms of design, we can also improve that by adding more features highlighting the current position.  Besides, we also need to make the flowing message balls easier to be figured out their difference, as some of our users saying it’ s hard to recognize each of them. For example, adding different colors to the sphere the user is hovering on so that they can clearly see where they are. 

Generally speaking, I think our project still possess a high potential to grow. The future improvements would be mainly focused on finding a more effective way to communicate with the user in order to achieve our goal of bringing attention and raising consciousness, as well as create a new gallery experience.

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

In this article, Greene introduces the history of internet art to us. By listing many organizations and individual artists, he tries to form up a basic picture of how the art integrated into the medium of internet and the procedure that the expressions of art concept changed since the very beginning of the internet art. 

One interesting perspective about internet art is that this new medium of art creates a stronger connection between art and social and political tensions. For example, the cyberfeminism, which does remind me that the net artwork does provide a chance to a new way of artistic experiment with “internet tools and space” (166). Besides, I’m also curious about how it has happened on the website: if this art is produced partly because of the special medium internet. In addition, like the filmmaker Cheang’s projects on the topics of technology and access in Asia and a website on the life of Brandon for the Guggenheim, which apparently shows that internet art is powerful to create a dialogue around prevalent social, cultural, and even political issues. Though traditional art could also approach this goal, however, none of them could be as interactive and persuasive as this one.

But, internet art does not always mean good. Just like Greene said, “the internet began to take off when the exhausted, commercially exploited art culture had soared in the 80s” (163). There is a concern that the internet would soon be someday be “colonized by mainstream media and the corporate juggernaut” (165). Internet art might end up with the unavoidable fate of commercialization. Besides, from my previous reading related to digital design, people are also questioning the relationship between art and computer. How much does the computer take part in the art creating process? Is that still art or just some generated data from the machine. I think this is still a question we need to think about. Where the balance point between technology and art is, for many of the net art examples do seem to be far different from the art we would feel and understand.