Comm Lab: Final Project | Linda Yao

Catch My Memories by Linda Yao 

catch

~~~OPEN IN SAFARI ~~~

Project Link: http://192.168.50.184/~lry214/Communication_Lab/memory/index.html

Description:

Catch my memories is a interactive website where the user is able to click on the icons to access the contents. I have created four memory icons and two social media icons. The idea of creating a mix of styles is that I want the user to think about how the digital age influences us and our memories. I have listed some questions relating to that as the background to guide the users to think about this concept.

I created the 3D icons floating in space to create a clustered effect which relates to how we often send out tons of info to the web without thinking much of it. Once the user starts playing around with the website, they will get a better sense of what the purpose of the icons are.

The four memories are also tied to locations. I created the content using actual videos that I filmed during my travels. I want to show the fact that many times we might put out perfect images on our social media but we rarely tell what truly happened behind those pictures. In this case, the user can click on a facebook icon and learn the “artificial” image of my trips or they can click on a location icon and get the full picture. Many times about the lessons that I learned through that memory.

 

Process:

Phase 1 |

I had to make all of the videos. I had an idea that I wanted a narration tied to the vlog style videos. So I started by creating my script for the narration. After that I looked through all of my contents picked out the better ones and started editing.

I edited and edited and wrote more scripts and edited. This whole process took a few days. This is also the first time where I did fine tuning which I started to play around with colors and speeds and sizing of the videos.

After editing all of the videos, I decided to add some music to spice things up. I did my research on what fonts to use and how to make the introduction. I wanted to introduce the location first and then the memory theme.

Phase 2 |

I started the website which was interesting because I sort of had the idea of creating a cluster effect but didn’t know how I wanted to carry it out. I was inspired by the 3D bubbles and floating effects. After coding all the bubbles individually, Owen enlightened me on the fact that I could’ve just created divs and made every a lot fast.

Next, I created the pop up windows which was a new concept.

function seoul() {
var x = window.innerWidth * .2;
seoul = window.open(“videoseoul.html”,”seoul”,”width=640, height=430, top=195,left=320″);
}

I enjoyed playing with the variables and changing it to fit my liking/display my icon image.

if (r == 5) {
img.onclick =shanghai;
img.src = “img/china.png”;
}

Then I thought about what was a good way to control the users movement on the website. So with Owen’s guidance, I decided to use the time out function.

setTimeout( function() { seoul.close();}, 110000);

Phase 3 |

Now its was time to put all of it together. After adjusting the location of the videos and window locations, I moved on to make the backgrounds. During the test session in class, my classmates recommended me to create something that would explain the use of the site and thats why I added the questions in the back. In addition, I slowed down the bubbles to help the users with the catching part. Also someone suggested of adding a brain design in the background to show the sense of memory.

Conclusion:

I really enjoyed making the site. The content creation was so much fun to do. From having the creative vision to execution was a really amazing learning process.

I think I learned coding is just a tool. There were many times that I couldn’t solve or code something. But it was able making compromises and focus on the goal of the project rather than what it must look like. Being flexible was a big factor of how I got to my final design and I am actually really happy about it.

I was able to learn more about myself through the content creation and about html/css/javascript’s possibilities.

Thanks to Owen for all the guidance and help!!!

 

Reading Responses by Tyler Rhorick: Computers, Pencils, and Brushes & Web Work: The History of Net Art (Vasudevan)

Computers, Pencils, and Brushes: 

In this reading, the author discusses how the invention of the computer and tech is changing the concept of art. The author rejects the idea that computers will become some omni-important force in art, even though they have many of the same capabilities, because he argues that computer generated work lacks the same sense of reality, since it doesn’t require the same skill set. I would actually problematize much of what the author has said in this article because, like any art, the concept of creative coding is also an active set of choices that an artist makes. Because of this, the process is just as real as any other piece of work making it just as real as a piece of work to be appreciated.  With this said, however, I can see how this can be a rather polarizing issue between artists in the traditional sense and the sort of new age artists that technology has created.

Web Work: A History of Internet Art

What was interesting about this work is how the author broke down the common conception of what is internet art. While the author did talk about how NET. ART is a concept of art being on the internet, she also talked a great deal about NET.ART became possible because of the pervasiveness of the internet. NET.ART is different than most other forms of art because it is compelled to be shared and seen by others in different places and times. I think this whole concept of NET. ART is interesting because in a way the form of NET.ART, the internet, is also a sort of work that has been made possible by its own existence. All in all, I think this article was the most helpful because it gave us a concept of the work that we were going to be exploring for our final presentations.

 

 

Week 15: Final Project (Vasudevan)

Link to project

My final project was very much inspired by recent events in the Philippines, specifically the burial of a former dictator at the cemetery for heroes, whose corrupt regime was marked by human rights abuses. I first wanted to just make a display with ripping, but then I realized that I didn’t know if people would even understand the information I was presenting. And then I remembered blackout poetry, and that’s where the rest of my project ended up going.

I first started with P5, but on Friday, I came to the realization that I was spending more time trying to learn the syntax instead of actually making any progress. I decided to try first if I could understand how to do the things in Javascript, and I was able to. It was partly due to the better examples for Javascript–I could test things out on w3schools and Stack Overflow– and partly due to the fact that I’ve grown much more familiar with it over the course of the class. So, ultimately, I ended up not using P5, except for drawing the lines on the screen.

Links to how I did certain things: randomizing the display, dragging images, and how to get the ID. It was really challenging, and I learned how to deal with functions within functions and event listeners and a lot more. I also had to learn about certain details, such as the overflow and the cursor.

As for content, I specifically curated pieces from sites that people would normally visit to learn about things, such as Wikipedia or news websites. But at the bottom, there would be all these tweets, which were of people recollecting their experience or retelling someone else’s, to tie into that “digging” aspect of it all. I also made sure that they had a correlation to other tweets or details of the site, such as the yellow background or two different pieces of information about nuns that contrasted each other.

I didn’t expect to get so caught up in P5, and I know that using it would have been much easier than what I did. Due to time constraints, though, I had to rely on what I knew instead, but I would like to try using P5 to do this next time.

 

Week 13: Final Project Documentation “The Mixtape” by Marisol Gallardo (Vasudenvan)

Description:

As the year 2016 comes near its end, the purpose of the website is to present how this year transitioned through a mix of some major music hits of this year’s pop culture. The reason of choosing a mix than rather just showing the songs by themselves is to show a deeper meaning that altogether, this song shaped the year and what we listen to everywhere. In the Website the user will be taken to the main page only with the play button, later the music experience begins with help of pop ups that show up every time a new song appears on the mix. The pop ups show a part of the original video. The way the pop ups were “organized” was planned to still keep up with the experience of Web Art by making the pop ups be part of a glitch, reminding the User that is not just another video edited like any other video in an editing program, but that it is actually being made by the art of programming.

Process:

Link:http://192.168.50.184/~mg5227/ProjectFolder/Experiment/

The process began by selecting a good song mix for this year’s hit songs. After the selection, it was time to recollect all the music videos of each song. When having all the videos, some simple editing was made in Premiere Pro such as cutting and editing the videos speed to go in synchronization with the audio. After ending with edition, programming came along. First, as any video, I had to plan which shots I was goanna use and when, organization and planning was essential to keep the project in good shape. The main function that were used for the project were, window.open(), this function would allow other popup’s to appear; setTimeout(). This would give the command to the pop ups of when to appear, and onload(), this function made possible for the popup to appear automatically. It was tedious as the functions were very repetitive as it was been used for each video, however each function was personalized because they had their own times which needed to be very precise for the videos to be in synchrony with the audio. Those where the major components for the project. Lastly, a button that could close all windows at the same time was made using the .close() function just like the open.window().

Aftermath and result:

It was pretty challenging to figure out how to make the pop ups appear by themselves, but after figuring out it was pretty much very repetitive. The down side of such repetitive functions is that it creates a necessity of extra organization to be able to not get lot between the codes and affect a different video which would ruin everything. Another challenge is that everything depends too much on the speed of the internet, so if the internet is pretty slow sometimes the videos download and appear first than the audio, or they can take longer which ruins any synchronization planned, so the function don’t follow that much timing given to them unless everything is already loaded. Lastly, I was ambiguous on how organized I wanted all the videos to appear as I felt that a lot of symmetry and organization could actually take away some of the experience of what web Art really is, so I decided to keep the windows popping up as it was a random order. Other than that, the results of the project were of my satisfaction and it was a project that I really enjoyed in doing as it compounds two of my favoring things, music and video editing. The challenge of editing a video mainly through programming was something that I will never forget.

Credits to:

1.Cold water-Justin Bieber(instrumental)
2.Slow motion-Trey Songz
3.Lean on-Major Lazer&DJ Snake
4.Lush life-Zara Larsson
5.Cheap thrills-Sia
6.WILD-Troye Sivan ft.Alessia Cara
7.Made in the USA-Demi Lovato
8.Work-Rihanna ft.Drake
9.Work from home+Cold water
10.Cheap thrills-Sia
11.Light it up-Major Lazer(ft.NYLA&fuse ODG)
12.Cry baby-Melanie Martinez
13.Good for you-Selena Gomez
24.Dj Pyromania.

Final Web Project by Diana and Yang (Vasudevan)

This is the link:192.168.50.184/~yg1273/FINALPROJECT/example/frontpage.html

Our project is about 12 hours in Cafe. It is inspired by 24hoursofhappy.com. We shot 12 videos in the cafe in twelve different hours. We also shot 12 different pictures of Cafe in 12 different hours. So when people look at our website, they can choose the time they want to watch by clicking the clock. Then they will see the scene of cafe at that time. Also, if they can find the icon and click it, the video shot at that time will pop up.

Firstly we shot the videos and pictures. We asked our friends to dance in the cafe and record it. Then we downloaded the photo-sphere-viewer library. However, the library could not work because of its wrong file replacement and the lack of other libraries. We asked Jiwon for help and finally fixed it. Then we began to do coding and editing. For me, it’s a little bit tricky to get several canvas work at the same time. And I am so confused about how to transform different variables. Another problem is, we set the canvas in p5 as totally transparent. Therefore, it hard to do some onmosue move change because nothing can cover the previous images. We decided to create 12 html pages. It is easy to write the effects of clock and also to locate the icons. We use boolean function to control the page change, and we made sure every page have 12 links. After user testing, we  also decide to add a front page, so people don’t feel confused about the interaction.

Our original goal is to create a website about food. Later we changed our goal. We decided to make a website similar to 24hoursofhappy. We discussed with Professor Roopa and set our goal. Luckily, we achieved everything we planned for our Cafe website.

Jingle Bell Rock

Link: http://192.168.50.184/~cda324/final

screen-shot-2016-12-12-at-2-54-41-pm

It took me a while to really find a final project idea, but I’m really glad with what I came up with. The concept of my final project was born out of my love for two things, Christmas and Music. So I tried to incorporate both those things into my project, which I think I did successfully. What my project does is allow users to play the song “Jingle Bells” through the use of the keys “A”,”S”,”D”,”F”, and ”G”. The user is given the notes and pace at which to play them at, and can also change the instruments from the piano to a flute, or violin through the use of the left and right arrows. Lastly, the project has the visual element of a Christmas tree, so when the user presses those keys listed above, the Christmas tree lights change colors. I also added some snow to add to the Christmas effect/theme.

My project has two main components, the visual side and audio side. I will discuss the visual side of things first. As you may remember, I originally started my project in HTML/CSS/JS; however, after completing the CSS part, the fellows made me realize that what I wanted to do would be extremely difficult to do the way I was doing it. So they suggested I switch to P5.js which was pretty much unfamiliar territory. With that said though, the first step I took was to use photoshop to recreate the drawings I made in CSS of the Christmas tree. In total, I produced 14 Images; however, only used 5 in my project. Each key is attached to a particular photoshopped image of the tree with a certain light color. So when you press each key it appears the tree is changing colors. Another visual element of my project was the creation of random snow. This was not as hard as I thought it would be, as I found a JavaScript code online that was similar to what I wanted and then I just had to adjust it to cater to P5. Lastly, I think the most important visual element of my project is the karaoke note bar. It tells the user what letter to play, and the pace at which to play it which is extremely useful for those who aren’t familiar with the pace of “Jingle Bells”. The audio side of things was a little more tricky as it required some music knowledge as well as a more advanced code. There are 3 instruments you can play, the piano, flute, or violin. You play the instrument by pressing “A”,”S”,”D”,”F”, and ”G”. Each key represents a note, so rather than having the user press the note, I chose to have them press the letter. To acquire each of these notes I had to use my audio skills on Audacity to single out each note, save, and repeat until I had the 5 notes that made the song “Jingle Bells”. It then was just a matter of creating if, and else if statements.

I’m super proud of how my project turned out, it took a lot of effort and reading, but It does exactly what I want it to do. I think often times I get these crazy wicked ideas in my head like the comic strip project, and fail to execute them correctly; however, with this project I really tried to focus on one thing and accomplish that which I did.

Web Project by Su Yan and Yijie Wang (Vasudevan)

Here’s the link to our web project: http://192.168.50.184/~sy1641/webproject/entrance

Description:

For this project, we believe that it is better if we do something to tell a story. I remembered watching west world and doing something like telling a story in loop. We tried to do something similar but it turned out to be quite hard to work out a story. So, we came up with the idea of telling a whole story composed by small pieces of short stories that happens in different rooms in AB. The reason why we set the story like this is because the school is like the best place for shooting. Also, we tried to cut the long story into pieces so that it fit into different classrooms.

For a plan like this, the first step is to write a nice story. We need to make sure every short story makes sense and somehow complete in its own sense. Each part needs to work well to serve the whole story. So, we decided to make a story about a killer in the school. A murder story is very fictional and dramatic enough, so we have a lot of space to play with our idea.

So, after the story was written, we started shooting the raw materials we need. At first, we want to demonstrate our story in the form of videos, but then we decided to take pictures and use Prism to turn them into comic style pictures. Doing so would save a lot of time and make it easier for us to edit.

The first thing we started our hands on was the home page where you can see the floor plan and explore different rooms. The shot stories were arranged randomly in the floor plan since we want the user to explore all the short stories and figure out the sequence of the whole story by themselves. To offer more help, we made a process bar at the bottom of our home page where you can see which part of the whole story you have just explored. If you clicked on a certain room, the position where it belonged in the whole story would appear in the process bar.

After Thursday’s user testing, we realized that it is important to have an instruction page since most of our users didn’t figure out what our website is trying to do until we explained to them. Also, most of them didn’t even notice our process bar. So, we made some changes afterwards. We created an entrance page where shows the title of our story, “Hello Stranger”. The killer of our story is someone from outside the school and pretended to be a student so that she can approach her target in disguise. Then we made an instruction page to giver the user some hint of what is going on and how they’re going to play with it. Also, in this page, if the user is too lazy find out the sequence by themselves, we also offered a link where they can watch the whole story in the form of a movie. Also, one the floor plan page, if the users lose patience they can click the right arrow and go to the the page where they can see the end of the whole story, which is the scene the killer kill our victim.

Process:

The floor plan page is the hardest to do and that’s why we started to work on this first. Every room is a separate small image  and we used position: absolute to do the whole layout. The trick we did in the process bar is just to change the opacity of the images in the bar. Also, after clicking on the rooms, the picture of the room would be darker, so that the user would know that they have already read those stories. In the entrance page, we used some p5.js to make the image move slowly in the back of the title. In the instruction page, we used css animation, using some tradition to create the effect that zooms the words, actually pictures, when the user hover on them. We photoshoped the images before hand and mainly used array and click function to let the user walk through our story line. We set window.close function at the end of every story so that the window would automatically close when the user reach the last page of the story, and they would see the home page again to explore their next story. In the end we originally wanted to use setTimer to show the complete story line to the user but then  we decided to make it into a video which have similar effect as what setTimer would do but easier for the user to fast forward or rewind.

Post-mortem:

I think our website turned out well and I’m really happy at what I got here. How ever there’s still some thing in our plan that we failed to achieve.

At first we planned to show the user the ending page where the killer killed the victim only after the user have explored all the 10 short stories we offer them. We tried to set variable and give the counter a certain value when the image is clicked. But we failed to figure it out so we can only give them the link directly on the home page, which is the arrow “lose patience?”.

In the starbucks story, we plan to hover on the reading girl’s desk and show a picture of items on her desk, but we failed to make it happen and replaced it with showing the picture directly by clicking. When array and onmouseMove messed together it gets hard to figure out what to do.

They layout of the ending page and the video page is a little bit too simple. We wished it could be prettier but we didn’t got much time to work on it.

The size and position of every picture in every page we got is a big headache. We have to adjust the size and position manually to find out the perfect settings since it changes all the time in different browsers and on different laptops. It turned out fine but I hope I would find out a better way to do it in the future.

We were happy that we have very rich content at first, then we find out that it increased our workload a lot and 10 short stories might be a little too much for the user to understand and figure out the sequence. By the time we realize that, it was too late to rewrite the story, but we still tried to make the short stories more concise as well as shown in less pages.

In all, I like my project a lot and enjoyed working together with Hellen. The content is rich and the style is pleasant. Hope you guys enjoy it too.

Final Project (Vasudevan)

Link: 192.168.50.184/~qz681/final

Finally it’s the last project in Comm Lab. I want to do something special for this project, so that’s the reason why I discarded my first plan of doing the “relaxing” stuff and tried to make something different.

The whole project is based on my personal idea. I had so long the idea to make some games in my website. Therefore, the overall concept is that the users are stuck in the dark (just because I like some dark stuff) and have to pass the games to escape from the dark. The background colour is always black and the music sounds a little creepy, but it’s up to the users whether they want to mute the music.

There is a cover with a huge image. An alert pops to ask the users to allow pop up windows to have full experience. The way out goes to the first game.

The first game is to find some clues on the page to about ways to the next page. The most straightforward clue is a pop up when the “clues” word are hovered. Also, each pair of eyes says something when being hovered. When the “find” word is clicked, a window pops up. The hardest one for me is a black text, the colour of which changed gradually when mouse hovers. From the feedback I collected, the game is much harder than I thought, so I added more clues in terms of pop up windows. At the time of 6, 20, 60 seconds respectively, one clues will pop up automatically. Anyway, there are only 8 links so it’s totally fine for users to try one by one. The visited eyes appear to be darker. Only one pair of eyes lead to the next game, while others go to a page saying “you are trapped in the dark” (by the way, I made three versions of this page).

The second game is to follow one card while being shuffled. There are instructions at the top. I think this game is quite clear. The shuffling effects take me really long time to make. Basically I used css animation to achieve the effect I want. There are actually four layers of picture, and I use javascript to control their “display” property so that only one layer of picture would appear each time.

The third game is a snake moving to eat red blocks. The game is not coded by me, but I added a timer to the page.

After that is an escape from a maze. I drew the lines one by one and created a div with an alert being onmouseover. To prevent cheating, another alert pops when mouse hovers the title. I tried my best to avoid bugs to use alerts to remind the users to press enter and move mouse manually to the starting point. According to the feedback I got, this game is hard but entertaining. When finally the door at the end point is hovered, another window pops up with a door opening gif. The next game appears right after the door opens.

Finally the user goes to a locked door. They can unlock the door if rightly solve the math problem on the side. I coded the password part by judge if the input password equals the fixed password. If they equal, the page goes to ending 1 which is brightness. However, if it’s not, the page goes to a creepy video saying that you fail to escape. That’s the end of this project.

I have to say that I did the majority of this entire process. I did everything except for the code of the snake game, some codes on the video page, video editing, and some codes on the math game page. The other pages are completely written by me. I revised my page after collecting feedback from numerous users. I revised my partner’s code.

I am quite satisfied about this project. Since it is my personal idea of the entire concept, I know well what I am exactly looking for. I achieved all the effects I want, for which I learned CSS animation in addition. The only part I feel dissatisfied in the project is the unequal work allocation. As I mentioned before, I did the majority of work. Before user testing last week, my partner didn’t contribute a single code while I already built three games. In addition to finishing my own allocated parts, I have to debug and revise for my partner. I feel really annoyed and tired to deal with a partner who is good at procrastination and making bugs. Anyway this is part of my experience and I have to solve these problems. It’s fine. At least I am getting more and more familiar with html, css and javascript in this process.

Special thanks to my friend Lily who tests my games again and again and give me frequent feedback.

Cheers for myself to complete this big project! Looking forward to feedback in class^ ^

Final project by Cyndi&Qinfei(Vasudevan)

Our link:192.168.50.184/~qz681/final

Description:

Basically we are trying to make a “escape the room” experience for users and our webpage includes several small games. User is trapped in the dark at first and he/she needs to find some clues on the eyes in order to enter the next page. Then user needs to shuffle the cards and track the card with poker to enter the snake game. After the snake game user needs to find the way out of a maze then come to the gate. The last way is to do a math problem to get the right password. If the password isn’t correct, it will show a video of the scene of a man trapping in the dark but can never escape. Otherwise there’ll be a congratulations webpage.

Our innovation comes from the idea that we want to make a webpage that is very cool and have lots of interactions with the users. So we searched lots of interactive games and ideas online, coming up with the idea that we wanted to show the process of someone escaping from the dark. Interactions requires lots of coding with made us frustrated for thousands of times, but finally this project reach 90% of our expectation and I am satisfied with it.

Process:

After the theme was decided, we started to collect resources online, including dark images, gothic musics, basement videos,etc. Our first version only include 3 pages and the clues wasn’t obvious. After the user text last Friday, we learnt the suggestions from others and reedited our codes. For the eyes part, we added clues on every eyes, and if a user hover over or click the page randomly, he or she can find some extra clues. If the user stay on the page for more than 10-20 seconds but still hasn’t get his/her way out, then there will be popup windows to inform his/her how to find the clue. In the poker part, we wrote clear instructions on the top to inform users that they should shuffle the card first then click on the right card. We did some online researches and edit the code of shuffling the cards. In the snake game, we learnt the thoughts of the code online and approached many unfamiliar codes and combined them together. The goal for the user is to survive 30 second. We set a timer after clicking the start button, and actually also we wanted to let the snake move only when the user click start button, unfortunately we didn’t manage to do that. After passing the maze game, we put a math problem as the key of opening the door. At first we tried to use if statement to let the computer know when to jump to which page, and we tried for a long time but didn’t succeed. We couldn’t find where our problem was so we changed the code into the password function and got the same outcome. If the user has the wrong answer, there will appear a video page. We got the origin video and audio from Youtube and edited them, making them coherent.

There’s a communication problem with my partner because every time when she updated something in her computer, she never put them into google drive which made me hard to see how far has the project gone. Every time when she changed her ideas she never told me about it so I had no idea what we should do next. I made a snap photo page but I don’t know why she didn’t use it in the end. She was always following her ideas. I did lots of work in the project but just few of them are used in the final outcome because my partner wasn’t satisfied. Due to the time limit, I couldn’t make big changes.  We decided the date of working on the project together, but she did her own work first without telling me so my plan of the work was totally messed up, because all my former thoughts couldn’t be used since she already put her codes in front of me and I couldn’t deny her work. I have to say that my partner wasn’t that willing to communicate with me because she always reply so late and it was always I contacted her.

Reflection:

To be honest this project is the hardest for me in this semester, because this is the first time I’ve done so much coding. This project couldn’t reach our expectations at first and all the code we used seemed really hard for us, especially the if statement part. However,  through the process of learning unfamiliar codes and figuring out our own way to edit them is kind of interesting,  and sometimes there isn’t just one way to approach a problem. I’m very happy that we got a good outcome.