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.