Communications Lab

I can hardly imagine that this fiction was written from more than 100 years ago. The world in which Forester described as parallels with what we have today in the sense that technology has had a significant impact on our lives, our feelings, and our thinking abilities.

Firstly, This machine can be referred to any high-tech product today. It could be a computer, a phone, or artificial intelligence. In the fiction, Vashti could not live without the machine. Today, with the rapid development of technology, people are spending more and more hours checking their WeChat, twitter, and facebook. They just can’t put them down. In the story, the machine finally broke down, so what will happen if all smartphones disappear in today’s life？

This conversation just showed that blindly worship the machine, Vashti lost herself.In her world, the “machine” was just like a god. She didn’t allow anyone to say anything wrong about the “machine.”

Secondly, the machine can replace our body’s work in a far more accurate way. The fiction describes a world that people only pursue high IQ instead of a healthy physique. For example,

“And in the armchair there sits a swaddled lump of flesh-a woman, about five feet high, with a face as white as a fungus.”(From chapter1 “the machine stops” by E.M. Forster 1909)

The words “lump” and “fungus” both indicates that the woman is lifeless.

That is both true and not true today. The reason why it is true is that the gaokao exam is getting progressively more difficult in China. In contrary, physical exams are not tested. The reason why it is not true is that the number of people who are using the gym is overgrowing. So it’s of great importance to balance mental and physical intelligence.

Thirdly, I think that we can reflect on people’s connections today. We usually communicate through a “machine” as a smartphone.

“I want to see you not through the Machine,” said Kuno. “I want to speak to you, not through the wearisome Machine.” (From chapter1 “the machine stops” by E.M. Forster 1909)

Do these kinds of things bring people closer together or we need more face to face heart to heart communication? Maybe we can try a high-tech off day to see what will happen if the “machine” broke down.

The Garden of Forking Paths

“The Garden of Forking Paths” is talking about the puzzle of time and the forking of time. There’s not only forking in space but also in time. Moreover, the forking probably means different possibilities of the future. Sounds a bit like Schrodinger’s Cat.

I was pretty impressed by the line: “Thus Iproceeded, while with the eyes of a man already dead, I contemplated the fluctuations of the day which would probably be my last, and watched the diffuse coming of night. “(from The Garden of Forking Pathsby Jorge Luis Borges)

This idea is similar with the one that Marcus Aurelius wrote in Meditation: “You will find rest from vain fancies, if you perform every act in life as though it were your last, laying aside all carelessness, passionate aversion from the commands of reason, hypocrisy, self-love, and discontent with the portion that has been given to you.”

Life, death and time are all internal topics of human beings to discourse. What touches me most is that you never know which day is the real “last day”, perhaps it’s just today or tomorrow. By performing every act in life as though it were your last, you can really fully explore the world and yourself. You may try things that you never have tried. I believe that everyone has a Bucket List. That is strange because you try to do something only when you are dying. That is exactly the puzzle of time.

“The Danger of a Single Story” mainly discusses the danger of a single story, or in other words, the stereotype. The speaker shares her experiences as a young girl reading British novels and writing stories with audience. She tells the experience that America had this single idea of Africa: poverty, chaos. Adichie realize the danger of single story that these singular narratives can help to keep stereotypes. She refers to that cultural and economic power are in an important position where stories are told and places interpreted. She does not have these narrow opinions of America because she had read many American stories.

Actually I have watched this video in orientation week. We all know that we need to embrace culture and learn different facts of world and countries. But actually in modern society the truth sometimes may be hidden by economical power and political power. In western society, media are often bias and convey fake information to the public, causing that there is a great possibility that the public will form a single story. For example, my roommate has a single story of China politics and government when he first came to China. So we need to accept information from diverse ways and form a critical understanding based on our own judgement but not just accept the idea that others express to us

Our project adapts the classical novel In A Grove into an interactive narrative. We rewrote the story as clear and short as possible so that it can fit into the web and does not seem to tedious for readers to read through. The rewriting was decent. As for web design, Professor Moon gave us a suggestion that we can make it more of a Japanese style. First, by changing the division style of the testimony part into a Japanese window or fan, the website will seem more elaborately organized. Second, using simply black, white and red colors will give the project more visual impact and more cohesion. I can differentiate each character by their symbols rather than colors. Leon also gave us a suggestion on perfecting the input box by making the instruction a placeholder.

I think our project still needs to more carefully plan the length of each sentence being displayed since different people read at different pace. Given more time, we can add a function that allows readers to hover on and stop at any sentence they want to spend more time reading. We also need to add a button to play and pause the background music in case the readers want to read without music. Moreover we can explore more necessary interactions other than clicking. We might use drag-and-drop buttons for each page turn to differentiate from switching sections in each page.

This documentation will be divided into 3 parts, corresponding to three chronological stages of the creation. In each stage we prepared different components of this project. The documentation will end with an epilogue about our considerations for possible improvements.

Stage I – The Idea and Inspirations

The invention of web has changed people’s lifestyle in nearly all aspects, including how people appreciate art. Of course there are many possibilities of how web can change the process of art appreciation. We want to exploring one possibility by this project.

We’re firstly inspired by a class example called the Color of Motion, where the creator calculated the average color of each frame in a film and place the colors in a stack order so that we can see the color dynamics of a film. We believe there’s a profound psychological link between the color and human emotions. Users may be unconsciously stimulated into different emotional states while seeing different colors.

Back to art appreciation, while creating classical paintings, normally the painter is very careful with the selection of color, which means the use of color has a strong emotion-wise or vibe-wise influence on the whole viewing experience. Additionally, we think paintings that share the same subject or theme, may have similar methodology in use of color. Therefore, we extract colors from paintings sharing the same subject or theme, and apply them to each individual painting for an augmented color effect to show the influence of a certain color. We do this by putting a filter of a selected color onto the video.

Apart from the color effect, we believe we can improve the whole experience by adding audible elements, which I’ll give more detail in the following section. We hope this mixed experience of both visual and audio elements can let audience appreciate art in a way they never experienced before.

Stage II – Material Collection

As for material collection, we decide the body of our project is the painting. At first we chose static paintings, because our intention was to improve the traditional art appreciation experience and we intuitively looked for things similar to art exhibit in a museum (static painting) to improve with web elements. While searching for our materials, we found a creation of animated painting. We thought it’s a better choice, because animation makes the subjects in the paintings more lively and they’re more evocative of human emotions. Also, we think this decision also reflect one feature of Internet, the speed and convenience of information spreading. Our decision to some degree complies to the Internet spirit (of course it’s based on the fact that we credited the creator while using his work).

Our project is based on the use of color in classical paintings. The body of each work is a video of animated classical paintings. Each video contains several paintings, sharing the same theme or subject. We extracted the most frequently used colors each painting with Photoshop by taking the subject or major object out of the painting and then calculating the average.

Apart from color effect, another dimension of our project is audible effect. Our first intention was to add a background music and we did it. We later figured out that we can also assign a musical note to each color calculated. While adding color effect, the corresponding musical note will also be played. We chose the notes from the same musical scale so that the notes can fit into the background music. We collected more musical notes than needed and picked the most proper ones out of them to guarantee the best resonance.

Of course there are cases when the user wants only the sound effect but not the color effect, or the other way around. We also made features for that (the buttons on the side).

Stage III – Web development

Nearly all codings are based on HTML, CSS and JavaScript. The coding apart is not hard because we think we learned enough things from the whole semester to make things all work smoothly. We tried to include P5 in our project since we spent quite some time on it, but it seems there’s no apparent place for P5 use.

We used a dive with certain opacity and the background color of the selected average color to create the filter effect. For layout of the webpage where we present out work, we wanna highlight the painting so we chose a dark layout. For the information page, the background colors are all the average colors calculated because they look very harmonious together with the paintings where we derive them from.

There is one small problem with web coding, the sound balance. We have to kinds of music, the background music and the discrete musical note. The note sounds much louder than BGM in my earbuds while much weaker then BGM if we play it with the laptop speaker. So I made two web pages for each work with different volumes for both music types.

Epilogue – Reflections and Potential Improvements

Based on the feedbacks, people think it’s a great idea to create a project that features manipulation of color and sound. Actually, we’ve never seen a project like this before from the class examples or extracurricular sources (but I’m sure there is). The completion of this project is based on many discussions and brainstormings. Thea and I wants to conclude it as a successful attempt and the website is a good enough prototype. Besides, we very well exploit the web as a new medium to create this new art appreciation experience (for example, one of our source materials, the animated painting, is typical creation on the medium of web).

Also, thanks to the feedbacks, we see more possible improvements to this project.

The first one is that concept of applying frequently used color as filters so as to achieve a deconstructive (or reconstructive) experience of paintings might be hard for users to understand. It really makes sense because we define our project as not only something to relax or have fun with but an art exploration for users to explore the psychological connection between art and their mind. So it’s of vital importance for the users to know our intention and feel their psychological level change while interacting with this project. So we would clarify our intention at the very beginning of the project if we’ll do it again.

The second improvement is the color effect. We create the color effect by adding a div on top of the video and adjusting the background color. However, this method causes the video to be more unclear, as some small details will be masked. Some people suggested we create different videos and change video sources when we need a different color effect. Actually we’ve tried this as our first attempt to create the color effect. In this implementation, when we change the source of the video, there will be a flash effect. When the user press the keys at a high frequency, the flashes will ruin the whole experience. Our second attempt was to use web coding to change the color effect, like changing the hue-rotation parameter in CSS. This wasn’t a successful try either, because the change of color wasn’t obvious enough foe the user to notice. So at last we used div. Maybe in the future we can study more about color theory and trying changing several image parameters (more than hue rotation) to create a natural and fluent effect.

The third improvement can be the sound effect. We select the music notes based on our intuition as we’re confident of our background, but it seems our selection is still subjective and limited, because another student with musical background suggested we should refer more to musical theory and select notes of the same musical scale (their frequencies have some shared features).

Also, web design is something we can work on, too. An important suggestion is that the buttons can be made more intuitive by replacing the letters on the button with icons (like the letter “i” in a circle to represent information page). Additionally, some people thought the background color is kind of rigid. We don’t want to change the background color as we apply different filters, so we might use lighter colors instead.

Overall, we’re really satisfied with this project and appreciate all the feedbacks. I had a great time with comm lab!

This purpose of this project is to recreate a short novel into the form of net art. The novel we chose was <In a Grove> written by Ryunosuke Akutagawa, one of the author’s most famous production as well as a representative work of Japanese literature. Both my partner and I are fond of Japanese culture and love this story, so we would like more people to read it with fun rather than feel bored and fall asleep. To achieve this, we consider to incorporate self-drawn characters, background images, animation, audio, and P5 canvas to create an immersive theatre via web.

Regarding the storytelling, we had gone back and forth deciding what to include and how to demonstrate the whole story in a more efficient and interactive way. The original story consists of 7 sections, in each of which a character states one’s own perspective on this murder. To make the story more comprehensible to the users, we rearranged the storytelling and divided it into several parts:

We used simplified animation to introduce the cause of the story: A man was killed, and the context of the story is in ancient Japan.

4 relevant characters’ testimonies. Their description will provide the user with a basic understanding of the time, place and the 3 main characters’ identity and their image. The user could click on the question to know about the underlying information, and the page would automatically proceed to the next after all the buttons are clicked once.

3 main characters’ confessions. This is the most crucial part of the story, and we chose to animate the CG and text as if the user is watching a movie or even experiencing it in person. Especially when you need to click on the button to go into the grove to see what happens next, you would probably have a strong ominous feeling just like you are the one who is deceived to the grove.

We divided it into 2 different scenes to better show the conflicted details in their confessions. Accordingly, the drawings appear to be different in each of their confessions as shown in the screenshots.

The ending part will ask you to type in your answer to the question who is the murderer. If you type in some random names, it will display that “we have never seen anyone named xxx (changed accordingly)”. The flying leaves of the P5 background accelerates when user inputs with keyboard, thanks to Jenny’s great invention. There is no such a truth to the story. This novel intends to show how humans speak for themselves instead of telling truth with morality.

Process

I photoshopped the materials besides self-drawn assets, edited the script and did part of the coding to complete the story. For photoshopping, I got the outlines of them and processed the into silhouette style. We found Nippon traditional colors to fill the image.

When processing the background for the grove, I created a black background and set all the assets to white, as the background of the website was black. I copied and pasted the assets of bamboo to make it a grove.

Since all the assets are unified into silhouette style, and processed with feather effects, the visuals look quite consistent from my perspective.

One feature I did not succeed to add was the fading out effect of the background music. Without this function, it might seem a bit abrupt when the music suddenly stops when proceeding to the next page. However, when I tried to add it with the help of class examples, I did not figure it out how to make the function execute the same time as the vanish effect did. If I had more time I would definitely fix it.

From proposal to presentation, I learned that it was important to have a clear and definite goal at the beginning. Sometimes the difficulty was not how to achieve it, but what to expect and what to achieve. There could be various ways of making visual assets and designing the website, deciding what path to take at the very beginning would be efficient. Technically, developing a clear and easy-to-follow coding structure could be a life saver. When there are unexpected bugs appearing, understanding my own code could help.

Future

Considering the feedback we have got from our classmates and guest professors, we could probably make several changes to our net art project:

Include the names of the main characters in the ending page, as Japanese names are hard to memorize. (During user testing)

We have actually done writing the code for it. The reason we did not include it was that we really hope that the user could read the whole story and keep the three names in mind. In consideration of wider audience, we think it is a good suggestion in terms of user experience and will incorporate it in future improvement.

Add music to it. (During user testing)

We did it right after user testing. Music plays an important role in creating an immersive reading environment.

Make the characters black and white instead of coloring their images. (From Prof. Moon)

We definitely agree that all black and white adds to the aesthetics of our webpage, but it requires more detailed drawings rather than simple photoshopping, so we did not get a chance to do it. If we have more time, we will polish it in this way.

For the ending page, use .tolowercase method to process the user input. (From Prof. Leon E.)

I remember learning this method in python. It will be great if we improve those kinds of coding details to optimize user experiences.

For testimonies section, include visuals for some key elements like combs, ropes, arrows to make it more vividly. (We came it up on our own.)

I have collected the assets for it, but we ended up not having time to finish it.

Music effects.

If we have time we will definitely fix the fading out effects, and edit the music to better fit with the scenes.

Our aim was to highlight the financial struggles many students today face in an entertaining and engaging way. We decided to exaggerate the lengths a college student must take in order to make money as a way to reflect the severity and stressfulness of the situation. Many college students face this ongoing struggle and through the use of video and code we aimed at creating a website that was both interactive, entertaining, and informational.

Our website tells the story of a college student who is desperate for money and decides to turn to stealing to cover his expensenses. The user is first presented the opening video. This video shows the sequence of events that lead the thief to decide to steal. As his list of items to steal is shown on video, the video soon disappears and the user interface is presented. The user is then able to click on certain items to watch parts of the video that show how each individual item was stolen.

To split up the work, I edited half of the videos using Premiere Pro, photoshopped, directed, acted, and filmed. When first coming up with an idea for the project, we bounced around many ideas and discussed what features to add and remove. Eventually, we came to a compromise and decided on a script and shot list that reflected all of our own unique styles and ideas. We aimed at making a fictional storyline that falls between a comedy and a drama. In order to tell the journey of the character we created and maintain our main goal of shining light on the problem that comes with student debt, we found sticking with such kind of genre to be most efficient. Overall, our project successfully conveys the story we aimed at making, touching on a serious problem in a both dramatic and comedic way, while continually engaging the user.

For this project, I hope to create a website that is simple but at the same time artistic and contemporary. Jiayan is a freshman, so she is very interested in the theme of “Explore Shanghai”, so I suggest that we can use the theme of “color” to explore Shanghai, and this will also become the main design element of our website. Jiayan is mainly responsible for finding pictures and writing the copy of our website. I am mainly responsible for setting up the entire website.

When the user enters the home page, it is a set of images of different colors, and they will have an animation effect from fan to tile. The background color at this time is white. When the user hoveres over a different picture, the background will change according to the color of the picture. The background color of different images depends on the balance color of a certain area of ​​the photo. When the user slides the mouse, the color parameters will gradually increase or decrease to the next parameter, thereby achieving a gradual change in the background color. In addition, we provide a subtitle for each color. When you hover over it, a caption will appear. And the positioning of the subtitles is performed by using the position of the mouse to realize the effect of the title moving with the mouse. When the mouse moves out of the picture, the subtitle disappears. I think this feature will be more clear to users of the theme of the gallery. In addition, I hope that my users will get the feeling of visiting the gallery when they browse the website. I have set the “next” image section at the bottom of each gallery. And the background color of this section corresponds to the picture, I think this can provide users with a smooth experience.

what can we improve:

After we finished the final show, we received a lot of praise and gained a lot of opinions and suggestions. I think the main point is that we should pay more attention to the performance of the theme, using some features to improve and emphasize the theme of “color”. For example, when hovering over a photo with a specific color, not only does the background change, but we can also change the opacity of other photos. Or enlarge the picture of the mouse hover position. When the image is clicked, the user enters another page that contains more images of the same color. The background color at this time can also be adjusted to the theme color. Our classmates also suggested that we add a pop-up or other content to indicate that the user can click on the image. After entering a page of a color theme, there is background music according to different emotions. Although Moon believes that audio is not required, because our project wants to let the user focus on the color itself, I think adding a play or pause button would be a good choice. In addition, the text is unreadable, and we may change the size and style to make the text and the overall website more temperament

About: Inspiration stemming from perfume’s presence in contemporary culture and from Shakespeare, our project aims to encapsulate individuality centered around scent. The project displays seven unique sets of responses recorded from a diverse set of individuals; their non-olfactory responses are included in order to give more dimension and meaning to each scent.

Process: From the start, both of us combined our ideas about what we wanted our final project to be. As we entered the development stage, it became clear that both of us had different strengths and this led us to be able to split the work evenly. Our workflow was very smooth as Ashley was able to produce the visual assets while I was simultaneously coding the website. Ashley also interviewed the subjects. Our teamwork was very strong and it led to the successful completion of our project.

Self-evaluation: This project came close to reaching my goals. Although we were highly ambitious, we were able to execute almost everything we wanted to. We had to be able to adapt if problems presented themselves. According to feedback that we received, it would have been nice for the “personal feeling” that we aimed to achieve had stayed constant throughout the project; it broke during the video section which only had a filter applied to them.

User Testing: User testing was helpful in our production of this project. It helped us realize that some of the elements we thought would be intuitive or easy to understand were not so. We adjusted fonts, visibility, and added a brief introduction to the project on the homepage. A little more modification of fonts would be helpful according to feedback we received after our presentation—the about section was a little hard to read.

Challenges: One challenge in this project was how much we wanted to do from the beginning. With such an ambitious idea of audio-visualizing smell, we knew that there would be some difficulties. Aside from running into bugs with displaying every element, it was hard to decide where the line was between artistry and functionality. We did to the best of our ability draw it in a reasonable place. Another challenge we faced was with the implementation of animation in our project. While we knew how to use javascript animations, implementing p5 in a useful manner was much more difficult than anticipated and with the time frame allowed we were not able to implement it. The interaction with the “scent” aspect of each page may have suffered as a result.

Changes:Aside from spending a little more time to make sure every bug is quashed, I think adding viable animation would have been the cherry on top to producing a perfect experience of scent without the ability to smell it. Additionally, according to feedback that we received, it would have been better to have the questions a little more closely tied to scent. By bringing them a little closer to the main topic of the project as well having the user think about standard topics in a way that they usually would not, the project might stand out even more than it already does.

As our first final project proposal, Zane and I got the inspiration from our daily experience in choosing bubble tea. We have many choices of bubble tea nowadays and sometimes we don’t actually know what kinds of the bubble tea we really need. We wanted to make an Internet interactive platform to help them choose, which allows users to choose which kind of flavor or which kind of bubble do they want, and then our project will provide them the best choices of bubble tea. The choices include the location of the bubble tea store, the names of the bubble tea, the prices and the kinds of the bubble. But when we tried to figure out how to achieve the function that we supposed to have, we found out that it is beyond our ability. So we changed to our idea to make a snake game with p5 and JavaScript. However, when we began to code, we wanted our project to be more complicated. Because I played Zelda game recently, so I wished that we can make a game which is similar to early Zelda puzzles game.

II. Story

When we began to do our the third version of our project, I first came up with a basic story of the ghost. Basically, what we had at first is an escaping story which our character escaped from war and found a mysterious palace by accident. Then he was overcome by a ghost power and fell asleep. When he waked up again he needs to use this kind of power to go out. From this first background story, we had the most important element of our game–ghost power. We used it to design most rooms of our project. While the project was processing, we evolved our story to match with our design.

III. The design of each room

I was mainly responsible for the game design.

I had many designs for each room and I tried to use different elements to make our project more complicated. But our project is not a pure game. People might get annoyed if they cannot win. So we decided to be simple in difficulties but not simple in style and design.

This is the final map of our game

For Easter eggs part, we wanted to make it as an essential for a whole project. But we changed our mind because we thought that it might increase the difficulty of the game. So we designed it as an “Extra Room”, which means that you don’t need to open that room to win–It is just a healing room.

IV. Coding

Zane was mainly responsible for coding. We used p5 library to achieve our design.

V. Introduction video

I made the introduction video by using several pictures to play on by one.

I used Adobe Premiere Pro to cut this intro video. I tried to make the intro video visual with as few as possible words. It is hard and I think I didn’t do a great job because according to users’ feedback and critique, they could not fully understand what we wanted to express. The background music was written by Zane. Because we wanted to make a game similar to early Zelda, so we choose to use Gameboy style music to match with our project style and picture. Also, I used some dip effect to make the whole video natural and fluent.

VI. Future Plans

Firstly, we want to achieve all the design that we have so far and make it as a real game but not a project. Also, we will try to make it more pretty. For example, we want to decorate for each room and we want to design a real person but not just a rectangle. Besides, we might change the difficulties of the final boss. It might move faster, has more health or it can cause more damage to the character. For introduction video, we can be better by using more specific pictures to demonstrate a full story without words, and we can match the BGM more closed to frames changing.

VII. Self Evaluation

Generally speaking, I was satisfied with my work. For the coding, it is better to hand this job in one’s hand but not work together because of efficiency. So I did almost all the job besides the coding, including story design, room design, introduction video making etc. But actually, I still kept tracking the coding. I read and tried to understand what we had had so far because I would design different part of the room and interaction part according to what Zane coded for each element. Hence Zane could just focus on the coding, which was a huge work. We worked as a team and we have a really great teamwork.

Our project is: Shanghai color. Shanghai has many colors. Colors have strong impact on people’s feelings. different color has different emotions. As we live in Shanghai every day, have we thought about seeing Shanghai in a different way? Our project idea started from here.

In this project, we let users to explore shanghai in different colors. We want to make it like a modern gallery so we design the asset as simple as possible. The home page is a set of pictures in different colors. When the user hover on different pictures, the back ground will change according to the color of the picture. Also, we give each color a subtitle. When hover on it, the subtitle will appear. The background color changes smoothly as the user scroll. After professor Chen gave us critiques, we found that there’s something we can improve in order to emphasize on colors. When hover on one picture with a certain color, not only the back ground changes, but we can also change the opacity of other pictures. When click in a picture, the user enters another page with more pictures of the same color. Our classmates also suggests us to indicate users that the pictures are clickable by adding pop up or something. After enter the page of a certain color theme, there is background music according to different emotions. But professor moon suggests that the audio is not necessary as our project wants to let users focus on the colors themselves. Also the texts is not readable, we may change the size and style. And the background color can be reconsider instead of just white.

I took the responsibility of taking photos and finding pictures online. When choosing pictures online, I chose pictures from different categories including street food, modern buildings, art pieces and etc. so that the users can explore shanghai in a more comprehensive way. Some of the pictures I took do not have a theme color so I use photoshop to emphasize one of the color.