Category: Communications Lab

Posted on

Final Project Documentation 2 (Reflection)-Laura Huang

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.

Posted on

Final Project Reflection – Milly 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.

Posted on

Final Communications Lab Project – Reflection Post – Adam Chou

Title and Link of Exposition: <“A day in the life of Miki“>

Design:

The design of the website was incredibly simple, as the central focus was on the audio and storytelling of the narrative provided. 

The user was able to experience the website by switching perspectives, hiding text, resetting and pausing and playing the audio. 

These controls were meant to enhance the user experience and explore the concept of different perceptions. Below are some screenshots of the pages.

Black and White are used as the main colors to convey the simplicity and illustrate that the work described is a work of fiction. 

In terms of functionality, white borders and black backgrounds were also used in order to help convey this idea. 

Title Page:

 

Narrator View:

 

Miki’s View:

 

Narrator View (with text hidden):

 

Miki’s View (with text hidden):

Process:

Please check out my documentation for a thorough explanation of my process.

Future:

Critiques mentioned during my final presentation were mostly stylistic commentary. Here is a list of them:

  • It was recommended that the art were to represent different perspectives of the characters being described. The narrator would have a third person view, whereas Miki would have a first-person view.
  • It was also recommended that audio and art were to exist in separate perspectives, so the background audio that played would only be audible when Miki’s perspective was presented. 

In response, however, I would argue that my concept would discourage such ideas. In terms of representation, as the actions being carried out in the script all occur in the same world, you (as a person within the world) would be experiencing the same things as both the narrator and Miki. The difference here is whether or not you hear the thoughts of the narrator or Miki, as they are subvocalized, and therefore not pertinent when the other person is not being paid attention to. This is mainly seen with the inclusion of Miki’s audible yelling in where she speaks in the world that I created. Because of this, it would make less sense if you could only hear Miki or the narrator, as they participate in a very real world and still have very real effects. If they were in separate realities, however, the criticisms would then most likely be quite valid. 

The idea, however, is that you are there, physically. You can see what both of them see, but you cannot hear everything at once. If you did, it would just confuse you. The point is not to confuse you, but rather, have you observe. 

However, there are some bugs in the program that I would like to resolve in the future. 

There is one issue that I described in the documentation in where the code would restart the audio file that I had played for each line. 

For example, I would have a function that asked the source of the audio file to change when a value that measured what line of the script was being printed. Whenever I had a range of numbers, it would not work. And so I either have to manually redo it and have the range equal a series of numbers, or I would have to employ some serious help since the fellows could not help me with the issue. 🙁 

Truly, it was a bug to stump many of them.

In other news, I would have liked to add some gradient backgrounds that would have changed the color as the audio and drawings progressed. Additionally, I had to cut off half of the initial story that I had written, which means that the project is incomplete. 

Therefore, adding even more assets to the many that I already have is something that I would have to do. 

Other than that, I am pretty glad about how it turned out. This is the most complete comm lab project that I have to date, and I worked on it as a solo project – which impressed even me to be completely honest.

Source Credit (FOR BACKGROUND AUDIO ONLY):

The rest of the background audio files were recorded by me, a day before the project was due. Whew, how stressful that was.

Posted on

Final Project Documentation – Ying

<NATURE IN MOTION>

<Link>

<Description>

For the final project, I will be working with Murray to create an interactive image gallery. We wanted to utilize our resources and my partner had a lot of pictures on nature. Our idea is focussing on a topic like nature and to showcase and to bring expression through images. After looking through all the images that Murray had taken. We decided to settle on five different categories: forest, mountain, beaches, sunrise, and temple.

<Process>

The aesthetic and the layout of our project was inspired by azab.es which I found during the research for the net-art assignment. I loved how the web creator utilizes the texts perfectly with animations and color change. The web layout is simple with black and white color. Users can move around the image as they move around the mouse cursor. When you click into the picture you will get more details about that image with texts and more images.

To start the process, I made the main page that began with an animated video. We found this cool short clip of blowing tree leaves from motion-places, a free online video stock that we can use for free. For convenient, I found this jQuery library called vide which allows you to plugin video as a background.

Then I wanted to introduce our five different categories. To introduce our categories, I wanted to follow the same style as my comic project with parallax. For convenient I used a jQuery library called Rellax. This allows me to control different elements at a different speed. The clickable images that will link to its own page will be fixed. The parallax effect will be assigned to the big white text, NATURE-MX throughout the page. To blend the text into the page more as a background, I added the no-select style that disables text highlight.

For the individual pages, we added the pictures which are featured on the main page at the center. On the right bottom corner, we added the location of where the picture is taken and the name of that specific picture. We added a water ripple effect to the picture whenever you click on it and move around the picture with the mouse cursor. To distribute the work equally, I suggest several tasks for my partner to complete on his part. We came up with the idea to make the individual pages like a canvas that allows us to mix-match different images of the same category. We thought that it can have an influence on emotions. These images match well because they have a similar tone in color. But the different shots of the image allows us to create a completely new image. To make the image appear we created an on click background on both sides of the main image. This allows the user to add and erase images.

<Reflection>

At the end, I wasn’t so satisfied with our result. Although the website looks nice overall, it lacks in content. To avoid this problem in the future, I should have made a thoughtful plan and having a purpose while creating a project. In regard to this project, we should have made the interaction more obvious such as adding a mouse indicator whenever it hovers to the invisible buttons. Last but not least, there is some work to improve in partnership. I felt that there is a lack of communication and collaboration. Sometimes, I felt that I took the task on my own.       

            

<Credits>

Vide Plugin

Parallax Plugin

 

Posted on

Final Communications Lab Project – Reflection Post – Taylah Bland

Final Communications Lab Project – Reflection Post – Taylah Bland

Project Title: The Phenomenon of Catcalling 

Partner: Julia 

Design

The final project “The Phenomenon of Catcalling” takes the form of an infographic which aims to inform a general audience about what catcalling is, its prevalence, societal and individual effects as well as resources to use to take a stand against it. The chosen phenomenon is actually very prevalent around the world, its transnational and doesn’t discriminate, although usually experienced by women. The website has inbuilt distractions that are intended to mimic the catcalling that someone might actually experience (on scroll events, hyperlinks and alerts).

The project features a ‘wikipedia’ style approach where content is presented in a page scroll format with hyperlinks integrated within the page (as seen below). There is also a selected Tweets section that Julia suggested for inclusion as it illustrates the phenomenons prevalence in today’s world.

However, the website presents a number of distractions and interruptions such as the alert which is called every 10 seconds.

  

The website also presents a youtube video redirect ‘onscroll’ at position 2050 pixels. The coding that I did for that section is presented in the screenshot down below.

The website also has hyperlinks that contain important videos and information on catcalling. They are presented in a way that looks like you have stumbled or invaded the privacy of someone else’s viewing. For example, one of the videos pops up but plays halfway through, as if you have interrupted. This is meant to mimic the invasive nature of catcalling. In another example, you read what appears to be the conversation of two individuals experiencing catcalling.

Process

The process of making the project was actually really enjoyable. My coding skills are by no means professional level but Julia and I decided to play to our strengths and do something that was not only important to us, but something executed simply but effectively.

We split up the work, with Julia doing the CSS styling and HTML and I did the Javascript and HTML. I also wrote a lot of the content for the project which was really interesting and I learnt a lot in the process. This worked really well as I was able to concentrate on the interactive elements of the project. I created the wolf-whistle on load of the page, the scroll position and all of the hyperlinks as well as the function that enables the alert to play every 10 seconds. Content writing and the interactions is definitely my strength and Julia has a really strong writing style and creativity side which suited her perfectly to the CSS.

The code for those elements is found here:


We both worked together on the project and by having clear tasks it meant that it was a smooth project to create.

If I had to do it over again, I don’t think I would actually change anything in terms of work distribution or the process we took in making the project. We definitely could have added more interactive elements and changed the styling of the index page but this is something I will address in the ‘future’ section.

In terms of discoveries, I definitely discovered the ability to make really deep and meaningful metaphors and connections by using HTML and Javascript elements. I was really proud that I was able to use the skills I had learnt in class to produce a project that I am very proud of. Simple things like adding the wolf-whistle or the on-scroll youtube popup meant a lot to me. Even though they aren’t necessarily difficult coding concepts – I discovered a new confidence in my abilities to really just try to do something that I ordinarily wouldn’t do.

Future

Given more time, I definitely agree with the feedback provided to myself and Julia by the critics and also the class.

The feedback included: 

  1. Add vocals to make more of an impact, window popup of eyes looking at you
  2. More visual elements
  3. Present huge chunk of text in a better information structure to encourage viewers to read it
  4. Draw more attention to links as they are essential to the website
  5. Add more features that emphasize catcalling- maybe more pop-ups or longer lasting Pop-ups

I would like to expand upon the use of popups and change the text each time an alert is called. I would also change the design of the text on the main page into smaller more reader friendly paragraphs.

In addition, I would love to add a pair of eyes to the page to make it look like the reader is being followed. The more realistic, immerse elements to really transform the page would be my priority action items.

I am a really focused writer so content creation was key for me, in my next pieces of work I definitely think that I will look to examining the more creative elements to really transform the work. I would love to revisit this piece.

The final project really reinforced that I am able to combine content creative with web expression. Communications lab has taught me so many skills that I will definitely be taking into other works. Thank you so much for the opportunity to learn and develop in an area that I would never had looked into. Thank you to Julia for not only your expertise but being such a great partner to collaborate and work with!