Category: JH Moon

Link: http://imanas.shanghai.nyu.edu/~ys3041/final/index.html
Partner: Laura

Design
The user chooses one emotion and one person who the user wants to give a flower. If the user clicks emotion or person, the bottle in the center will shake, meaning that something is put into the bottle.

And then, the user clicks the bottle. The bottle will go down and pour something into the pot. We do not put anything here because we do not want to use any visual assets to define the emotion and person. We use sound to make the user imagine.

After the sound ends, the pot will generate a blank flower according to him/her choice.

The user can check the language of the flower and its different meaning according to the color. The user can also choose the colors of the flowers. All the flowers are drawn by ourselves, which is based on real flowers. And also we did a lot of researches on the language of flower to make sure that the different meanings of different colors and flower.

Process
For my project, the first part I made was to choose the emotion and people, which are checkboxes. And based on Laura’s audio project, I also used to send a certain value to a function, which is a math thing. According to the total value, the flower would be shown. But since we want the user just choose one emotion and one person, checkbox does not restrict people’s choices. So I changed to use radio box and I decided to use array to control the value. I did a lot of researches online and wrote the code but it did not work. After asking Professor Moon, he pointed out that I used part of jQuery’s coding. And we finally got the right code. This is one of the most successful parts.
I am not quite satisfied with the animation of the box. If the user has clicked one emotion, it cannot work when the user changed to another emotion. Now I use keyframe animation in CSS and I think that it may have a better way to improve it in javascript or in another way.
If we can do our project again, maybe I would not choose a flower and I will keep the concept of filling the color. In our original proposal, we tried to fill the color into the flower. However, since our flowers are not symmetrical graphics, it is hard to draw a flower with p5 directly. So we decided to use images. Hence, maybe I will use another concept which is easy to draw in p5 so that I can fill the color in.

Future
When we were making our project, Professor Moon wanted to use drag, like dragging the emotion into the bottle and dragging the color on the flower so the color can be changed. However, the drag function cannot work. I hope that I can explore further about this part. We got some feedback from our classmates and judge. Ann wanted us to improve layout since she thought that there are still a lot of texture. So we can make the layout more clear and similar. Leon asked us about sending the flower part. In our proposal, we planned that the users can download the screenshot or send the website to the persons they want to send the flower. However, it is too hard to write them based on our website since we did not use p5 so that we should add another library that we have never learned. Leon gave us a great suggestion that we can only add one sentence “take a screenshot”. I hope that we can implement the function of download and send email on the website in the future. 

I worked with Jon on this Net Art Project, and had a extremely fun time with it. I am sad that it is over, but also happy that it happened 🙂

VINCENT AND JON’S AWESOME NET ART PROJECT:

Design:

Our website’s final form is a website that is purely based around what Jon and I found interesting/amusing whilst we worked on the project. You mainly interact with the project through the mouse, playing around and looking for the elements that we’ve included within the website, hidden or not. As of now, there are four actions: bubble-wrap, basketball, British flag, and painting with Bob Ross. The point of the website is to show off both Jon and mine’s personalities, that there is no specific direction a project has to go in, just do something that you find enjoyable. What I had just said was a bit contradicting, but anyways, the point is we hope you found the website itself as enjoyable as Jon and I had.

Process:

The original thought process behind our project was to base it around “de-stressing”, which was what inspired our first action, the bubble-wrap popping. It worked really well in terms of de-stressing, because who doesn’t love popping bubble-wrap. Afterwards, we kind of ignored the entire “de-stress” part, not because we wanted to, but because Jon and I got engaged in discussing basketball, and it inspired us to make it a interactive page on our project. It was until after a couple of hours that we realized, it didn’t really correlate with de-stressing. As ironic as it is, we stressed too much over the de-stressing topic, so we decided to ignore it completely to make sure we had more content. If there was one thing that I would change throughout the entire process, it would be that we didn’t stress too much about the de-stressing, because we brainstormed and prototyped for too long and wasted a lot of time. We could’ve gotten probably one or two more interactive parts, but we had constrained ourselves too much with a specific direction.

What worked well, specifically for this project, was that Jon and I thought of all the ideas just based off of us chatting normally. What didn’t work well was when we didn’t think of ideas based off of us chatting, when we had to focus on the direction of “de-stressing”. We discovered this after the proposal, and implemented it into our final project, making it a masterpiece compared to what we had originally.

Future:

Had we had more time, I think we would’ve made something similar to the “take me to a random useless website”, but instead it would be a “make me do something random”. If we had more than 7 interactive actions, we had planned on making it the exact same format as the useless website button website. I guess in conclusion, we would’ve loved to implement even more interactive actions into our website, and made it more complete as a “random” website, once again contradicting myself.

I will most definitely explore more of these types of ideas in my own work, and I’m sure Jon will too as well. I loved having him as my partner.

Conclusion:

I have no idea whether or not you’ll read all the way down here, but thank you so much for a great class Moon! Although there were a lot of projects we had to deal with, I was always happy whenever we worked on them, and also just the overall atmosphere when working and learning in the class is just superb. I would’ve never thought how relaxed I could be in a classroom. It was an amazing experience, and I really look forward to taking more of your classes next semester/next time.

Thank you again, I hope you get wonderful students next semester and that you continue to be the awesome and perfect professor you are!

Project: Tokio
Partner: Ruby  Instructor: Moon

---

Design:
This is a story-based net art adapted from a novel ‘Tokio’ by Higashino Keigo. It tells a story that Tokio, Takumi’s son, goes on a temporal journey back to 20 years ago and helps his father uncover the truth about his family background. We want to simplify the text but amplify the art (both visual art and animation programming) so we carefully picked out 14 important scenes with its original meaning retained. It is delivered from the first-person perspective — Takumi, Tokio’s father. Every page is presented with a combination of the quote(s) and the image(s).
Below are the screenshots for several pages of the project:

---

Process:

1. Determine the topic and form: 

We worked together on the topic and the form. I always have imagined pictures in my mind when I’m reading a book. ‘Tokio’ is one of my favorite novels. Inspired by both the themes ( time travel, redemption, and circulation) we decided to take the form of storytelling. Since we didn’t really want to make it a comic style. The main idea we finally applied was “abstraction” after we asked Moon for advice. As for the story, we retained the original meanings with minimal details; As for the visual arts, we replaced the concrete objects with abstract sketching.

2. Visual arts:

I was in charge of the visual arts. I made them with my digital panel and Adobe Photoshop. My sketching style was inspired by a series of illustrations we found in ‘Pinterest’. Inspired by Dave, we used color palettes selected from “color-hex”.
Here are 2 examples of abstract Illustrations we found on ‘Pinterest’:



Some of my ideas:
1)The conversation box: I used the irregular shape, the coarse margin and ink marks to make it more like a letter.
2)The amusement park: By organizing the layout and putting the rotating Ferris wheel I would like to enrich the audience’s visual experience.
3)Dialogue: The comparison of the size and angle of their portraits indicated the tone and mood when they walk.

3. Interaction: 

Initially, we planned to use interactions other than clicking the mouse to turn the page. But for some reason, we couldn’t direct to another page by scrolling. If I had to do it all over again I may try a whole HTML page so that scrolling can work. In this case, the potential problem may be how to scroll in a div box considering we have lots of scenes contained.
Some of my ideas behind interactions on every single page:
1) Hover over the envelope: To create a sense of mystery and let the user explore by themselves.
2) Shift between Mom and Dad: By following the mouse position the user can shift the scene anytime.

4. Coding:
We both worked on coding in this project and my charge was p5 animation. With my partner’s help, I also had a better understanding of keyframe function in CSS and addEventListener in Javascript. With Moon’s help, I also learned how to build the local server with the terminal so that I could upload the image to canvas.
Here are some of my ideas behind the animation:
1) Train and running boy: These two pages can echo with each other through two circles: One is shrinking and the other is expanding. By keeping still the main objects but moving the surroundings the scene could be more dynamic.
2) The falling newspaper: I was going to create the floating or bouncing effect but I didn’t make it due to the time limit. But it’s worth a try next time.

5. Other problems:
There are some other problems we came across during the process. For example, it seems difficult to playback the audio throughout all the pages. Also, we found some interactions are not obvious enough during the user testing.

6. Discoveries:
But along the way from proposal to the presentation, I’ve learned three important things about creating a net art:
1) It’s better to perceive the capacity or feasibility before really doing it
2) Always care about users’ experience. Any detail can make a huge difference to users’ experience.
3) Art can be achieved by abstraction/conceptualization.

---

Future:
Taking the criticisms I received into account, I want to make further explorations about better interactions. I want to improve my skills in javascript which I’m not much familiar with yet. I will also try to figure out how to make the audio work. I really appreciate my experience working with my partner and getting inspiration from Moon and Dave. BIG THANKS to them as well as the whole class.

Link: http://imanas.shanghai.nyu.edu/~ys3041/final/index.html

Design:
  Our project is a website that enables the user to generate a unique flower by choosing the emotion and the specific person they want to send to. The first step is to generate a flower based on distinct selections and the second step is to fill the color and read the flower meaning. In the first step, the basic layout is a checkbox at the top of the webpage, involves three emotions: love, thanks, and best wishes; four people: mother, father, friends and my love; and an empty bottle between the two columns. The user can click and select one in each column. The bottle will shake as they click, and by following the instruction, the user can “pour” the ingredients in the flower pot underneath. In the second process, a specific kind of no fill flower will generate in the flowerpot based on the user’s selection. Two buttons will show up on both sides of the website. The user can click on one to choose the color patterns for the flower or click the other to read the flower language and meaning. In the end, users can refresh the page and create a different flower again.

Screenshots for the project:

Process :
    The final version of our project has several adjustments to our initial thoughts. But in the process of finding alternative ways and methods, we learned a lot of new methods and a new way of thinking.

    For the first step of selecting emotion and people, we solved the problem of the limited selection and sending the value to match each type of flower by using the radio checkbox instead of normal checkbox and using the array to get the value. The result of the selection part went well after many times of testing and calculation. I wish we can expand to more choices in future development.

    Also, for the instruction page, we may want to improve more according to the feedbacks. Instead of adding a whole instruction page for 2 to 3 seconds, we can use other ways like the blinking of the instruction text, which will be more simple and clear. This is really inspired by a lot of my classmates’ project design, in which the blinking text is a straightforward way to emphasize the text.

    For the color filling part, after we failed to draw the flower using the p5 curveVertex and Bézier Curves function, we altered the method to draw the whole image in the Illustrator which is the most efficient way at that time considering our time and work limitation. The original versions of the flowers are mostly plain and boring, after some suggestions from the professor and peers, I changed the brushes and intentionally stylize the flowers to make them more vivid. I also added the shadow to the flower and flower pot, which turns out to be a good choice especially when we changed our background to the texture patterns.

    However, since we paint the whole image and change the color thoroughly, we didn’t achieve our initial goal of filling the color on each petal one by one. If we have more time, I think I will explore more functions in p5 drawing and try to draw the pieces to test if we can change the color separately. I also want to explore the more advanced function on the color palette referring to the inspiration website that I found in my proposal. For example, I can add the spot that picks the color and change the mouse feature to present the color filling process.

Future : 

    Overall, we are glad that we present a complete project and we also find many ways to improve our website design and layout. Although we avoid the distracting background in our project, which may mislead the users on the focus and finally choose a more simple texture that can highlight the main object, there is still some inconsistency in the whole webpage, for example, the style of the button can be more simplified instead of repeating the style of flower. The texture could be better designed and align with the entire page style

   We may also want to think about different layout for the webpage so that the whole project could be more creative, unique and interactive. All the peers and professors give great feedbacks which not only provide suggestions on the present project but also point out a lot of directions for us to improve in the future. We appreciate all the help during our work and all the feedback and suggestions. We will definitely do more research, especially on the flower topic, to apply the advice to our website.

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.