Author: Yi Shan

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. 

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

Partner: Laura

Description:

The user chooses one emotion and one person who the user wants to give a flower.  And then, the pot will generate a flower according to him/her choice. The users can choose the colors of the flowers.

Process:

After we confirm our project, I started doing it with research first. I found a lot of articles about flower language. And finally I chose one, which is credited below. And I read them and chose some flowers which have different meanings with different colors. I summarized the three most common emotions and four persons. Finally, we had five flowers to match the different choices.

Then, I found different types of paintings about the five flowers we choose. In our original plan, the users can choose the color and fill it in the different petals. However, since our flowers are not symmetric, we had to draw them in p5 by vertexshape() or curveshape(). While it is really time-consuming and the flowers we draw by p5 is really weird, we decided to draw the flowers in Ai by ourselves and load images into the website. Laura drew all the flowers and filled in colors. At first, we still wanted to keep the concept of filling color, while it is hard to do this with images–we did not have an efficient way to put the images of petal related with each other. So at last, we just designed to click the button and changed the whole images.

I am responsible for most of the coding in this project. Laura is responsible for the visual asset and helps me to code. There are some interesting and important coding I want to mention.

For choosing the elements and persons, I used checkbox first. Since we wanted to limit users to just choose one emotion and one person, Professor Moon told me I could use radio box. When I used checkbox, I used clickcounts and sent value to the function which generates flowers, doing the math to decide the flowers. After I changed to radio box, I used Array and used i to make the function. So do the flower language and color parts.

 

We planned to make animation for the bottle with p5 in java. And I ask Konrad about how to make the animation. He told me that it was easier to do this in CSS and taught me how to use keyframe to make an animation(THANKS KONRAD! 🙂 ). 

 

The most important part is how we change the flowers. I did not know why changing images source function did not work in java. So I loaded all the images in the html and set display “block/none” to show the flower. And I set the positions of each kind of flowers respectively. After receiving the value i from the array, I used the else/if statement to show the different kinds of flower. And for the changing colors, they are the simple buttons to decide the display of the images.

    

We also did a lot of user testing to get some feedback and changed the ways of interaction and selections. For example, we did not have the instruction which covers the whole page to tell the users what to do.  We put the instruction in the middle of the pages. Professor said that it was not that clear for the users. So I added the huge instructions and used settimeout to let them show and hide.

 

Further Improvement: 

1 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. I hope that we can do that in the future.

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

Credit: https://aggie-horticulture.tamu.edu/archives/parsons/publications/flowers/flowers.html

1.Project Concept

a) The subject and/or topic:

   Create your own flower with different elements, choose the color and background and send it to others.

b) Why important?

   We select flower as our main elements because we find many young people nowadays rarely express their love and feelings directly to others. They may be more willing to convey love through small gifts like flowers. For example, as the Mother’s Day is approaching, the users can create and customize their own flower and send it to mothers. The flowers will be based on the real flowers, but it will grow and bloom depending on the choices from the users. They can also send the flower not only to their Mom but also to anyone they care about. We want to make a net art that is more flexible and customized, which can encourage people to express their love and thankfulness to whom we love and those who love us.

1. Sources

http://wildflower.resn.co.nz/

https://colormandala.com/

   The first source we found is a website called wildflower, we were inspired by this because the flower it generates is so vivid and beautiful, it also contains a part to send this flower to someone we love, which is also a idea we want to express. However, many people are not familiar with the flower language and in this project, the flower type is limited and generates randomly without any intentions. Therefore, we want to add more emotions to the unique flower and give it some explanations so that the users can choose what type of flower they want and who would like to send.

   The second sources we refer to is mainly related to our technical issue of coloring the flower. This website is mainly a game of filling the blank pictures but we think the single and plain color may be too dull for a flower, so we decide to make our own templates and substitute them based on the color choices.

3.Production

   In our project, the user will first choose to add different emotions and elements to the flower, such as love, friendship, tears, grateful, happiness, etc. Then the flower will be generated depending on what the user chose and the meaning of the flower (flower language) will be shown beside the flower. After that, he can choose the color of the flower and we will switch the color template for each color choice. He can also change the background environment of the flower to better fit the meaning of the flower. At last, he can click the share button and send the flower to others.

   In the production process, we will first do the researches on what kind of emotions that can be added to the flower and how it related to different types of flower category. Then we decide to draw flower templates using p5 and based on the shape of real flowers. The user may select the elements they want for their flowers and click “grow” to generate the flower and the corresponding flower language. There will also be some sound effects when the flower is created. We will prepare the color templates for petals, pistils or leaves that could better merge with each other.

   After the flower has been made, we plan to use the scroll function to let the users change the background environment that best matches the flower language or their feelings. This also requires a lot of research on the flower and their meanings. We also want to play different background music according to the background so that the entire piece will be integrated with each other.

   For the last part, after the user selects all the alternatives, they can click the “finish and share” button, the screenshot will automatically be generated and the pop-up window will show the ways they can share, for example, email, facebook or other social media, or save it to the desktop.

In this article, the author Greene introduces the history of net art with the related picture, which is clear and detailed for us to understand the development of net art. With the art generally appeared and showed on the internet, it was also a big challenge on the basic rules and coding for the internet. Greene discusses the process of the combination of the art and internet in detail and provides a lot of interesting case studies. There are many platforms provided to a large number of artists who want to explore in this area. And also the platform had a series of rules to run the communities to avoid the conflicts.
What interests me is the period of 1997. At that time, many platforms sprang up like mushrooms for different artists to publish their work. According to the author, the female net. artists won a fairer place on the development of net art through the rules of the platforms. They could deliver their personal ideas and write for themselves–“we are the modern cunt/ positive anti reason/…/ we see art with our cunt we make art with our cunt/…” (4). In addition, the filmmaker Cheang also made artwork for gender equality. We can learn how fairness and openness were developed on the internet step by step.
Besides, the article makes me think about the relationship between art and the internet. In my opinion, they contribute to each other. The art makes the internet more diverse, and the internet conveys art to a broader area. If there is no internet, I think it was hard for female artists to get their rights and publish their artwork in 1997. Therefore, I am looking forward to the future of art and the internet.