From the reading, I received  a strong sense of power as a human who has the ability of communicating. Unlike Vashti and other passengers in the air-ship, who did not think communication as important at all, Kuno is a positive example because he realized that shutting ourselves down to other people would do us no good. I have the same feeling as Kuno as I understand the importance of communication. As far as I’m concerned, communication is like a bridge, connecting us to everything else in the world. If we can make good use of this bridge, it will take us to anywhere we want to be. On the contrary, the machine which is mentioned in the reading is an example of the “prison” in our head. People who lack the ability of communication are confined to this prison. Of course, the very first step is always scary. But when we are brave enough to take that first step to get involved, we will find  out that the world with communication is so much more prettier than that little “prison” in our head. 

Communication is not only about exchanging our ideas or thoughts with other people but also a way to improve ourselves and explore new regions of  knowledge. If we refuse to communicate and keep everything to ourselves, we will be trapped in our own little world. Only if we have the ability of communication can we find a way to acquire new knowledge, thus to improve ourselves. 

Communications lab final reflection

       Our project’s idea was generated from the Seven Deadly Sins. However, we weren’t trying to depict the seven sins as they originall  y were, instead, we tried to find them in the daily life of human, and depict them as a sinful joy that people may be addicted to, or the small problems that everyone would encounter. The whole project consists of one home page, seven pages for seven sins, and an about page which describes the idea of the project.

On each page of a sin, there is a small “incident” that the user needs to trigger using simple interactive moves like clicking or hovering or pressing keys. And through these incidents, we depict the seven sins in a comic, entertaining way but without losing the facticity of them happening in our life. For example, in the page of wrath, we have a picture of a mosquito that changes position to a random place whenever you hover on it, while playing the annoying buzzing sound that it makes; basically it’s a mosquito that keeps buzzing around your ears and that you could never kill. This can really be very annoying in real life so I interpret is as the sin of wrath in modern people’s lives. The rest of the pages are similar.

              To be honest many things that we initially brainstormed was too ambitious for us. Like too many elements or ‘interactive’s on one page or like making each sin a individual game or so. And there is quite a few things that I want to change if I were to do it again. For example, in the page of envy, I don’t think I interpreted the concept of “a person envies the fun of the others because he was excluded from them” so well and I might think this over and make other interpretations or simply make the page easier to understand; by probably using cartoon figures of people rather than the red, ghosty figure and the mouths and eyes on the other side. And same for the page of lust. I feel like the interactive, which is simply scrolling, is a little bit too simple on this page, however, simply by photoshopping a really long picture to active the interactive on the page and thus reduced out workload, worked pretty well. Another thing that I think worked well is the p5 animations of the home page. I think making the seven shaky little circles clickable and have a name each was really cool and funny. I really liked my homepage.

       If I had more time, I would definitely at least add a description of each sin which you can access on each page; and give more instruction of how to navigate through the websites somewhere on the pages. And also I would consider making the style (like the coloring, the backgrounds and the drawing styles) of each page more coherent, as what was mentioned in the critics. But furthermore, I would think of making the seven sins actually games that motives the player to commit those sins—which is to convey our point that the sins are in everyone’s lives more clearly.

For example, we can make the Pac-Man game of gluttony harder and add some conditions under which you could either eat all junk food and become happy, or stress out because you don’t do stress eating. And also, of course, add more navigation buttons in those pages. So that the project feels like a whole rather than several different pages. And that may help on the coherency of the styles as well.

A. Design

The inspiration of our project comes from the seven deadly sins. In our project, we try to depict how the seven deadly sins are shown in our every-day life.

The home page is made up of seven circles moving randomly on the page. Each circle represents one sin and can link to the corresponding page.

For gluttony, we use the concept of “stress eating”, which is a common phenomenon that the more stress we have the more we eat and the more we eat the happier we get. In this section, player can control the mouth on the screen using “left” and “right” button on the keyboard. The mouth will then eat the food on the screen.

For lust, we use the concept of “single dog (单身狗)” which is used to say someone who is single and longing for love. On the page, there are many couples and among them, there is a single man who looks quite unhappy. The player can drag the long picture either using their mouse or the “left” and “right” button on the keyboard.

For greed, we made a shopping page where if the user check one box all the boxes will be checked. And when they click “Buy”, there will be alert popping out saying “Out of Balance”. This shows the phenomenon that people who are into online shopping couldn’t resist the desire to buy more even if they may not have that much money.

For envy, we use the saying “green with envy”. There is a crowd at the left of the page and a lonely man at the right of the page. Each time the user hover their mouse on the crowd, there will be sounds of people chatting and laughing and the man on the right will shrink a little. We want to show the phenomenon that someone who is shy and afraid of socializing may sometimes envy those who can fit in.

For pride, we use the phenomenon that people like to photoshop their selfies before putting them on the social media in order to leave a good impression on others. When the user moves their mouse from the left side of the page to the right, the picture on the page will change from “before ps” to “after ps”.

For sloth, we use the idea that people having trouble waking up in the morning. This page is kind of like a comic where people can go to the next page by clicking on the webpage.

For wrath, we made a mosquito which flies to a random place on the page as soon as the user hover their mouse on it. There is also the annoying sound of the mosquito which only stops when the user manages to “kill” the mosquito by clicking on it.

B. Process

I think “the seven deadly sins” is a very interesting theme and we can explore a lot based on this idea. We did great in working as a team—we came up with the idea of our project together. And after we set out to doing our project, Steve was in charge of coding using P5 and I drew all the assets and helped Steve with some simple coding as well. However, we were a little over ambitious. We underestimated the time needed to finish a project that is composed of seven mini projects. Therefore, we had to simplify our ideas when we realized that we were running out of time. I think it will be better if we had made a plan before start doing the project. We should plan at what time which part of our project should be down ahead of time.

C. Future

If we were given more time, we can make each part of our project more like a little game. For example, for gluttony, we can add more food and also many add a “stress bar” which decreases as the mouth eats more food on the screen; and for sloth, we can make the format of the page less liner and make it more interactive. Also, we need to think more deeply about the meaning of our project. Whether or not we are using the most proper way to depict the seven deadly sins in modern society? Is there any better way to show the seven deadly sins? These questions are the foundation of our whole project.

Final Project Documentation

Jannie Z & Justin C

Link:

https://github.com/320834/Poemsite

Description:  

Our project is a website that allows users to create poems based on the templates that users have already created and a deck of words that randomly generated. Also they can create their own templates and upload them for everyone to use. After creating their own poems, they could save and publish them so that everyone can view them.

Process:

Inspiration:

Our idea originally came from our understanding of music, and other art form. We wanted to create something related to music at first, but we were stuck in a situation where we found there weren’t much room for new ideas when it comes to music. While we were discussing, we both thought that art should be open to interpretation with no definite answer, so our project should be open to interpretation as well. Then I thought of poems. Personally, I am very passionate about poems and lyrics. Poems are short, but reveal much more and leave a bigger room for readers to reflect on their own aesthetics, experiences and feelings. So we decided to use poem as the carrier. And then we thought of MadLibs, a phrasal template word game where one player prompts others for a list of words to substitute for blanks in a story.

(MadLibs)

So we decided to do something similar, but with more sense than pure entertainment. We want to create a welcoming platform that allows people to release their inner art. 

Web Design / User Interface:

I designed the user interface. I took inspiration from moon phases. I decided to name our project “phase”. Because moon phase changes everyday, just like us. We keep on changing, in different stages of our life. And the angle we see things is different, too. The different phases reflect different aesthetics and perspectives of ours. Maybe one day you create something, and a few years/months later you go back to look at it you will fell something totally different. I think this fits our theme so named our project “phase”.

Since we named our project phase, the whole theme of the website is defined.  Main color set is black/white. I used some pictures from the Internet and edited them using photoshop. 

(I created a gif picture using photoshop for a star twinkling effect.)

I was inspired by a website called blacknegative. So I want to design something as cool as theirs.

(Blacknegative: http://blacknegative.com/#!/loader/)

Their website contains a lot of cool animations on the website, and a lot of transitions between pages and events. So I did something similar to this.

•     Hover and zoom in effect. 

When hovering on the buttons, it will zoom it slowly.  I did this by using css transform and transition property.

•  Fade in and out effect.

On the intro page, the introduction will slowly appears.

• Phase video as the background.

I created a video of moon phase and used it as the background. (Seen above)

• Handwritten title and animation.

I wrote the title “phase” on an animation generator and embedded it into our html page.

For the display page of templates, I used a phase calendar to be the background. And each icon represents a template. It will have the name of the template displayed on top of the icon. As more templates been created, more icons will appear.

I also used two bar images, which will always stay on top of the website, keep fixed.

Programming/Coding:

My partner Justin did the most part of programming. He set up a database where stores all the templates and poems that have been created and display them on the webpage. He also created a words generator function which randomly pulls some words out of dictionary at a time. 

But we received feedback from user testing that the words may be too difficult for non English speakers. So we toned down the difficulty of words a little bit. Instead directly pulling them out from a whole dictionary, we now have a set of words (eliminated the difficult ones)  to choose from.

Music:

I chose some meditation music as the background music, to avoid people being distracted by it. I chose some famous work by Dan Gibson, a famous sound-collector who spent his whole life on collecting different nature sounds.

Post-Moterm:

There’s still room for development. As the feedbacks we received said, the randomly generated words do not really represent our ideas of “release your inner art”. And there could be a function that allows people to like a template, so that there could be a rank of the templates. Also, in the creating template page, we have problems with the blanks. People have to type in exactly four underlines to make it a blank.

Future Development if Possible:

• Have a like function for the templates and poems.
• Adjust the randomly generator of words to something makes more sense. (e.g. categorize words by theme.)
• Fix the position problem on different screens. 
• Fix the problem of blanks occurred in the creating template page.

In summary, I think our final project fulfilled what we hoped to achieve. The style is consistent throughout the whole process and the interaction worked well. But more future developments could be done.

Design:

When I originally came up with an idea, I intended to make the word in more video game style. My original design looked like this –

I proceeded to add interactive element to the page, and the first successful interaction was in a form of tree starting to shake  on hover. 

However, at the time, I faced a problem. Html and CSS would allow to use .gif or .ani as cursors.  This made me change the concept of project. Now I intended to make a game similar to “FlappyBird”, however instead of bird dodging pipes, the character ( gif on canvas, position of which is controlled by arrowKeys through java script  )., is changed depending on wh

ich randomly selected background you are, and dodging appropriate object for that terrain.

Due to plagiarism reasons, I couldn’t use the images I found online, so I had to create them, most of them.  I started with producing backgrounds. As an inspiration tool, I used google images, to look up the landscapes, so I can base my drawing of them, in a way.

Image from google.My Image.

I tried to stay consistent with the drawing style so the transitions between slides seemed less sharp.

I created 6  1000px/500px backgrounds, some of which are animated. 

At this time, I found a solution for the cursor problem, so I shifted back to the original idea. 

Now I needed .gifs for my characters. I tried to create the characters on my own, however after realising that I didn’t have enough time to produce 6 different “.gif”  I stopped after producing the first one, jellyfish.  I used “giphy” to find the gifs that matched the style of my drawing, more or less. 

After finding five more gifs, I edited out all the backgrounds, broke down the layers to individual png files. 

Some of the terrains in this project had audio background. I used “FreeSound” for some of the slides,  opening theme song to Jurassic Park and song that gave me inspiration for this project, Right Here Right Now by Fatboy Slim. 

Process: 

 I have described the process of design creation, in this section I will talk about the process of coding this project.

My first successful part of the code that I used in final project was this:

which allowed the tree to hover .

Next, I started working on animating the cursor. 

Inspiration came when I was working with the backgrounds and layers. I was using the opt+} shortcut to change between layer in photoshop, and while most of the element stayed in tact, some started moving in a very gif like motion.  It gave me an idea to fake the gif effect in javascript. 

I exported all of the layers in png and then converted it into .cur format, setting its sizes from 70×70 up to 200×200 px, depending on the pictures. In javascript I created multiple arrays for each animation I wanted to create, and then made a function change the cursor image every .50 ms. and so on. 

Then I added the rest on my interactions and added hover functions for them and set audios to play depending on which area  you are hovering on. 

Future: 

I feel like this project felt slightly empty and I am responsible for that, as I didn’t use my time wisely and couldn’t solve the problem sooner. To my surprise I received more positive comments that I expected. I intend to work on this project during the summer, and finish it in a way I originally intended( 2 dimensional and much more bigger ) . However, this time I will probably use assistance from brother, who’s into graphic design, in order to produce all the characters, interactions ourselves, and possibly the audios as well.