This was a very interesting piece. The essential part of this work is that the website functions as a fictional online diary that is composed of various images and such, relating to two lovebirds who send each other messages across a vast expanse of space. It reminds me of a few games that I have played which reminisce on the retro-futuristic style of old 90s speculations of what the future might be. A close similarity might be the star wars films, with their old, yet high tech feel.
The work itself is an extremely dense work with layered links, pages upon pages of text, and fully tracked soundscapes.
Some examples are shown below:
Here, the letter is shown, which I found to be a very interesting way to display the typography of the image. I may use this, but i am still uncertain as my concept will have the text type itself out on the screen.
A Map:
I did enjoy the interactivity, but I felt as though this is not the same direction that I would like my project to go towards. Although similar in style, the way that I wanted to have my visual novel was to have it be more imaginative and have drawings to guide the user’s gaze as well as comment on the functionality.
A fair warning, this will be quite a long documentation. It contains a more personal take on this project and serves as a place to vent some frustration, but also has some takeaways that I hope will serve any curious students to not repeat my mistakes.
This is also the reason why it is unfathomably late. I apologize to whoever grades these things.
Forgive the informality, I tried to make this as persuasive as possible.
Description of the Project:
In the beginning of the project, my group decided to implement something simple, which would be a video that could change different perspectives of a person’s daily life. Essentially, the code would switch between perspectives like so:
The plan was to have a button that would interchange the perspectives of the three actors on their way to school. However, my groupmate, Kimmy, worried about the cohesiveness and interest of a viewer in the story. Who would actually want to watch someone’s trip to school? there has to be something to guide it, some sort of plot. Therefore, we decided on a chronological story which started the downfall. I will not lie, we did not accomplish our goal in a satisfactory way. The code, because of our ambitions, further complicated matters by breaking before we presented, having for me to stay behind and be late for class. To this, I am truly sorry for my professor, cici.
This is how the Division of Labor was broken down:
Filming = Adam/Kai/Kimmy
Conceptualization/Direction = Kimmy
Drawing and Text Message Editing = Kimmy
Editing Adam Scene (4:48) + gifs = Adam
Editing Kimmy Scene (2:38) = Kimmy
Editing Kai Scene (2:26) = Kai
Handling the functionality of HTML and majority of the javascript = Adam
Handling CSS and mouse-over functions of videos = Kimmy
Handling the mouse-over function of Kai video = Kai
Process:
Coding:
At the very start of the process, we thought it would be simple to just agree on a cohesive idea. This ended up being Kimmy’s idea, a video project on the story of three people coming to school.
Personally, for me, I thought it would be wise to start coding on the project as soon as possible. I was looking for possible solutions to using a single video div in order to display this.
My first code essentially showed this, with the following functions replacing the div with video files to change the video.
This, I thought would be the simplest way to change the code. This, however, was not the case. The method that I ended up experimenting with was changing the display of multiple videos that I would have playing in HTML, which looked something like this:
This is the basis for the mess that was our project.
By this time, however, I had figured out how to make it so that in different sections of time, we would be able to display various things and run functions, which will be shown below:
The above image is how to show and hide images. By using document.getElementbyId(‘whateveritisthatyouwant’).style.display = “____” you can change the display of an image’s CSS within javascript. This was the main function that was used to call functions.
The above image shows the functions labeled “change”, where these functions were used by various buttons in order to change the display of the videos. The function “video.currentTime” was then used to set different times of the videos that were being called. At the time, I thought this was simple code. Little did I know that with assets, I would be overwhelmed. This brings me to the next part.
Filming:
I am actually pretty proud of the shots that we did, although I did not really like waking up early to attend to everyone’s needs for being filmed. In the long run, however, we were able to make a decent film (in my opinion).
The breakdown for filming was like this: I filmed Kai’s dream state, Kimmy’s wake-up scenes as well as my own. Kimmy filmed shots of me in the gallery and walking to the gallery scene and Kai’s sleeping state was filmed by her roommate (whose’s shots I really did not like but like what can I do about that).
I learned a lot about videography (This was my first chance to film!), and was able to experiment a lot with the adobe premiere service, although I regret that I failed to compensate for a few things.
For example, for the first hour of me using it was literally trying to find the tools to use to edit. However, after that I found it to be a very useful tool. Love premiere and would recommend it over iMovie, even though there is a steep learning curve.
Notables that were forgotten would be the difference between the audio of the soundtrack that I used and the dialogue audio. I do regret it, but listening on headphones was a very different experience from the speakers. I suppose I should have taken that into consideration.
I also totally forgot to credit the producer.
Here’s the link, as well as the producer and such :
Titled: Post Malone, Swae Lee – Sunflower (Spider-Man) INSTRUMENTAL –
Youtube Producer: 101k
Editing:
Kimmy was a bit confused as to how to edit the second half of my video, so I had to take part in editing it. This was fine, as I was also going to re-edit the first half of my video because of some of cici’s comments on the framing of the shots. For example, there is a bathroom scene where I brush my teeth, which was originally a scene where I brushed my teeth and shaved. However, since the frame was a bit off and cici said something about having a straight line I decided to refilm it.
Also for consistency, I had to reshoot the entirety of my getting ready scene because initially, I put on a hat and headphones. However, I did not have those things when I went to the second part of the scene. Therefore, I had to reshoot those, but I was happy to include a new shot of me putting on my shoes with my socks ~ they were very cute poodles!
Additionally, I think another scene that was very fun to shoot was the entirety of Kimmy’s scene. I didn’t really do much directing, and I’m glad that Kimmy took the initiative to just act natural. We were able to take most of the footage in one shot, except for maybe her putting on her shoes ~ this was hard to do though because I had to lay down to get the right angle to capture her feet and the little shimmy that she does. Another cool but very hard shot to do was on the train. When filming on the train, it is important to be stable, but also know what you were filming. In this case, I think that my camera was very useful because it can angle the display case so that I can look at what I’m shooting at, even if it is at an odd angle. This made it easier for me to take shots of random people on the train (because it is very uncomfortable to do so for me). This is how I got stable train footage.
I must say though, I always felt very cumbersome carrying around the audio equipment and the tripod with me everywhere. If you ever film, get a small duffel filled with clothes! I find it much better than a camera/sling bag that you carry over both shoulders. Plus the clothes serve as cushioning! A very nice pillow indeed if you ever feel weary. Anyways, jokes aside let’s continue.
Issues we ran into -> So, literally the chaos of the past 2 days.
To sum up the past two days: Painful.
Chronologically here is my past day or so:
Monday -> 6:30 wake up -> Film -> go to school -> go to class -> finish comm lab -> go have dinner -> 6:30 begin working on comm lab -> 11:45pm leave ab -> 12pm stress out about comm lab -> 6:30 wake up -> 7:30 get to school and decide to skip class to work on comm lab -> work until 12:30 -> go back at 12:35 (I eat fast) -> work -> 2:00pm have everything break -> panic -> 2:30 talk about giving up -> 3:00pm get back to work -> 3:50 have my code break -> 4:45 go to comm lab with a semi half finished project because javascript broke on me.
I’m not really looking for pity, but I am incredibly tired. Is this what IMA students do? I guess you could call this an acceptable failure ~ try your best but still fail. Everything’s fine.
Moral of the Story: DONT BE TOO AMBITIOUS ON A VIDEO PROJECT. But ALSO DONT PROCRASTINATE ON ASSETS.
The main issue with this project is that assets were being worked on at the same time that the main code was being put together. Because of this, I often worked on adding, instead of making the code more efficient. after all, I didn’t really have time to add more stuff with the influx of new and changing assets at the time frame I was given. This was definitely rushed, and I blame myself entirely for it.
Here are some handwritten attempts to keep track of everything I labeled – apologies that it isn’t rotatable.
This is the entirety of the final code.
It is way too long.
However, in reflection, I guess this shows how I should probably be more efficient with my code. However, since I was mostly learning on the fly here and testing to see if each function worked it was going fine. However, due to the fact that so many files kept getting switched around and we changed from like 5 buttons to 10 buttons, it became incredibly hard to track what was going on in the code.
I think if I didn’t care so much about this project, this would have definitely been a lot worse because the way that I labeled each id made it so that I had to memorize the positions of where everything was. However, after working on it for so long it essentially became so that I knew every line of code that was being produced.
However, because of that it also made it so that I was the only one who could combine everything together. I’m going to have to blame the comm lab style of teaching for this because essentially even though we learned the code to understand what I had, it is hard for students to really practice what we learn in class. I think that I made a lot of progress in learning and being able to read javascript by doing these projects, but it is still a huge time commitment. Often times I spend about 2-3 hours minimum in the lab just trying to learn some code. This is not exactly what I want to do with my life, but I guess it is fun. Anyways, back to the analysis.
Essentially, what went wrong is that even though what was initially a simple project became something so utterly complex that it spanned too much code. With the addition of buttons and image elements in the equation, it was hard to allocate enough time to fix everything and code everything myself even with the stupid amount of time that I have already put into it.
If I had another week, perhaps it would have been for the best, especially with the expertise of the IMA fellows.
I was also not expecting this to be that hard, because the story behind user testing is that I was able to fix everything within 3 hours.
The story is that the weekend of, I was initially waiting for all the assets to appear because I had been promised stuff so that I could continue to work on the code. I was unable to really work on it because I had gone to Shenzhen (for future reference -> DO NOT GO ON SCHOOL FIELD TRIPS BEFORE PROJECTS ARE DUE) I lost a lot of time on coding and filming because of this.
However, I am not entirely sure this would have mattered due to complications with our assets. For example, there were a ton of coding questions that I had to fix for our user testing part, so when I arrived at around 12am on Monday I went back to the dorm and coded for 3 hours until I finished. Therefore, I thought that I could handle what I was given and that this project would not be that bad.
This was not bad. The demo too, was not bad. I don’t think we had working buttons, but we had hover functionality.
This was fine. But what was not fine was the fact that Kai finished hover functionality on Tuesday, which meant that I had to stay over to incorporate it into the already huge amount of code that I had.
Essentially, another lesson I might take away from this is to work on one thing at a time and not everything at once.
As Dave (IMA fellow) once told me, don’t use multiple javascript files or HTML files. It’s inefficient.
Post-Mortem:
After completing this project, I was incredibly tired and anxious about the turnout. It was not what I expected in terms of code, and I am quite ashamed that it is in quite a piss-poor state. However, I know I did the best I could and I guess I will just have to take the loss.
In this light, I guess better group communication would have been best to finish the project in the same manner. If we were able to complete our assets earlier, we would have been able to work on the code sooner and then probably fix all the issues. However, after the past two days, I am thinking that it would have taken a week and a half (after 7 hours of working I still had bugs, and my sanity is ruined).
It was also incredibly lucky (in a bad way) that Kai and I both had things to attend on the weekend. This sacrificed a lot of time that could have gone into making the video. But then again, I paid 2,000 kuai to go to Shenzhen and I also put my best into making the video project work.
Overall, I guess I am happy in the filmmaking aspect, although it could use work. I am not happy about the coding, but I guess I will manifest it into a dislike of my own coding organization habits.
These were already said, but I guess they would really apply to this project.
If we had more time, and I had a bit more experience coding in javascript this could have worked out very well. However, we probably should have stuck to a simple concept such as just changing perspectives. After my audio project though, I thought it to be inadequate. If I could petition for more time to work on projects, this would definitely be a fine example of it.
And if I were to abuse this medium as a free-space for ideas, I think that we all could have used more time to really think about our concepts. But then again, just my two grains of salt.
Essentially, I’m just happy that the barebones for the project are in place. It could use a major revamp though. Maybe I will ask Leon if I have time if he’d be willing to help organize the code.
I’m thinking now that I will clear my head and work on the next project, and hope that the coding lessons learned here will help me ace the next one.
Chimamanda Ngozi Adichie in her Ted Talk, the danger of a single story, discusses the dangers of exposing people to one perspective. The example she gives is foreign books that she was exposed to as a child. Ironically, this is something that she characterizes as something universal. And I do think this is something that makes sense. If we think of other countries as different places with different people, sometimes it becomes clear that we do not know what is the truth. We only know the story that is told to us. I think about this when she tells her story in 2009, where I am viewing this story in 2019. I think about how different American University must be, where (when she discusses Authenticity) her professor tells of Africa as if Africans cannot be anything like him. But I am glad to hear how she thinks that we are all a part of this sly catastrophe. Because we are. It is impossible to think that we will ever be able to have more than one cohesive story. But it is a possibility to listen, and listen again to different variations. What is it to be a person? Is it possible to really pinpoint what it is to be a human being? It’s impossible to do. And yet we do it every-day. Give someone a writing utensil and tell them to draw what a person is. You will get varying styles of the person, different sizes and shapes that will constitute the person they think is a person. And when you ask them “what is that?”, they will reply: “that’s a person”. Oh really? you might proceed. You might point to someone else’s drawing and say, why is this also a person then? they look similar but they are a person. Why do they have the same word? the other person will say: oh, idk. And that will be the end. Nobody really has answers, but more or less forms associations as to what they have experienced. It’s a problem with language, but one that we deal with to try to understand each other. And that’s the depressing part of the story. But at the same time, this is what makes Chimamanda Ngozi Adichie’s message so invigorating, because we know that we will try to break through that impossible barrier. Because it’s always interesting to know about someone else’s story, I guess that’s how we might break through. Talk about universal love, a concept that helps bring the most unlikely of people to become closer. I think that’s the idea of a utopia that Chimamanda Ngozi Adichie is arguing, and I honestly would agree. I wish I could know everyone’s story. I wish I knew how people became the way they were. Because in each of their story is my story, a righteous story of trial and error that lives until it is no longer told. In books, however, they live forever.
For the audio project, Kevin and I both had very different ideas on what to do, but thankfully were able to blend both ideas into a cohesive project. The project itself was easy to understand conceptually, but harder to implement in actuality. The main components were a text-box, keypresses, and buttons that would manipulate both visual and audio components. Kevin was to do the Textbox, audio, and CSS, while I was responsible for everything else. The main issues for me were figuring out how those should work in a project and practicing how functions, if/then statements, arrays, and booleans work in the code (we had very brief discussions on these).
Process:
We both worked on the code in different ways. I took many routes to experiment and put together the final project. Most of the idea, assets, and code to make sure the entire thing worked was done by me. Along the way, I learned how to register keypresses, utilize arrays for efficiency, use booleans in order to differentiate the keypress functions I made between the text-box inputs by Kevin, which was quite a trip. Within the entire week, it was a grueling process of going to dave and trying to figure out what exactly he told me conceptually. Sometimes I figured it out, sometimes I didn’t. it was an interesting process.
To start with the example, I looked towards the key-down function encoded into javascript and then replicated code from online in order to call different functions. This turned out to be my undoing, however, as I didn’t really understand what I was doing. This I took to various fellows in order to fix.
Here are some of the things I learned in class that I feel I now have a better understanding of now:
One of the hardest things to overcome was user-testing, which made me reconsider having keypresses play audio, which was going to be a main part of the project and what was going to make the project more or a remixing platform. However, as user-testing was being conducted, the keyboard was often played too much with, causing the audio files to mix in a way that was destructive to people’s ears since there was so much sound.
Because of this, I had to change the keypresses to just images only so that the problem would not happen again in case we had users experiment with our site during the presentation. However, I did leave the buttons to have some semblance of an interactive nature with audio. I didn’t really know what else to put through so I just had the same parts.
Also, I didn’t think that there could be more buttons or sounds to put because it would ruin the rest of the layout.
Post-mortem:
I think that our audio project met our initial goals, although one thing I would have wanted to add (an idea I had today) was to mainimg.src = math.floor(Math.random()); the keypresses so that each keypress I logged with a letter would put a random image from the array I made. However, due to time constraints, I did not wish to ruin my code to undesirable levels like I almost did today with the last minute edits, so I chose to hardcode from the array the given images. Additionally, Dave told me to use a focus function in javascript in order to enable keypresses to not register in the text-box, which I was unable to do before he left on Friday. So I hope that in my next project I can ask that if I need to use it. Other than that I think the project is quite seamless and up to my standards, given the week time constraint I took to working on the project.
“The first words I spoke in the original phonograph, Mary had a little lamb. It’s fleece was white as snow. And everywhere that Mary went, the lamb was sure to go. ”
“The Distinguished Flying Cross upon Colonel Charles A. Lindberg”
“Today, panicked investors ordered their brokers to sell at whatever the price in the stock market crashed.” – the Stock Market crash of 1929
“The only thing we have to fear is fear itself.” – President Franklin D. Roosevelt
“Horrific place, ladies and gentlemen, the smoke and the flames now, ooh, the humanity”
“Now, with the help and support of the woman I love.” ”
“Urging the people to evacuate the city as Martians approach.” – First War of the Worlds Radio Broadcasting.
“Never to go to war with one another again”
“. . .Juden. . .” – Probably Hitler addressing Nazi supporters.
“This country is at war with Germany.”
“December 7, 1941, (the Japanese have attacked Pearl Harbor) a date which will live in infamy.”
“This is Bob Command performance Hope telling each Nazi that’s in Russia today that, “Crimea doesn t pay. ”
“I consider myself the luckiest man on the face of the earth.”
“President Franklin D. Roosevelt stricken late today.”
“Who’s on first.” “Yeah” “The fellow s name” “Who” –
“The world will note that the first atomic bomb was dropped on Hiroshima.”
Abbott: “Who Is on first.” Costello: “What are you asking me for?”
“Reports from the new Germany tell of horrors leading to the total extermination of the Jews of Europe.”
“An iron curtain has descended across the continent of Europe.”
“Jackie Robinson goes to bat for the first time in a Major League.”
“Old soldiers never die. They just fade away.”
“Lucy” “Ahhhhhhh!”
“It was a little cocker spaniel dog, and our little girl, Tricia, the six year old, named it Checkers ” – Richard Nixon
“Are you a member of the Communist Party?”
“Oh, a cop, eh. Woo, woo, woo.”
“Or have you ever been a member of the Communist Party?”
“A blast from the past! A blast from the past! A blast from the past!” “Baby, you re the greatest.”
“From Sun Recording artist, Elvis Presley”
“I d like to thank all, all the wonderful folks, and I’d like to thank you, too.”
“Three young singers were killed today in the crash of a light plane.”
“American bandstand. And now, here he is, the star of our show, Dick Clark.”
“Ask not what your country can do for you. Ask what you can do for your country.” – John F. Kennedy
“They re standing up, waiting to see if Maris is going to hit number 61”
“Godspeed, John Glenn.”
“Happy birthday, Mr. President.” -Marilyn Monroe
“Wondering how and why Marilyn Monroe died.”
“Something has happened in the motorcade. President Kennedy died at 1:00 p.m. Central Standard Time”
“Lee Harvey Oswald was shot.”
“I have a dream (Really?) that my four little children will one day live in a nation where they will not be judged by the color of their skin, but by the content of their character.” – Martin Luther King
“And I say segregation now, What we have foremost in common is their enemy, segregation tomorrow, the white man, and segregation forever, he’s an enemy to all of us.”
“I have a dream”
“I am about to sign into law the Civil Rights Act of 1964.”
“The Beatles!”
“And today I ordered to Vietnam the Air Mobile Division. Additional forces will be needed later and they will be sent.”
“I have very sad news for all of you. Martin Luther King was shot and was killed tonight in Memphis Tennessee.”
“Senator Kennedy has been shot. Is that possible?”
“As he said many times in many parts of this nation, Some men see things as they are and say, Why? I dream things that never were and say, Why not? ”
“That’s one small step for man, one giant leap for mankind.” – Neil Armstrong when he became the first man to set foot on the moon.
“It’s a free concert from now on.”
“We must be in Heaven, man”
“Four persons including two women were shot and killed in Ohio today. Hundreds of students were involved as National Guard”
“There l’ll be a killer and a thriller and a chiller when I get the gorilla in Manila.” – Muhammed Ali
“I have concluded an agreement to end the War and bring peace with honor in Vietnam.” – President Richard Nixon
“There’s a drive into left-center field. That ball is gonna be, out of here. It s gone. It’s 715. There s a new home run champion of all time and it’s Henry Aaron.”
“Well, I m not a crook” – President Richard Nixon
“Here s Johnny”
“I shall resign the Presidency effective at noon tomorrow.”
“An absolute pardon unto Richard Nixon.”
“My name is Jimmy Carter, and I m running for President.”
“Live from New York, it s Saturday Night.”
“Elvis Presley died today at Baptist Hospital in Memphis.”
“John Lennon was brought to the Emergency Room. He was dead on arrival.”
“Today marks day number 64 in the hostage crisis in Iran.”
“I, Diana Frances take thee Philip Charles Arthur George” – Diana, Princess of Wales.
“To my wedded husband.”
“To my wedded husband.”
“A disease striking primarily in the gay community called Acquired Immune Deficiency Syndrome. ”
“The liftoff of the 25th Space Shuttle Mission, and it has cleared the tower. Rock and roll, Challenger.”
“We will never forget them, nor the last time we saw them, as they prepared for their journey and waved Goodbye, and slipped the surly bonds of Earth to touch the face of God.”
“I have as much experience in the Congress as Jack Kennedy did when he sought the Presidency.”
“Senator, you re no Jack Kennedy.”
“Mr. Gorbachov, tear down this wall.”
“I don t think it was wrong.”
“We did not trade weapons or anything else for hostages.”
“I think it was a neat idea.”
“Everyone on Sesame Street is always talking about love. Yuck”
“Hundreds of Berliners from East and West, standing atop the Wall, with chisels and hammers.”
“The skies over Baghdad have been illuminated.”
“Read my lips.”
“We, the jury, in the above-entitled action, find the defendant, Orenthal James Simpson, not guilty of the crime of murder, a felony, upon Nicole Brown Simpson, a human being.”
“Princess Diana died of injuries suffered in a car accident”
“I m Ellen and I m gay.” – Ellen Degeneres
“Yeah, baby.” – Mike Myers (as Austin powers in Austin Powers)
“There it is, 62, folks, and we have a new home run champion, Mark Mcguire.”
“Welcome, you ‘ve got mail.”
“I did not have sexual relations with that woman.” – President Bill Clinton
“This vast right-wing conspiracy conspiring against my husband.” – Hillary Rodham Clinton
“Watch me pull a rabbit out of my hat”
“Indeed I did have a relationship with Miss Lewinski that was not appropriate. (Again!) In fact it was wrong. I need to go back to work for the American people.” – President Bill Clinton
“The young killers of Columbine High School do not stand for the spirit of America. We can rise up and we can say No more. ”
“Let the word go forth from this time and place, that the torch has been passed to a new generation of Americans.” – President John F. Kennedy.
Reflection: Accompanied by the video, Kenny G’s rendition of Auld Lang Syne evokes feelings of nostalgia. The combination of a smooth saxophone, as well as the soft, melodic percussive instruments, allows for a complete experience that allows the viewer to reimagine the most important events of the 20th Century. This is enhanced by the positioning of the quotations, where many of the quotes are placed out of order in order to enhance the experience. Much of what makes the 20th century so tumultuous is demonstrated by these quotations – for example, the quotes on segregation versus the white men are bad contrast.
